-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Component System: Upgrade FontSizePicker (#27594)
* Update min/max for FontSizeControl and improve getSelectOptions() to assign option object (+5 squashed commits) Squashed commits: [3b2e8cd71d] Update @wp-g2/components to latest v0.0.127 [144a98ed93] Add new font size picker to global styles [80beed6b33] Remove additional props [8d288e5177] Move font size component into gutenberg repository. [1cf09cb4da] Component System: Upgrade FontSizePicker * Update @wp-g2 packages to latest 0.0.135 with babel runtime handling * Update package-lock.json * Update @wp-g2 to latest 0.0.139 * Re-enabled E2E font-size-picker reset test * Update @wp-g2 to v0.0.140 - Removing @wp-g2/substate as a dependency * Refactor usage of noop and is utils Co-authored-by: Jorge <[email protected]>
- Loading branch information
1 parent
8e87ff6
commit a9fd36c
Showing
19 changed files
with
1,115 additions
and
58 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
30 changes: 30 additions & 0 deletions
30
packages/components/src/__next/context/component-system-provider.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import { ContextSystemProvider } from '@wp-g2/components'; | ||
|
|
||
| export function ComponentSystemProvider( { | ||
| __unstableNextInclude = [], | ||
| children, | ||
| value = {}, | ||
| } ) { | ||
| if ( process.env.COMPONENT_SYSTEM_PHASE === 1 ) { | ||
| const contextValue = { ...value }; | ||
|
|
||
| __unstableNextInclude.forEach( ( namespace ) => { | ||
| const baseValue = contextValue[ namespace ] || {}; | ||
| contextValue[ namespace ] = { | ||
| ...baseValue, | ||
| __unstableVersion: 'next', | ||
| }; | ||
| } ); | ||
|
|
||
| return ( | ||
| <ContextSystemProvider value={ contextValue }> | ||
| { children } | ||
| </ContextSystemProvider> | ||
| ); | ||
| } | ||
|
|
||
| return children; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| export { ComponentSystemProvider as __unstableComponentSystemProvider } from './component-system-provider'; | ||
| export { withNext as __unstableWithNext } from './with-next'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import { contextConnect, useContextSystem } from '@wp-g2/components'; | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { forwardRef } from '@wordpress/element'; | ||
|
|
||
| export function withNext( | ||
| CurrentComponent = () => null, | ||
| NextComponent = () => null, | ||
| namespace = 'Component', | ||
| adapter = ( p ) => p | ||
| ) { | ||
| if ( process.env.COMPONENT_SYSTEM_PHASE === 1 ) { | ||
| const WrappedComponent = ( props, ref ) => { | ||
| const { __unstableVersion, ...otherProps } = useContextSystem( | ||
| props, | ||
| namespace | ||
| ); | ||
|
|
||
| if ( __unstableVersion === 'next' ) { | ||
| const nextProps = adapter( otherProps ); | ||
| return <NextComponent { ...nextProps } ref={ ref } />; | ||
| } | ||
|
|
||
| return <CurrentComponent { ...props } ref={ ref } />; | ||
| }; | ||
|
|
||
| return contextConnect( WrappedComponent, namespace ); | ||
| } | ||
|
|
||
| return forwardRef( CurrentComponent ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
100 changes: 100 additions & 0 deletions
100
packages/components/src/font-size-picker/next/font-size-control-select.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,100 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { __ } from '@wordpress/i18n'; | ||
|
|
||
| /** | ||
| * External dependencies | ||
| */ | ||
| import { noop } from 'lodash'; | ||
| import { contextConnect, useContextSystem } from '@wp-g2/context'; | ||
| import { | ||
| Grid, | ||
| TextInput, | ||
| SelectDropdown, | ||
| FormGroup, | ||
| Button, | ||
| View, | ||
| } from '@wp-g2/components'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import { getSelectTemplateColumns } from './font-size-control-utils'; | ||
|
|
||
| function renderItem( { name, style } ) { | ||
| return <span style={ style }>{ name }</span>; | ||
| } | ||
|
|
||
| function FontSizeControlSelect( props, forwardedRef ) { | ||
| const { | ||
| customLabel, | ||
| disabled, | ||
| inputValue, | ||
| isDefaultValue, | ||
| label, | ||
| max, | ||
| min, | ||
| onChange = noop, | ||
| onInputChange = noop, | ||
| onReset = noop, | ||
| options = [], | ||
| size, | ||
| value, | ||
| withNumberInput, | ||
| withSelect, | ||
| ...otherProps | ||
| } = useContextSystem( props, 'FontSizeControlSelect' ); | ||
|
|
||
| const templateColumns = getSelectTemplateColumns( withNumberInput ); | ||
| const subControlsTemplateColumns = withNumberInput ? '1fr 1fr' : '1fr'; | ||
|
|
||
| return ( | ||
| <Grid alignment="bottom" templateColumns={ templateColumns }> | ||
| { withSelect && ( | ||
| <FormGroup label={ label }> | ||
| <SelectDropdown | ||
| disabled={ disabled } | ||
| max={ 260 } | ||
| onChange={ onChange } | ||
| options={ options } | ||
| renderItem={ renderItem } | ||
| ref={ forwardedRef } | ||
| size={ size } | ||
| value={ value } | ||
| { ...otherProps } | ||
| /> | ||
| </FormGroup> | ||
| ) } | ||
| <Grid | ||
| alignment="bottom" | ||
| templateColumns={ subControlsTemplateColumns } | ||
| > | ||
| { withNumberInput && ( | ||
| <FormGroup label={ customLabel }> | ||
| <TextInput | ||
| disabled={ disabled } | ||
| max={ max } | ||
| min={ min } | ||
| onChange={ onInputChange } | ||
| size={ size } | ||
| type="number" | ||
| value={ inputValue } | ||
| /> | ||
| </FormGroup> | ||
| ) } | ||
| <View> | ||
| <Button | ||
| disabled={ isDefaultValue } | ||
| isBlock | ||
| onClick={ onReset } | ||
| > | ||
| { __( 'Reset' ) } | ||
| </Button> | ||
| </View> | ||
| </Grid> | ||
| </Grid> | ||
| ); | ||
| } | ||
|
|
||
| export default contextConnect( FontSizeControlSelect, 'FontSizeControlSelect' ); |
59 changes: 59 additions & 0 deletions
59
packages/components/src/font-size-picker/next/font-size-control-slider.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { __ } from '@wordpress/i18n'; | ||
|
|
||
| /** | ||
| * External dependencies | ||
| */ | ||
| import { noop } from 'lodash'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import { | ||
| ControlLabel, | ||
| Grid, | ||
| Slider, | ||
| TextInput, | ||
| VStack, | ||
| } from '@wp-g2/components'; | ||
| import { getSliderTemplateColumns } from './font-size-control-utils'; | ||
|
|
||
| function FontSizeControlSlider( props ) { | ||
| const { | ||
| label = __( 'Custom size' ), | ||
| disabled, | ||
| min, | ||
| max, | ||
| onChange = noop, | ||
| size, | ||
| value, | ||
| withSlider, | ||
| } = props; | ||
|
|
||
| if ( ! withSlider ) return null; | ||
|
|
||
| const templateColumns = getSliderTemplateColumns(); | ||
|
|
||
| const controlProps = { | ||
| disabled, | ||
| min, | ||
| max, | ||
| onChange, | ||
| size, | ||
| value, | ||
| }; | ||
|
|
||
| return ( | ||
| <VStack spacing={ 0 }> | ||
| <ControlLabel>{ label }</ControlLabel> | ||
| <Grid templateColumns={ templateColumns }> | ||
| <Slider { ...controlProps } /> | ||
| <TextInput { ...controlProps } type="number" /> | ||
| </Grid> | ||
| </VStack> | ||
| ); | ||
| } | ||
|
|
||
| export default FontSizeControlSlider; |
11 changes: 11 additions & 0 deletions
11
packages/components/src/font-size-picker/next/font-size-control-styles.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import { css } from '@wp-g2/styles'; | ||
|
|
||
| export const FontSizeControl = css` | ||
| appearance: none; | ||
| border: none; | ||
| margin: 0; | ||
| padding: 0; | ||
| `; |
Oops, something went wrong.