Skip to content

Commit

Permalink
Revert "ToggleGroupControl: improve animation (WordPress#65175)"
Browse files Browse the repository at this point in the history 
This reverts commit 5ef57bf.
  • Loading branch information
@huubl
huubl authored Oct 2, 2024
1 parent f10c96e commit b2dfc29
Show file tree
Hide file tree
Showing 11 changed files with 114 additions and 395 deletions.
4 changes: 0 additions & 4 deletions packages/components/CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,6 @@

- `ToolsPanel`: atomic one-step state update when (un)registering panels ([#65564](https://github.com/WordPress/gutenberg/pull/65564)).
- `Navigator`: fix `isInitial` logic ([#65527](https://github.com/WordPress/gutenberg/pull/65527)).
- `ToggleGroupControl`: Fix arrow key navigation in RTL ([#65735](https://github.com/WordPress/gutenberg/pull/65735)).
- `ToggleGroupControl`: indicator doesn't jump around when the layout around it changes ([#65175](https://github.com/WordPress/gutenberg/pull/65175)).

### Deprecations

Expand All @@ -23,8 +21,6 @@
- `Navigator`: add support for exit animation ([#64777](https://github.com/WordPress/gutenberg/pull/64777)).
- `Guide`: Update finish button to use the new default size ([#65680](https://github.com/WordPress/gutenberg/pull/65680)).
- `BorderControl`: Use `__next40pxDefaultSize` prop for Reset button ([#65682](https://github.com/WordPress/gutenberg/pull/65682)).
- `Navigator`: stabilize APIs ([#64613](https://github.com/WordPress/gutenberg/pull/64613)).
- `ToggleGroupControl`: indicator animation is now more lightweight and performant ([#65175](https://github.com/WordPress/gutenberg/pull/65175)).

## 28.8.0 (2024-09-19)

Expand Down
252 changes: 44 additions & 208 deletions packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,55 +60,6 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
outline-offset: -2px;
}
@media not ( prefers-reduced-motion ) {
.emotion-8.is-animation-enabled::before {
transition-property: transform,border-radius;
transition-duration: 0.2s;
transition-timing-function: ease-out;
}
}
.emotion-8::before {
content: '';
position: absolute;
pointer-events: none;
background: #1e1e1e;
outline: 2px solid transparent;
outline-offset: -3px;
--antialiasing-factor: 100;
border-radius: calc(
1px /
(
var( --selected-width, 0 ) /
var( --antialiasing-factor )
)
)/1px;
left: -1px;
width: calc( var( --antialiasing-factor ) * 1px );
height: calc( var( --selected-height, 0 ) * 1px );
transform-origin: left top;
-webkit-transform: translateX( calc( var( --selected-left, 0 ) * 1px ) ) scaleX(
calc(
var( --selected-width, 0 ) / var( --antialiasing-factor )
)
);
-moz-transform: translateX( calc( var( --selected-left, 0 ) * 1px ) ) scaleX(
calc(
var( --selected-width, 0 ) / var( --antialiasing-factor )
)
);
-ms-transform: translateX( calc( var( --selected-left, 0 ) * 1px ) ) scaleX(
calc(
var( --selected-width, 0 ) / var( --antialiasing-factor )
)
);
transform: translateX( calc( var( --selected-left, 0 ) * 1px ) ) scaleX(
calc(
var( --selected-width, 0 ) / var( --antialiasing-factor )
)
);
}
.emotion-10 {
display: -webkit-inline-box;
display: -webkit-inline-flex;
Expand Down Expand Up @@ -199,7 +150,17 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
line-height: 1;
}
.emotion-17 {
.emotion-15 {
background: #1e1e1e;
border-radius: 1px;
position: absolute;
inset: 0;
z-index: 1;
outline: 2px solid transparent;
outline-offset: -3px;
}
.emotion-18 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
Expand Down Expand Up @@ -243,22 +204,22 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
}
@media not ( prefers-reduced-motion ) {
.emotion-17 {
.emotion-18 {
-webkit-transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
}
}
.emotion-17::-moz-focus-inner {
.emotion-18::-moz-focus-inner {
border: 0;
}
.emotion-17[disabled] {
.emotion-18[disabled] {
opacity: 0.4;
cursor: default;
}
.emotion-17:active {
.emotion-18:active {
background: #fff;
}
Expand Down Expand Up @@ -319,14 +280,20 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
</svg>
</div>
</button>
<div>
<div
class="emotion-15"
role="presentation"
/>
</div>
</div>
<div
class="emotion-10 emotion-11"
>
<button
aria-checked="false"
aria-label="Lowercase"
class="emotion-17 components-toggle-group-control-option-base"
class="emotion-18 components-toggle-group-control-option-base"
data-value="lowercase"
data-wp-c16t="true"
data-wp-component="ToggleGroupControlOptionBase"
Expand Down Expand Up @@ -425,55 +392,6 @@ exports[`ToggleGroupControl controlled should render correctly with text options
outline-offset: -2px;
}
@media not ( prefers-reduced-motion ) {
.emotion-8.is-animation-enabled::before {
transition-property: transform,border-radius;
transition-duration: 0.2s;
transition-timing-function: ease-out;
}
}
.emotion-8::before {
content: '';
position: absolute;
pointer-events: none;
background: #1e1e1e;
outline: 2px solid transparent;
outline-offset: -3px;
--antialiasing-factor: 100;
border-radius: calc(
1px /
(
var( --selected-width, 0 ) /
var( --antialiasing-factor )
)
)/1px;
left: -1px;
width: calc( var( --antialiasing-factor ) * 1px );
height: calc( var( --selected-height, 0 ) * 1px );
transform-origin: left top;
-webkit-transform: translateX( calc( var( --selected-left, 0 ) * 1px ) ) scaleX(
calc(
var( --selected-width, 0 ) / var( --antialiasing-factor )
)
);
-moz-transform: translateX( calc( var( --selected-left, 0 ) * 1px ) ) scaleX(
calc(
var( --selected-width, 0 ) / var( --antialiasing-factor )
)
);
-ms-transform: translateX( calc( var( --selected-left, 0 ) * 1px ) ) scaleX(
calc(
var( --selected-width, 0 ) / var( --antialiasing-factor )
)
);
transform: translateX( calc( var( --selected-left, 0 ) * 1px ) ) scaleX(
calc(
var( --selected-width, 0 ) / var( --antialiasing-factor )
)
);
}
.emotion-10 {
display: -webkit-inline-box;
display: -webkit-inline-flex;
Expand Down Expand Up @@ -694,55 +612,6 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
outline-offset: -2px;
}
@media not ( prefers-reduced-motion ) {
.emotion-8.is-animation-enabled::before {
transition-property: transform,border-radius;
transition-duration: 0.2s;
transition-timing-function: ease-out;
}
}
.emotion-8::before {
content: '';
position: absolute;
pointer-events: none;
background: #1e1e1e;
outline: 2px solid transparent;
outline-offset: -3px;
--antialiasing-factor: 100;
border-radius: calc(
1px /
(
var( --selected-width, 0 ) /
var( --antialiasing-factor )
)
)/1px;
left: -1px;
width: calc( var( --antialiasing-factor ) * 1px );
height: calc( var( --selected-height, 0 ) * 1px );
transform-origin: left top;
-webkit-transform: translateX( calc( var( --selected-left, 0 ) * 1px ) ) scaleX(
calc(
var( --selected-width, 0 ) / var( --antialiasing-factor )
)
);
-moz-transform: translateX( calc( var( --selected-left, 0 ) * 1px ) ) scaleX(
calc(
var( --selected-width, 0 ) / var( --antialiasing-factor )
)
);
-ms-transform: translateX( calc( var( --selected-left, 0 ) * 1px ) ) scaleX(
calc(
var( --selected-width, 0 ) / var( --antialiasing-factor )
)
);
transform: translateX( calc( var( --selected-left, 0 ) * 1px ) ) scaleX(
calc(
var( --selected-width, 0 ) / var( --antialiasing-factor )
)
);
}
.emotion-10 {
display: -webkit-inline-box;
display: -webkit-inline-flex;
Expand Down Expand Up @@ -833,7 +702,17 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
line-height: 1;
}
.emotion-17 {
.emotion-15 {
background: #1e1e1e;
border-radius: 1px;
position: absolute;
inset: 0;
z-index: 1;
outline: 2px solid transparent;
outline-offset: -3px;
}
.emotion-18 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
Expand Down Expand Up @@ -877,22 +756,22 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
}
@media not ( prefers-reduced-motion ) {
.emotion-17 {
.emotion-18 {
-webkit-transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
}
}
.emotion-17::-moz-focus-inner {
.emotion-18::-moz-focus-inner {
border: 0;
}
.emotion-17[disabled] {
.emotion-18[disabled] {
opacity: 0.4;
cursor: default;
}
.emotion-17:active {
.emotion-18:active {
background: #fff;
}
Expand Down Expand Up @@ -953,14 +832,20 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
</svg>
</div>
</button>
<div>
<div
class="emotion-15"
role="presentation"
/>
</div>
</div>
<div
class="emotion-10 emotion-11"
>
<button
aria-checked="false"
aria-label="Lowercase"
class="emotion-17 components-toggle-group-control-option-base"
class="emotion-18 components-toggle-group-control-option-base"
data-value="lowercase"
data-wp-c16t="true"
data-wp-component="ToggleGroupControlOptionBase"
Expand Down Expand Up @@ -1053,55 +938,6 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
outline-offset: -2px;
}
@media not ( prefers-reduced-motion ) {
.emotion-8.is-animation-enabled::before {
transition-property: transform,border-radius;
transition-duration: 0.2s;
transition-timing-function: ease-out;
}
}
.emotion-8::before {
content: '';
position: absolute;
pointer-events: none;
background: #1e1e1e;
outline: 2px solid transparent;
outline-offset: -3px;
--antialiasing-factor: 100;
border-radius: calc(
1px /
(
var( --selected-width, 0 ) /
var( --antialiasing-factor )
)
)/1px;
left: -1px;
width: calc( var( --antialiasing-factor ) * 1px );
height: calc( var( --selected-height, 0 ) * 1px );
transform-origin: left top;
-webkit-transform: translateX( calc( var( --selected-left, 0 ) * 1px ) ) scaleX(
calc(
var( --selected-width, 0 ) / var( --antialiasing-factor )
)
);
-moz-transform: translateX( calc( var( --selected-left, 0 ) * 1px ) ) scaleX(
calc(
var( --selected-width, 0 ) / var( --antialiasing-factor )
)
);
-ms-transform: translateX( calc( var( --selected-left, 0 ) * 1px ) ) scaleX(
calc(
var( --selected-width, 0 ) / var( --antialiasing-factor )
)
);
transform: translateX( calc( var( --selected-left, 0 ) * 1px ) ) scaleX(
calc(
var( --selected-width, 0 ) / var( --antialiasing-factor )
)
);
}
.emotion-10 {
display: -webkit-inline-box;
display: -webkit-inline-flex;
Expand Down
Loading

0 comments on commit b2dfc29

Please sign in to comment.