Skip to content

Commit

Permalink
ProgressBar: moved width to css var for perf (#60388)
Browse files Browse the repository at this point in the history
* ProgressBar: moved width to css var for perf

* fixed unit test

* added changelog entry

* remove accidentally pushed test code

* Update packages/components/CHANGELOG.md

Co-authored-by: Marin Atanasov <[email protected]>

---------

Co-authored-by: Marin Atanasov <[email protected]>
Co-authored-by: DaniGuardiola <[email protected]>
Co-authored-by: tyxla <[email protected]>
Co-authored-by: mirka <[email protected]>
  • Loading branch information
5 people authored Apr 3, 2024
1 parent acf21a7 commit 2d33a9e
Show file tree
Hide file tree
Showing 4 changed files with 17 additions and 10 deletions.
12 changes: 8 additions & 4 deletions packages/components/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@

## Unreleased

### Enhancement

- `ProgressBar`: Move the indicator width styles from emotion to a CSS variable ([#60388](https://github.com/WordPress/gutenberg/pull/60388)).

## 27.3.0 (2024-04-03)

### Bug Fix
Expand Down Expand Up @@ -1072,7 +1076,7 @@

### Enhancements

- `FontSizePicker`: Updated to take up full width of its parent and have a 40px Reset button when `size` is `__unstable-large` ((44559)[https://github.com/WordPress/gutenberg/pull/44559]).
- `FontSizePicker`: Updated to take up full width of its parent and have a 40px Reset button when `size` is `__unstable-large` ([44559](https://github.com/WordPress/gutenberg/pull/44559)).
- `BorderBoxControl`: Omit unit select when width values are mixed ([#44592](https://github.com/WordPress/gutenberg/pull/44592))
- `BorderControl`: Add ability to disable unit selection ([#44592](https://github.com/WordPress/gutenberg/pull/44592))

Expand Down Expand Up @@ -1902,8 +1906,8 @@

### Breaking Changes

- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/.
- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/.
- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at <https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/>.
- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at <https://nodejs.org/en/about/releases/>.
- The experimental `Text` component has been completely re-written and enhanced with truncation support and separate variant, size, and weight props to allow for greater control. The previous `variant` prop has been completely removed.

### Deprecation
Expand Down Expand Up @@ -2236,7 +2240,7 @@
- `withAPIData` has been removed. Please use the Core Data module or `@wordpress/api-fetch` directly instead.
- `Draggable` as a DOM node drag handler has been deprecated. Please, use `Draggable` as a wrap component for your DOM node drag handler.
- Change how required built-ins are polyfilled with Babel 7 ([#9171](https://github.com/WordPress/gutenberg/pull/9171)). If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods.
- `withContext` has been removed. Please use `wp.element.createContext` instead. See: https://reactjs.org/docs/context.html.
- `withContext` has been removed. Please use `wp.element.createContext` instead. See: <https://reactjs.org/docs/context.html>.

### New Feature

Expand Down
8 changes: 6 additions & 2 deletions packages/components/src/progress-bar/index.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import type { ForwardedRef } from 'react';
import type { CSSProperties, ForwardedRef } from 'react';

/**
* WordPress dependencies
Expand All @@ -26,8 +26,12 @@ function UnforwardedProgressBar(
return (
<ProgressBarStyled.Track className={ className }>
<ProgressBarStyled.Indicator
style={
{
'--indicator-width': `${ value }%`,
} as CSSProperties
}
isIndeterminate={ isIndeterminate }
value={ value }
/>
<ProgressBarStyled.ProgressElement
max={ 100 }
Expand Down
5 changes: 2 additions & 3 deletions packages/components/src/progress-bar/styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,6 @@ export const Track = styled.div`

export const Indicator = styled.div< {
isIndeterminate: boolean;
value?: number;
} >`
display: inline-block;
position: absolute;
Expand All @@ -60,7 +59,7 @@ export const Indicator = styled.div< {
outline: 2px solid transparent;
outline-offset: -2px;
${ ( { isIndeterminate, value } ) =>
${ ( { isIndeterminate } ) =>
isIndeterminate
? css( {
animationDuration: '1.5s',
Expand All @@ -70,7 +69,7 @@ export const Indicator = styled.div< {
width: `${ INDETERMINATE_TRACK_WIDTH }%`,
} )
: css( {
width: `${ value }%`,
width: 'var(--indicator-width)',
transition: 'width 0.4s ease-in-out',
} ) };
`;
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/progress-bar/test/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ describe( 'ProgressBar', () => {
const indicator = container.firstChild?.firstChild;

expect( indicator ).toHaveStyle( {
width: '55%',
'--indicator-width': '55%',
} );
} );

Expand Down

0 comments on commit 2d33a9e

Please sign in to comment.