Skip to content

Commit

Permalink
feat(Select)!: introduce 2.0 component
Browse files Browse the repository at this point in the history
- add new 2.0 component
- add new stories
- add new api options
- align styling for popover sub-components
booc0mtaco committed Mar 22, 2024

Verified

This commit was signed with the committer’s verified signature.
booc0mtaco Andrew Holloway
1 parent e470f4b commit 8a13ded
Showing 6 changed files with 1,489 additions and 3 deletions.
3 changes: 2 additions & 1 deletion src/components/InputField/InputField-v2.module.css
Original file line number Diff line number Diff line change
@@ -3,7 +3,8 @@
\*------------------------------------*/

/**
* Wraps the Label and the optional/required indicator.
* Wraps the Label and the optional/required hint.
* TODO-AH: map the overline styles between Select and InputField
*/
.input-field__overline {
display: flex;
4 changes: 2 additions & 2 deletions src/components/PopoverListItem/PopoverListItem-v2.module.css
Original file line number Diff line number Diff line change
@@ -37,12 +37,12 @@
}

.popover-list-item__icon {
padding-right: 1rem;
padding-right: 0.5rem;
}

.popover-list-item__no-icon {
/* right padding applies space for the icon itself and the padding for that icon container */
padding-right: 2rem;
padding-right: 1.5rem;
}

.popover-list-item__sub-label {
155 changes: 155 additions & 0 deletions src/components/Select/Select-v2.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,155 @@
@import '../../design-tokens/mixins.css';

/*------------------------------------*\
# SELECT
\*------------------------------------*/

/**
* Select field used to select one option from a list of options.
*/
.select {
position: relative;
}

/**
* Wraps the Label and the optional/required hint.
* TODO-AH: map the overline styles between Select and InputField
*/
.select__overline {
display: flex;
margin-bottom: 0.25rem;
gap: 0.25rem;
}

.select__overline--no-label {
justify-content: flex-start;
}

/**
* The container for the individual select options.
*/
.select__options {
max-height: 25vh;
z-index: 100;
}

/**
* The button to trigger the display of the select field.
*/
.select-button {
font: var(--eds-theme-typography-form-input);

width: 100%;
padding: 0.5rem;

border: var(--eds-border-width-sm) solid;
border-radius: calc(var(--eds-theme-border-radius-objects-sm) * 1px);

display: flex;
justify-content: space-between;
align-items: center;
gap: 0.5rem;

cursor: pointer;

/* TODO-AH: handle placeholder color when no value is selected */
color: var(--eds-theme-color-text-utility-default-primary);
background-color: var(--eds-theme-color-form-background);
}

/**
* The caret icon to decorate the select trigger button, animated to rotate.
*/
.select-button__icon {
flex-shrink: 0;
transform: rotate(0);

transition: transform var(--eds-anim-move-medium) ease-out;

@media (prefers-reduced-motion) {
transition: none;
}
}

.select-button__text--truncated {
/* TODO-AH: use as mixin */
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}

.select-button__icon--reversed {
transform: rotate(180deg);
}

.select__footer {
display: flex;
justify-content: space-between;
}

.select--has-fieldNote {
margin-bottom: 0.25rem;
}

/**
* Label on top of the select trigger button to label the select field.
*/
.select__label {
font: var(--eds-theme-typography-form-label);
color: var(--eds-theme-color-text-utility-default-primary);
}

.select__label--disabled {
color: var(--eds-theme-color-text-utility-disabled-primary);
}

.select__option {
color: var(--eds-theme-color-text-utility-interactive-secondary);
}

.select__option-text {
color: var(--eds-theme-color-text-utility-default-primary);
}

.select__required-text {
color: var(--eds-theme-color-text-utility-default-secondary);
}

.select-button:disabled {
cursor: not-allowed;

color: var(--eds-theme-color-text-utility-disabled-primary);
border-color: var(--eds-theme-color-border-utility-disabled);
background-color: var(--eds-theme-color-background-utility-disabled-low-emphasis);
}

.select-button:focus-visible {
border-color: var(--eds-theme-color-border-utility-focus);
outline: var(--eds-border-width-sm) solid var(--eds-theme-color-border-utility-focus);
}

.select-button--error {
border-color: var(--eds-theme-color-border-utility-critical);

&:hover {
border-color: var(--eds-theme-color-border-utility-critical-hover);
}

&:focus-visible {
border-color: var(--eds-theme-color-border-utility-critical);
outline: var(--eds-border-width-sm) solid var(--eds-theme-color-border-utility-critical);
}
}

.select-button--warning {
border-color: var(--eds-theme-color-border-utility-warning);

&:hover {
border-color: var(--eds-theme-color-border-utility-warning-hover);
}

&:focus-visible {
border-color: var(--eds-theme-color-border-utility-warning);
outline: var(--eds-border-width-sm) solid var(--eds-theme-color-border-utility-warning);
}
}
769 changes: 769 additions & 0 deletions src/components/Select/Select-v2.stories.tsx

Large diffs are not rendered by default.

560 changes: 560 additions & 0 deletions src/components/Select/Select-v2.tsx

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions src/components/Select/index.ts
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
export { Select as default } from './Select';
export { Select as SelectV2 } from './Select-v2';

0 comments on commit 8a13ded

Please sign in to comment.