Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ToggleGroupControl: Refactor to handle de-selection and multiple selections #44168

Closed
wants to merge 13 commits into from
Closed

ToggleGroupControl: Refactor to handle de-selection and multiple selections #44168

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
1307c98
Extract radio logic to subcomponent
mirka Sep 13, 2022
80047b5
Fix wrong types
mirka Sep 13, 2022
872fcdf
Remove borderless prop
mirka Sep 13, 2022
3554899
Remove `multiple` prop
mirka Sep 14, 2022
872a95d
Add deselectability
mirka Sep 14, 2022
06aec52
Clean up
mirka Sep 14, 2022
d54e8ef
Rename buttonActive → buttonPressed
mirka Oct 19, 2022
e186644
Fix up button styles
mirka Oct 19, 2022
f09c95e
Adjust focus styles
mirka Sep 14, 2022
0cda2cf
Remove invalid style
mirka Sep 14, 2022
b41dc72
Update snapshots
mirka Oct 19, 2022
34f56c4
Add tests
mirka Sep 14, 2022
201bb03
Add ToggleMultipleGroupControl
mirka Sep 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions packages/components/src/toggle-group-control/stories/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,11 +124,11 @@ WithIcons.args = {
};

/**
* A borderless style may be preferred in some contexts.
* When the `isDeselectable` prop is true, the option can be deselected by clicking on it again.
*/
export const Borderless: ComponentStory< typeof ToggleGroupControl > =
export const Deselectable: ComponentStory< typeof ToggleGroupControl > =
Template.bind( {} );
Borderless.args = {
Deselectable.args = {
...WithIcons.args,
__experimentalIsBorderless: true,
isDeselectable: true,
};
113 changes: 81 additions & 32 deletions packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,6 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
.emotion-8 {
background: #fff;
border: 1px solid transparent;
border-radius: 2px;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
Expand All @@ -53,6 +52,7 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
transition: transform 100ms linear;
min-height: 36px;
border-color: #757575;
border-radius: 2px;
}

@media ( prefers-reduced-motion: reduce ) {
Expand All @@ -61,21 +61,20 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
}
}

.emotion-8:hover {
border-color: #757575;
}

.emotion-8:focus-within {
border-color: var( --wp-admin-theme-color-darker-10, #006ba1);
box-shadow: 0 0 0 0.5px var( --wp-admin-theme-color, #007cba);
outline: none;
z-index: 1;
}

.emotion-8:hover {
border-color: #757575;
}

.emotion-10 {
background: #1e1e1e;
border-radius: 2px;
box-shadow: transparent;
left: 0;
position: absolute;
top: 2px;
Expand Down Expand Up @@ -142,6 +141,12 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
user-select: none;
width: 100%;
z-index: 2;
color: #1e1e1e;
width: 30px;
height: 30px;
padding-left: 0;
padding-right: 0;
color: #fff;
}

@media ( prefers-reduced-motion: reduce ) {
Expand All @@ -158,24 +163,72 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
background: #fff;
}

.emotion-14:active {
background: transparent;
}

.emotion-15 {
font-size: 13px;
line-height: 1;
}

.emotion-19 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
background: transparent;
border: none;
border-radius: 2px;
color: #757575;
fill: currentColor;
cursor: pointer;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
font-family: inherit;
height: 100%;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
line-height: 100%;
outline: none;
padding: 0 12px;
position: relative;
text-align: center;
-webkit-transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 100%;
z-index: 2;
color: #1e1e1e;
width: 30px;
height: 30px;
padding-left: 0;
padding-right: 0;
}

.emotion-16 {
color: #fff;
@media ( prefers-reduced-motion: reduce ) {
.emotion-19 {
transition-duration: 0ms;
}
}

.emotion-16:active {
background: transparent;
.emotion-19::-moz-focus-inner {
border: 0;
}

.emotion-17 {
font-size: 13px;
line-height: 1;
.emotion-19:active {
background: #fff;
}

<div
Expand All @@ -198,7 +251,7 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
class="components-toggle-group-control emotion-8 emotion-9"
data-wp-c16t="true"
data-wp-component="ToggleGroupControl"
id="toggle-group-control-1"
id="toggle-group-control-as-radio-1"
role="radiogroup"
>
<div
Expand All @@ -212,21 +265,20 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
/>
<div
class="emotion-12 emotion-13"
data-active="true"
>
<button
aria-checked="true"
aria-label="Uppercase"
class="emotion-14 emotion-15 components-toggle-group-control-option-base emotion-16"
class="emotion-14 components-toggle-group-control-option-base"
data-value="uppercase"
data-wp-c16t="true"
data-wp-component="ToggleGroupControlOptionBase"
id="toggle-group-control-1-2"
id="toggle-group-control-as-radio-1-2"
role="radio"
tabindex="0"
>
<div
class="emotion-17 emotion-18"
class="emotion-15 emotion-16"
>
<svg
aria-hidden="true"
Expand All @@ -245,21 +297,20 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
</div>
<div
class="emotion-12 emotion-13"
data-active="false"
>
<button
aria-checked="false"
aria-label="Lowercase"
class="emotion-14 emotion-15 components-toggle-group-control-option-base"
class="emotion-19 components-toggle-group-control-option-base"
data-value="lowercase"
data-wp-c16t="true"
data-wp-component="ToggleGroupControlOptionBase"
id="toggle-group-control-1-3"
id="toggle-group-control-as-radio-1-3"
role="radio"
tabindex="-1"
>
<div
class="emotion-17 emotion-18"
class="emotion-15 emotion-16"
>
<svg
aria-hidden="true"
Expand Down Expand Up @@ -322,7 +373,6 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
.emotion-8 {
background: #fff;
border: 1px solid transparent;
border-radius: 2px;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
Expand All @@ -334,6 +384,7 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
transition: transform 100ms linear;
min-height: 36px;
border-color: #757575;
border-radius: 2px;
}

@media ( prefers-reduced-motion: reduce ) {
Expand All @@ -342,17 +393,17 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
}
}

.emotion-8:hover {
border-color: #757575;
}

.emotion-8:focus-within {
border-color: var( --wp-admin-theme-color-darker-10, #006ba1);
box-shadow: 0 0 0 0.5px var( --wp-admin-theme-color, #007cba);
outline: none;
z-index: 1;
}

.emotion-8:hover {
border-color: #757575;
}

.emotion-10 {
display: -webkit-inline-box;
display: -webkit-inline-flex;
Expand Down Expand Up @@ -445,7 +496,7 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
class="components-toggle-group-control emotion-8 emotion-9"
data-wp-c16t="true"
data-wp-component="ToggleGroupControl"
id="toggle-group-control-0"
id="toggle-group-control-as-radio-0"
role="radiogroup"
>
<div
Expand All @@ -454,7 +505,6 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
/>
<div
class="emotion-10 emotion-11"
data-active="false"
>
<button
aria-checked="false"
Expand All @@ -463,7 +513,7 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
data-value="rigas"
data-wp-c16t="true"
data-wp-component="ToggleGroupControlOptionBase"
id="toggle-group-control-0-0"
id="toggle-group-control-as-radio-0-0"
role="radio"
tabindex="0"
>
Expand All @@ -476,7 +526,6 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
</div>
<div
class="emotion-10 emotion-11"
data-active="false"
>
<button
aria-checked="false"
Expand All @@ -485,7 +534,7 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
data-value="jack"
data-wp-c16t="true"
data-wp-component="ToggleGroupControlOptionBase"
id="toggle-group-control-0-1"
id="toggle-group-control-as-radio-0-1"
role="radio"
tabindex="-1"
>
Expand Down
Loading