feat(select): L3-3818 addressed comments

PhillipsAuctionHouse · Nov 19, 2024 · f7b8ed6 · f7b8ed6
1 parent b0f1e57
commit f7b8ed6
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 42 deletions.
diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
@@ -139,6 +139,7 @@ const Pagination = ({
         data-testid={`${id}-select-button`}
         hideLabel
         disabled={isDisabled}
+        showIcon={false}
       >
         {options.map((option) => {
           const optionValue = determineOptionValue(option);

diff --git a/src/components/Select/Select.stories.tsx b/src/components/Select/Select.stories.tsx
@@ -25,7 +25,7 @@ const argTypes = {
       type: 'boolean',
     },
   },
-  showCustomIcon: {
+  showIcon: {
     control: {
       type: 'boolean',
     },
@@ -102,7 +102,7 @@ Playground.args = {
   playgroundWidth: 300,
   className: 'input-test-class',
   defaultValue: 'Option 2',
-  showCustomIcon: false,
+  showIcon: true,
   disabled: false,
   invalid: false,
   invalidText: 'Error message',
@@ -131,7 +131,7 @@ export const Tertiary = ({ playgroundWidth, ...args }: StoryProps) => (
 );
 
 Tertiary.args = {
-  showCustomIcon: true,
+  showIcon: true,
   variant: SelectVariants.tertiary,
 };
 

diff --git a/src/components/Select/Select.test.tsx b/src/components/Select/Select.test.tsx
@@ -65,23 +65,24 @@ describe('A Select', () => {
 
   it('should toggle --open and --closed classes on click', async () => {
     render(
-      <Select id="test-select" labelText={mockLabel} showCustomIcon>
+      <Select id="test-select" labelText={mockLabel} showIcon>
         {mockOptions}
       </Select>,
     );
 
     const selectElement = screen.getByTestId('test-select');
+    const selectParent = selectElement.parentElement;
 
     // Initial state should be closed
-    expect(selectElement).toHaveClass(`${px}-input__select--closed`);
+    expect(selectParent).toHaveClass(`${px}-select-container--closed`);
 
     // Simulate click to open
     await userEvent.click(selectElement);
-    expect(selectElement).toHaveClass(`${px}-input__select--open`);
+    expect(selectParent).toHaveClass(`${px}-select-container--open`);
 
     // Simulate blur to close
     await userEvent.tab();
-    expect(selectElement).toHaveClass(`${px}-input__select--closed`);
+    expect(selectParent).toHaveClass(`${px}-select-container--closed`);
   });
 
   it('should apply --tertiary class when variant is tertiary', () => {

diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
@@ -3,6 +3,7 @@ import classnames from 'classnames';
 import { px, useNormalizedInputProps } from '../../utils';
 import { InputProps } from '../Input/Input';
 import { SelectVariants } from './types';
+import ChevronDownIcon from '../../assets/chevronDown.svg?react';
 
 export interface SelectProps extends InputProps {
   /**
@@ -12,7 +13,7 @@ export interface SelectProps extends InputProps {
   /**
    * Determines if you want to show the icon
    */
-  showCustomIcon?: boolean;
+  showIcon?: boolean;
   /**
    * Determines the variant of the select
    */
@@ -38,7 +39,7 @@ const Select = React.forwardRef(
       disabled,
       hideLabel,
       id,
-      showCustomIcon = false,
+      showIcon = true,
       variant = SelectVariants.default,
       inline,
       invalid,
@@ -72,11 +73,15 @@ const Select = React.forwardRef(
 
     const selectClassnames = classnames(`${px}-input__input`, {
       className,
-      [`${px}-input__select--open`]: isOpen && showCustomIcon,
-      [`${px}-input__select--closed`]: !isOpen && showCustomIcon,
       [`${px}-input__select--tertiary`]: variant === SelectVariants.tertiary,
     });
 
+    const selectContainerClassnames = classnames(`${px}-select-container`, {
+      [`${px}-select-container--open`]: isOpen,
+      [`${px}-select-container--closed`]: !isOpen,
+      [`${px}-select-container--show__icon`]: showIcon,
+    });
+
     const handleClick = (e: React.MouseEvent<HTMLSelectElement>) => {
       handleIsOpen();
       onClick?.(e);
@@ -87,21 +92,24 @@ const Select = React.forwardRef(
         <label htmlFor={id} className={classnames(`${px}-input__label`, { [`${px}-input__label--hidden`]: hideLabel })}>
           {labelText}
         </label>
-        <select
-          className={selectClassnames}
-          data-testid={id}
-          defaultValue={defaultValue}
-          disabled={inputProps.disabled}
-          id={id}
-          onChange={onChange}
-          onBlur={closeDropdown}
-          onClick={handleClick}
-          ref={ref}
-          value={value}
-          {...rest}
-        >
-          {children}
-        </select>
+        <div className={selectContainerClassnames}>
+          <select
+            className={selectClassnames}
+            data-testid={id}
+            defaultValue={defaultValue}
+            disabled={inputProps.disabled}
+            id={id}
+            onChange={onChange}
+            onBlur={closeDropdown}
+            onClick={handleClick}
+            ref={ref}
+            value={value}
+            {...rest}
+          >
+            {children}
+          </select>
+          {showIcon ? <ChevronDownIcon /> : null}
+        </div>
         {inputProps.validation}
       </div>
     );

diff --git a/src/components/Select/_select.scss b/src/components/Select/_select.scss
@@ -1,6 +1,45 @@
 @use '#scss/allPartials' as *;
 
 .#{$px}-select-input {
+  position: relative;
+
+  .#{$px}-select-container {
+    position: relative;
+
+    &--closed,
+    &--open {
+      select {
+        appearance: none;
+      }
+    }
+
+    &--show__icon {
+      select {
+        padding-right: $select-icon-padding;
+      }
+    }
+
+    &--open {
+      svg {
+        transform: rotate(180deg) translateY(45%);
+      }
+    }
+  }
+
+  svg {
+    height: $select-icon-size;
+    pointer-events: none;
+    position: absolute;
+    right: $select-icon-position;
+    top: 45%;
+    transform: translateY(-45%);
+    width: $select-icon-size;
+
+    path {
+      fill: $pure-black;
+    }
+  }
+
   select.#{$px}-input {
     &__select {
       &--tertiary {
@@ -17,23 +56,10 @@
           outline-color: $soft-black;
           outline-offset: 4.5px;
         }
-      }
 
-      &--closed {
-        background: url("data:image/svg+xml,<svg height='16' width='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M8.06566 9.12623L12.2097 4.98219C12.3561 4.83574 12.7442 4.80954 12.9673 5.0327C13.1905 5.25585 13.1643 5.64386 13.0178 5.79031L8.42162 10.3865C8.34739 10.4607 8.21109 10.5041 8.06566 10.4997C7.92022 10.5041 7.78392 10.4607 7.70969 10.3865L3.1135 5.79031C2.96705 5.64386 2.94085 5.25585 3.16401 5.0327C3.38716 4.80954 3.77517 4.83574 3.92162 4.98219L8.06566 9.12623Z' fill='black'/></svg>")
-          no-repeat;
-      }
-
-      &--open {
-        background: url("data:image/svg+xml,<svg height='16' width='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M8.06566 6.37378L12.2097 10.5178C12.3561 10.6643 12.7442 10.6905 12.9673 10.4673C13.1905 10.2442 13.1643 9.85614 13.0178 9.70969L8.42162 5.1135C8.34739 5.03927 8.21109 4.99593 8.06566 5.00031C7.92022 4.99593 7.78392 5.03927 7.70969 5.1135L3.1135 9.70969C2.96705 9.85614 2.94085 10.2442 3.16401 10.4673C3.38716 10.6905 3.77517 10.6643 3.92162 10.5178L8.06566 6.37378Z' fill='black'/></svg>")
-          no-repeat;
-      }
-
-      &--closed,
-      &--open {
-        appearance: none;
-        background-position: calc(100% - 0.75rem) center;
-        padding-right: $spacing-md;
+        svg {
+          top: 0.625rem;
+        }
       }
     }
   }

diff --git a/src/scss/_vars.scss b/src/scss/_vars.scss
@@ -160,6 +160,7 @@ $breakpoint-xl: 1801px;
   --snw-heading-hero-line-height-size1: 2.375rem;
   --snw-heading-hero-size2: 1.625rem;
   --snw-heading-hero-line-height-size2: 1.9375rem;
+  --select-icon-size: 1rem;
 
   @media (min-width: $breakpoint-md) {
     --quote-size: 1.75rem;
@@ -201,6 +202,7 @@ $breakpoint-xl: 1801px;
     --snw-flyout-link-line-height: 1.75rem;
     --snw-heading-hero-size1: 2.375rem;
     --snw-heading-hero-line-height-size1: 2.875rem;
+    --select-icon-size: 1.25rem;
   }
 
   @media (min-width: $breakpoint-lg) {
@@ -246,6 +248,7 @@ $breakpoint-xl: 1801px;
     --snw-header-link-line-height: 1.75rem;
     --snw-flyout-link-size: 1.125rem;
     --snw-flyout-link-line-height: 2.125rem;
+    --select-icon-size: 1.5rem;
   }
 }
 
@@ -302,6 +305,7 @@ $snw-heading-hero-size1: var(--snw-heading-hero-size1);
 $snw-heading-hero-line-height1: var(--snw-heading-hero-line-height-size1);
 $snw-heading-hero-size2: var(--snw-heading-hero-size2);
 $snw-heading-hero-line-height2: var(--snw-heading-hero-line-height-size2);
+$select-icon-size: var(--select-icon-size);
 
 ////////////////////////
 /// SPACING TOKENS:
@@ -319,6 +323,8 @@ $snowflake-menu-padding: 1.25rem;
   --spacing-lg: 2.75rem;
   --spacing-xl: 3.75rem;
   --spacing-xxl: 4.75rem;
+  --select-icon-padding: 1.55rem;
+  --select-icon-position: 0.35rem;
 
   @media (min-width: $breakpoint-md) {
     --spacing-micro: 0.25rem;
@@ -328,6 +334,8 @@ $snowflake-menu-padding: 1.25rem;
     --spacing-lg: 3rem;
     --spacing-xl: 4rem;
     --spacing-xxl: 5rem;
+    --select-icon-padding: 1.75rem;
+    --select-icon-spacing: 0.5rem;
   }
 
   @media (min-width: $breakpoint-xl) {
@@ -338,6 +346,8 @@ $snowflake-menu-padding: 1.25rem;
     --spacing-lg: 3.75rem;
     --spacing-xl: 5rem;
     --spacing-xxl: 5.25rem;
+    --select-icon-padding: 1.95rem;
+    --select-icon-spacing: 0.55rem;
   }
 }
 
@@ -368,6 +378,8 @@ $margin-md: var(--spacing-md);
 $margin-lg: var(--spacing-lg);
 $margin-xl: var(--spacing-xl);
 $margin-xxl: var(--spacing-xxl);
+$select-icon-padding: var(--select-icon-padding);
+$select-icon-position: var(--select-icon-position);
 
 ////////////////////////
 /// HEADER TOKENS: