From 16f4f7eac8e4f4cc8a067105dbc3ddf045443f8d Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Fri, 25 Dec 2020 10:54:49 +0100
Subject: [PATCH] Reused dropdown-btn styles in sorting dropdown

---
 src/utils/Dropdown.scss         | 14 +++++++-------
 src/utils/DropdownBtn.tsx       |  2 +-
 src/utils/SortingDropdown.tsx   |  8 +++++---
 test/utils/DropdownBtn.test.tsx |  8 ++++----
 4 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/utils/Dropdown.scss b/src/utils/Dropdown.scss
index f7a91eed..6cfae1dc 100644
--- a/src/utils/Dropdown.scss
+++ b/src/utils/Dropdown.scss
@@ -1,18 +1,18 @@
 @import '../utils/mixins/vertical-align';
 
-.dropdown__btn.dropdown__btn,
-.dropdown__btn.dropdown__btn:not(:disabled):not(.disabled).active,
-.dropdown__btn.dropdown__btn:not(:disabled):not(.disabled):active,
-.dropdown__btn.dropdown__btn:not(:disabled):not(.disabled):focus,
-.dropdown__btn.dropdown__btn:not(:disabled):not(.disabled):hover,
-.show > .dropdown__btn.dropdown__btn.dropdown-toggle {
+.dropdown-btn__toggle.dropdown-btn__toggle,
+.dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled).active,
+.dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled):active,
+.dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled):focus,
+.dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled):hover,
+.show > .dropdown-btn__toggle.dropdown-btn__toggle.dropdown-toggle {
   color: #6c757d;
   background-color: white;
   text-align: left;
   border-color: rgba(0, 0, 0, .125);
 }
 
-.dropdown__btn.dropdown__btn:after {
+.dropdown-btn__toggle.dropdown-btn__toggle:after {
   @include vertical-align();
 
   right: .75rem;
diff --git a/src/utils/DropdownBtn.tsx b/src/utils/DropdownBtn.tsx
index 512b5f18..1dde1e45 100644
--- a/src/utils/DropdownBtn.tsx
+++ b/src/utils/DropdownBtn.tsx
@@ -11,7 +11,7 @@ export interface DropdownBtnProps {
 
 export const DropdownBtn: FC<DropdownBtnProps> = ({ text, disabled = false, className = '', children }) => {
   const [ isOpen, toggle ] = useToggle();
-  const toggleClasses = `dropdown__btn btn-block ${className}`;
+  const toggleClasses = `dropdown-btn__toggle btn-block ${className}`;
 
   return (
     <Dropdown isOpen={isOpen} toggle={toggle} disabled={disabled}>
diff --git a/src/utils/SortingDropdown.tsx b/src/utils/SortingDropdown.tsx
index 76fd1ca4..2bb59cba 100644
--- a/src/utils/SortingDropdown.tsx
+++ b/src/utils/SortingDropdown.tsx
@@ -28,10 +28,12 @@ export default function SortingDropdown<T extends string = string>(
     <UncontrolledDropdown>
       <DropdownToggle
         caret
-        color={isButton ? 'secondary' : 'link'}
-        className={classNames({ 'btn-block': isButton, 'btn-sm p-0': !isButton })}
+        color={isButton ? 'primary' : 'link'}
+        className={classNames({ 'dropdown-btn__toggle btn-block': isButton, 'btn-sm p-0': !isButton })}
       >
-        Order by
+        {!isButton && <>Order by</>}
+        {isButton && !orderField && <>Order by...</>}
+        {isButton && orderField && <>Order by: {items[orderField]} - {orderDir}</>}
       </DropdownToggle>
       <DropdownMenu
         right={right}
diff --git a/test/utils/DropdownBtn.test.tsx b/test/utils/DropdownBtn.test.tsx
index 0ce97144..79722689 100644
--- a/test/utils/DropdownBtn.test.tsx
+++ b/test/utils/DropdownBtn.test.tsx
@@ -28,10 +28,10 @@ describe('<DropdownBtn />', () => {
   });
 
   it.each([
-    [ undefined, 'dropdown__btn btn-block' ],
-    [ '', 'dropdown__btn btn-block' ],
-    [ 'foo', 'dropdown__btn btn-block foo' ],
-    [ 'bar', 'dropdown__btn btn-block bar' ],
+    [ undefined, 'dropdown-btn__toggle btn-block' ],
+    [ '', 'dropdown-btn__toggle btn-block' ],
+    [ 'foo', 'dropdown-btn__toggle btn-block foo' ],
+    [ 'bar', 'dropdown-btn__toggle btn-block bar' ],
   ])('includes provided classes', (className, expectedClasses) => {
     const wrapper = createWrapper({ text: '', className });
     const toggle = wrapper.find(DropdownToggle);