fix(ui): SortDropdown - merge buttons

relative-ci · Apr 11, 2020 · a5d599b · a5d599b
1 parent eb7e984
commit a5d599b
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 99 deletions.
diff --git a/packages/ui/src/ui/sort-dropdown/__snapshots__/sort-dropdown.stories.storyshot b/packages/ui/src/ui/sort-dropdown/__snapshots__/sort-dropdown.stories.storyshot
@@ -96,31 +96,28 @@ exports[`Storyshots UI/SortDropdown default 1`] = `
                 <div
                   className="items"
                 >
-                  <span
+                  <div
                     className="item"
                     key="filename"
                   >
                     <button
-                      className="itemSortBy"
-                      onClick={[Function]}
-                      title="Order by Filename"
-                      type="button"
-                    >
-                      Filename
-                    </button>
-                    <button
-                      className="itemSortType itemSortTypeAsc"
+                      className="itemButton itemAsc"
                       onClick={[Function]}
-                      title="Order data descending"
+                      title="Order data by Filename descending"
                       type="button"
                     >
+                      <span
+                        className="itemLabel"
+                      >
+                        Filename
+                      </span>
                       <Icon
                         as="span"
-                        className="itemSortTypeIcon"
+                        className="itemIcon"
                         glyph="arrow"
                       >
                         <span
-                          className="root itemSortTypeIcon"
+                          className="root itemIcon"
                         >
                           <ArrowIcon
                             className="icon"
@@ -146,32 +143,29 @@ exports[`Storyshots UI/SortDropdown default 1`] = `
                         </span>
                       </Icon>
                     </button>
-                  </span>
-                  <span
+                  </div>
+                  <div
                     className="item active"
                     key="size"
                   >
                     <button
-                      className="itemSortBy"
-                      onClick={[Function]}
-                      title="Order by Size"
-                      type="button"
-                    >
-                      Size
-                    </button>
-                    <button
-                      className="itemSortType itemSortTypeAsc"
+                      className="itemButton itemAsc"
                       onClick={[Function]}
-                      title="Order data descending"
+                      title="Order data by Size descending"
                       type="button"
                     >
+                      <span
+                        className="itemLabel"
+                      >
+                        Size
+                      </span>
                       <Icon
                         as="span"
-                        className="itemSortTypeIcon"
+                        className="itemIcon"
                         glyph="arrow"
                       >
                         <span
-                          className="root itemSortTypeIcon"
+                          className="root itemIcon"
                         >
                           <ArrowIcon
                             className="icon"
@@ -197,7 +191,7 @@ exports[`Storyshots UI/SortDropdown default 1`] = `
                         </span>
                       </Icon>
                     </button>
-                  </span>
+                  </div>
                 </div>
               </div>
             </div>

diff --git a/packages/ui/src/ui/sort-dropdown/sort-dropdown.jsx b/packages/ui/src/ui/sort-dropdown/sort-dropdown.jsx
@@ -7,68 +7,40 @@ import { Icon } from '../icon';
 import css from './sort-dropdown.module.css';
 
 export const SortDropdown = (props) => {
-  const {
-    className,
-    label,
-    items,
-    sortBy,
-    direction,
-    onChange,
-  } = props;
+  const { className, label, items, sortBy, direction, onChange } = props;
 
   const rootClassName = cx(css.root, className);
 
   const getButtonOnClick = (newSortBy, newDirection) => () => {
     onChange({ sortBy: newSortBy, direction: newDirection });
   };
 
-  const customLabel = items[sortBy]
-    ? `Ordered by ${items[sortBy].label}`
-    : label;
+  const customLabel = items[sortBy] ? `Ordered by ${items[sortBy].label}` : label;
 
   return (
-    <Dropdown
-      className={rootClassName}
-      label={customLabel}
-      glyph="sort"
-      align="right"
-    >
+    <Dropdown className={rootClassName} label={customLabel} glyph="sort" align="right">
       <div className={css.items}>
         {Object.entries(items).map(([key, item]) => {
-          const sortDirectionProps = direction === 'asc'
-            ? {
-              className: cx(css.itemSortType, css.itemSortTypeAsc),
-              onClick: getButtonOnClick(key, 'desc'),
-              title: 'Order data descending',
-            } : {
-              className: css.itemSortType,
-              onClick: getButtonOnClick(key, 'asc'),
-              title: 'Order data ascending',
-            };
+          const buttonProps =
+            direction === 'asc'
+              ? {
+                  className: cx(css.itemButton, css.itemAsc),
+                  onClick: getButtonOnClick(key, 'desc'),
+                  title: `Order data by ${item.label} descending`,
+                }
+              : {
+                  className: css.itemButton,
+                  onClick: getButtonOnClick(key, 'asc'),
+                  title: `Order data by ${item.label} ascending`,
+                };
 
           return (
-            <span
-              key={key}
-              className={cx(css.item, sortBy === key && css.active)}
-            >
-              <button
-                className={css.itemSortBy}
-                type="button"
-                onClick={getButtonOnClick(key, item.defaultDirection)}
-                title={`Order by ${item.label}`}
-              >
-                {item.label}
+            <div key={key} className={cx(css.item, sortBy === key && css.active)}>
+              <button type="button" {...buttonProps}>
+                <span className={css.itemLabel}>{item.label}</span>
+                <Icon className={css.itemIcon} glyph="arrow" />
               </button>
-              <button
-                type="button"
-                {...sortDirectionProps}
-              >
-                <Icon
-                  className={css.itemSortTypeIcon}
-                  glyph="arrow"
-                />
-              </button>
-            </span>
+            </div>
           );
         })}
       </div>

diff --git a/packages/ui/src/ui/sort-dropdown/sort-dropdown.module.css b/packages/ui/src/ui/sort-dropdown/sort-dropdown.module.css
@@ -2,45 +2,31 @@
   margin: calc(0px - var(--space-xsmall)) calc(0px - var(--space-small));
 }
 
-.item {
-  display: flex;
-  align-items: center;
-  color: var(--color-text-light);
-}
-
 .itemButton {
   padding: var(--space-xsmall) var(--space-small);
+  display: flex;
+  width: 100%;
 
   outline: 0;
   appearance: none;
   border: 0;
   background: none;
   color: inherit;
+  font-size: var(--size-small);
   line-height: var(--space-small);
   cursor: pointer;
   text-align: left;
 }
 
-.itemButton:hover {
-  color: var(--color-text-dark);
-}
-
-.itemSortBy {
-  flex: 1 1 100%;
-  composes: itemButton;
-}
-
-.itemSortType {
-  composes: itemButton;
+.itemIcon {
   display: none;
-  color: var(--color-primary);
 }
 
-.itemSortType:hover {
-  color: var(--color-primary-dark);
+.itemLabel {
+  flex: 1 1 100%;
 }
 
-.itemSortTypeAsc .itemSortTypeIcon {
+.itemAsc .itemIcon {
   transform: rotate(180deg);
 }
 
@@ -50,9 +36,10 @@
 }
 
 .item.active {
-  color: var(--color-text);
+  background: var(--color-highlight);
+  color: var(--color-primary);
 }
 
-.item.active .itemSortType {
+.item.active .itemIcon {
   display: block;
 }