diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx index 74daa79c..e4da4892 100644 --- 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 index 8e2dbfe4..f78c0483 100644 --- 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 index e4a31965..fdda0513 100644 --- 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( - {mockOptions} , ); 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 index 4e827348..3ebe0b46 100644 --- 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) => { handleIsOpen(); onClick?.(e); @@ -87,21 +92,24 @@ const Select = React.forwardRef( - +
+ + {showIcon ? : null} +
{inputProps.validation} ); diff --git a/src/components/Select/_select.scss b/src/components/Select/_select.scss index a00aef02..723cac5a 100644 --- 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,") - no-repeat; - } - - &--open { - background: url("data:image/svg+xml,") - 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 index 9ba1edc9..be96d38d 100644 --- 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: