Skip to content

Commit

Permalink
feat(react): upgrade downshift dependency to v5 (#5373)
Browse files Browse the repository at this point in the history
* fix(Dropdown): rely on list-box height closes #4916

* feat(react): update Downshift to v2.2.3

* feat(react): update Downshift to v3.4.8

* feat(react): update Downshift to v4.1.0

* feat(react): upgrade downshift to v5

* fix(react): add prop adapter for downshift depreacations from v1 to v5

* fix(react): add propAdapter for downshift v3 breaking changes

* fix(react): add propAdapter for downshift v3 breaking changes

* test(react): add propadapter test

* fix(react): update createPropAdapter comment to be better

* fix(combobox): add getMenuProps override

* fix(list-box): change psuedo selector to match Downshift changes

* fix(dropdown): get menu items speaking in NVDA again

* fix(dropdown): fix dap violations

* fix(dropdown): remove refkey

* fix(dropdown): remove refkey/unused aria

* fix(dropdown): remove refkey for real

* fix(dropdown): various changes of varying importance

* fix(listbox): update downshift usage for dropdown

* fix(react): removed weird dir I accidentally added

* fix(dropdown): add inputprops id

* fix(dropdown): add useState implementation

* fix(dropdown): convert to useSelect

* fix(dropdown): convert to useSelect hook w/ListBox

* fix(dropdown): add button reset

* fix(dropdown): style dropdown button

* fix(dropdown): un-nest button selector

* fix(combobox/dropdown): nits/style/bug tweaks

* fix(dropdown): add translateWithId and initialSelectedItem props

* fix(dropdown): add back css reset

* fix(dropdown): update tests

* fix(combobox): remove incorrectly set innerref

* fix(combobox): remove incorrectly set innerref

* fix(combobox): update tests and remove unneeded aria

* fix(combobox): add combobox test helpers and fix broke tests

* fix(multiselect): update tests

* test(listbox): update test helpers and snapshots

* test(listbox): update test helpers and snapshots

* fix(tests): update snapshots

* fix(test): remove empty createPropAdapter-test file

* test(dropdown): update snapshots

* fix(combobox): remove _menu added to referenced id

* fix(combobox): add back accidentally removed disabled

* fix(multiselect): refactor for useSelect hook

* chore: check-in work

* fix(multiselect): update state logic for selecting options

* fix(tools): add banner to createPropAdapter

* fix(dropdown/listbox): address styling regressions

* fix(dropdown): hide helper text in inline

* chore(tests): update snapshots

* chore(tag): update formatting to fix invalid CSS

* fix(multiselect): remove old reference file

* chore(test): update snapshots

* chore(colors): add back in scss folder

* Update packages/components/src/components/dropdown/_dropdown.scss

Co-Authored-By: Josh Black <josh@josh.black>

* Update packages/components/src/components/dropdown/_dropdown.scss

Co-Authored-By: Josh Black <josh@josh.black>

* Update packages/react/src/components/Dropdown/Dropdown.js

Co-Authored-By: Josh Black <josh@josh.black>

* fix(dropdown): fix type

* Update packages/components/src/components/list-box/_list-box.scss

Co-Authored-By: Josh Black <josh@josh.black>

* fix(combobox): remove ms-clear

* fix(multiselect): add null check for selectedItems

* fix(filterable-multiselect): add unique id for checkbox

* fix(filterable-multiselect): add role=group to menu

* fix(listbox): add outline border to fix jitter

* fix(dropdown/listbo): remove unused outline and changed border type

* fix(multiselect): change field type to fix broken labeling

* chore(tests): update snapshots

* fix(filterablemultiselect): fix incorrect field name

* fix(dropdown): add inline story variant and removed knob

* fix(listbox): remove hover styles for disabled

* test(react): update snapshots

* fix(tests): update multiselect tests

* test(multiselect): fix broken onCheange check

* test(multiselect): build out more tests

* test(FilterableMultiSelect): update tests to pass

* test(checkbox): remove irrelevent tests

* Update packages/react/src/components/Dropdown/Dropdown-story.js

Co-authored-by: Josh Black <josh@josh.black>

* fix(checkbox): rollback changes to id prop

* fix(dropdown): add direction prop

* fix(multiselect): add back direction prop

* test(dropdown): update snappies

* fix(listbox): add height adjustment to get label lined up

Co-authored-by: Vince Picone <Vincent.Patrick.Picone@ibm.com>
Co-authored-by: Josh Black <josh@josh.black>
Co-authored-by: TJ Egan <tw15egan@gmail.com>
4 people authored May 7, 2020
1 parent b4cc3b4 commit 3bf2eec
Showing 32 changed files with 1,600 additions and 2,214 deletions.
Binary file not shown.
Binary file added .yarn/offline-mirror/downshift-5.0.5.tgz
Binary file not shown.
11 changes: 11 additions & 0 deletions packages/components/src/components/button/_mixins.scss
Original file line number Diff line number Diff line change
@@ -81,6 +81,17 @@
inset 0 0 0 ($button-border-width + $button-outline-width) $ui-02;
}

&:disabled:hover,
&:disabled:focus,
&:hover.#{$prefix}--btn--disabled,
&:focus.#{$prefix}--btn--disabled {
color: $ui-04;
background-color: $disabled-02;
border-color: $disabled-02;
text-decoration: none;
box-shadow: none;
}

&:active {
background-color: $active-color;
}
4 changes: 4 additions & 0 deletions packages/components/src/components/combo-box/_combo-box.scss
Original file line number Diff line number Diff line change
@@ -26,6 +26,10 @@
&[disabled]::placeholder {
color: $disabled-02;
}

&::-ms-clear {
display: none;
}
}

.#{$prefix}--combo-box.#{$prefix}--list-box--expanded
19 changes: 13 additions & 6 deletions packages/components/src/components/dropdown/_dropdown.scss
Original file line number Diff line number Diff line change
@@ -56,15 +56,18 @@
outline: 2px solid transparent;
transition: background-color $duration--fast-01 motion(standard, productive);

&:focus {
@include focus-outline('outline');
}

&:hover {
background-color: $hover-ui;
}
}

// Menu's triggering element updated to button with Downshift v5 upgrade
.#{$prefix}--dropdown .#{$prefix}--list-box__field {
@include button-reset;
text-align: left;
padding: 0 rem(48px) 0 rem(16px);
}

.#{$prefix}--dropdown--xl {
height: rem(48px);
max-height: rem(48px);
@@ -327,11 +330,15 @@
outline: none;
}

.#{$prefix}--dropdown-text {
// TODO: remove in v11
.#{$prefix}--dropdown-text,
.#{$prefix}--list-box__label {
color: $disabled-02;
}

.#{$prefix}--dropdown__arrow {
// TODO: remove in v11
.#{$prefix}--dropdown__arrow,
.#{$prefix}--list-box__menu-icon svg {
fill: $disabled-02;
}

39 changes: 28 additions & 11 deletions packages/components/src/components/list-box/_list-box.scss
Original file line number Diff line number Diff line change
@@ -144,7 +144,7 @@ $list-box-menu-width: rem(300px);
}

.#{$prefix}--list-box--light.#{$prefix}--list-box--expanded {
border-bottom-color: $decorative-01;
border-bottom-color: transparent;
}

// Disabled state for `list-box`
@@ -159,7 +159,7 @@ $list-box-menu-width: rem(300px);
.#{$prefix}--list-box--disabled,
.#{$prefix}--list-box--disabled .#{$prefix}--list-box__field,
.#{$prefix}--list-box--disabled .#{$prefix}--list-box__field:focus {
border-bottom-width: 0;
border-bottom-color: transparent;
outline: none;
}

@@ -248,6 +248,10 @@ $list-box-menu-width: rem(300px);
color: $text-01;
}

.#{$prefix}--list-box--inline .#{$prefix}--list-box__field {
height: 100%;
}

// The field we use for input, showing selection, etc.
.#{$prefix}--list-box__field {
@include button-reset;
@@ -377,10 +381,6 @@ $list-box-menu-width: rem(300px);
outline: none;
}

.#{$prefix}--list-box--disabled .#{$prefix}--list-box__selection > svg {
fill: $disabled-02;
}

// Modifier for a selection to show that multiple selections have been made
.#{$prefix}--list-box__selection--multi {
@include type-style('label-01');
@@ -406,11 +406,21 @@ $list-box-menu-width: rem(300px);
width: rem(20px);
height: rem(20px);
padding: rem(2px);

&:hover {
border-radius: 50%;
background-color: $hover-secondary;
}
}

.#{$prefix}--list-box__selection--multi > svg:hover {
border-radius: 50%;
background-color: $hover-secondary;
.#{$prefix}--list-box--disabled
.#{$prefix}--list-box__selection--multi
> svg {
fill: $disabled-02;

&:hover {
background-color: unset;
}
}

.#{$prefix}--list-box__selection--multi:focus,
@@ -429,6 +439,11 @@ $list-box-menu-width: rem(300px);
transition: max-height $duration--fast-02 motion(standard, productive);
overflow-y: auto;
z-index: z('dropdown');

&:focus {
// remove default browser focus in firefox
@include focus-outline('border');
}
}

.#{$prefix}--list-box
@@ -664,9 +679,11 @@ $list-box-menu-width: rem(300px);

// Tweaks for descendants
// When handling input, we need to target nodes that specifically opt-in to
// the `combobox` role in order to make sure the text input is styled
// the type text in order to make sure the text input is styled
// correctly.
.#{$prefix}--list-box input[role='combobox'] {
// TODO: remove [role='combobox'] in v11
.#{$prefix}--list-box input[role='combobox'],
.#{$prefix}--list-box input[type='text'] {
background-color: inherit;
min-width: 0;
}
28 changes: 12 additions & 16 deletions packages/components/src/components/tag/_tag.scss
Original file line number Diff line number Diff line change
@@ -23,7 +23,7 @@
@include tag-theme(
get-token-value($tag-colors, 'tag-background-gray'),
get-token-value($tag-colors, 'tag-color-gray'),
get-token-value($tag-colors, 'tag-hover-gray'),
get-token-value($tag-colors, 'tag-hover-gray')
);

display: inline-flex;
@@ -50,88 +50,84 @@
@include tag-theme(
get-token-value($tag-colors, 'tag-background-red'),
get-token-value($tag-colors, 'tag-color-red'),
get-token-value($tag-colors, 'tag-hover-red'),
get-token-value($tag-colors, 'tag-hover-red')
);
}

.#{$prefix}--tag--magenta {
@include tag-theme(
get-token-value($tag-colors, 'tag-background-magenta'),
get-token-value($tag-colors, 'tag-color-magenta'),
get-token-value($tag-colors, 'tag-hover-magenta'),
get-token-value($tag-colors, 'tag-hover-magenta')
);
}

.#{$prefix}--tag--purple {
@include tag-theme(
get-token-value($tag-colors, 'tag-background-purple'),
get-token-value($tag-colors, 'tag-color-purple'),
get-token-value($tag-colors, 'tag-hover-purple'),
get-token-value($tag-colors, 'tag-hover-purple')
);
}

.#{$prefix}--tag--blue {
@include tag-theme(
get-token-value($tag-colors, 'tag-background-blue'),
get-token-value($tag-colors, 'tag-color-blue'),
get-token-value($tag-colors, 'tag-hover-blue'),
get-token-value($tag-colors, 'tag-hover-blue')
);
}

.#{$prefix}--tag--cyan {
@include tag-theme(
get-token-value($tag-colors, 'tag-background-cyan'),
get-token-value($tag-colors, 'tag-color-cyan'),
get-token-value($tag-colors, 'tag-hover-cyan'),
get-token-value($tag-colors, 'tag-hover-cyan')
);
}

.#{$prefix}--tag--teal {
@include tag-theme(
get-token-value($tag-colors, 'tag-background-teal'),
get-token-value($tag-colors, 'tag-color-teal'),
get-token-value($tag-colors, 'tag-hover-teal'),
get-token-value($tag-colors, 'tag-hover-teal')
);
}

.#{$prefix}--tag--green {
@include tag-theme(
get-token-value($tag-colors, 'tag-background-green'),
get-token-value($tag-colors, 'tag-color-green'),
get-token-value($tag-colors, 'tag-hover-green'),
get-token-value($tag-colors, 'tag-hover-green')
);
}

.#{$prefix}--tag--gray {
@include tag-theme(
get-token-value($tag-colors, 'tag-background-gray'),
get-token-value($tag-colors, 'tag-color-gray'),
get-token-value($tag-colors, 'tag-hover-gray'),
get-token-value($tag-colors, 'tag-hover-gray')
);
}

.#{$prefix}--tag--cool-gray {
@include tag-theme(
get-token-value($tag-colors, 'tag-background-cool-gray'),
get-token-value($tag-colors, 'tag-color-cool-gray'),
get-token-value($tag-colors, 'tag-hover-cool-gray'),
get-token-value($tag-colors, 'tag-hover-cool-gray')
);
}

.#{$prefix}--tag--warm-gray {
@include tag-theme(
get-token-value($tag-colors, 'tag-background-warm-gray'),
get-token-value($tag-colors, 'tag-color-warm-gray'),
get-token-value($tag-colors, 'tag-hover-warm-gray'),
get-token-value($tag-colors, 'tag-hover-warm-gray')
);
}

.#{$prefix}--tag--high-contrast {
@include tag-theme(
$inverse-02,
$inverse-01,
$inverse-hover-ui,
);
@include tag-theme($inverse-02, $inverse-01, $inverse-hover-ui);
}

.#{$prefix}--tag--disabled,
4 changes: 4 additions & 0 deletions packages/components/src/globals/scss/_component-tokens.scss
Original file line number Diff line number Diff line change
@@ -9,6 +9,10 @@
@import 'theme';
@import 'feature-flags';

$enable-css-custom-properties: feature-flag-enabled(
'enable-css-custom-properties'
);

/// Get a component token value.
/// @access private
/// @param {Map} $tokens - Map of component tokens
Loading

0 comments on commit 3bf2eec

Please sign in to comment.