-
Notifications
You must be signed in to change notification settings - Fork 4.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
FontSizePicker: Use components instead of helper functions (#44891)
- Loading branch information
1 parent
3865dbe
commit 3081460
Showing
8 changed files
with
280 additions
and
294 deletions.
There are no files selected for viewing
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
87 changes: 87 additions & 0 deletions
87
packages/components/src/font-size-picker/font-size-picker-select.tsx
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,87 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { __, sprintf } from '@wordpress/i18n'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import CustomSelectControl from '../custom-select-control'; | ||
| import { parseQuantityAndUnitFromRawValue } from '../unit-control'; | ||
| import type { | ||
| FontSizePickerSelectProps, | ||
| FontSizePickerSelectOption, | ||
| } from './types'; | ||
|
|
||
| const DEFAULT_OPTION: FontSizePickerSelectOption = { | ||
| key: 'default', | ||
| name: __( 'Default' ), | ||
| value: undefined, | ||
| }; | ||
|
|
||
| const CUSTOM_OPTION: FontSizePickerSelectOption = { | ||
| key: 'custom', | ||
| name: __( 'Custom' ), | ||
| }; | ||
|
|
||
| const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => { | ||
| const { | ||
| fontSizes, | ||
| value, | ||
| disableCustomFontSizes, | ||
| size, | ||
| onChange, | ||
| onSelectCustom, | ||
| } = props; | ||
|
|
||
| const options: FontSizePickerSelectOption[] = [ | ||
| DEFAULT_OPTION, | ||
| ...fontSizes.map( ( fontSize ) => { | ||
| const [ quantity ] = parseQuantityAndUnitFromRawValue( | ||
| fontSize.size | ||
| ); | ||
| return { | ||
| key: fontSize.slug, | ||
| name: fontSize.name || fontSize.slug, | ||
| value: fontSize.size, | ||
| __experimentalHint: | ||
| quantity !== undefined ? String( quantity ) : undefined, | ||
| }; | ||
| } ), | ||
| ...( disableCustomFontSizes ? [] : [ CUSTOM_OPTION ] ), | ||
| ]; | ||
|
|
||
| const selectedOption = value | ||
| ? options.find( ( option ) => option.value === value ) ?? CUSTOM_OPTION | ||
| : DEFAULT_OPTION; | ||
|
|
||
| return ( | ||
| <CustomSelectControl | ||
| __nextUnconstrainedWidth | ||
| className="components-font-size-picker__select" | ||
| label={ __( 'Font size' ) } | ||
| hideLabelFromVision | ||
| describedBy={ sprintf( | ||
| // translators: %s: Currently selected font size. | ||
| __( 'Currently selected font size: %s' ), | ||
| selectedOption.name | ||
| ) } | ||
| options={ options } | ||
| value={ selectedOption } | ||
| onChange={ ( { | ||
| selectedItem, | ||
| }: { | ||
| selectedItem: FontSizePickerSelectOption; | ||
| } ) => { | ||
| if ( selectedItem === CUSTOM_OPTION ) { | ||
| onSelectCustom(); | ||
| } else { | ||
| onChange( selectedItem.value ); | ||
| } | ||
| } } | ||
| size={ size } | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| export default FontSizePickerSelect; |
58 changes: 58 additions & 0 deletions
58
packages/components/src/font-size-picker/font-size-picker-toggle-group.tsx
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,58 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { __ } from '@wordpress/i18n'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import { | ||
| ToggleGroupControl, | ||
| ToggleGroupControlOption, | ||
| } from '../toggle-group-control'; | ||
| import type { FontSizePickerToggleGroupProps } from './types'; | ||
|
|
||
| /** | ||
| * In case we have at most five font sizes, show a `T-shirt size` alias as a | ||
| * label of the font size. The label assumes that the font sizes are ordered | ||
| * accordingly - from smallest to largest. | ||
| */ | ||
| const FONT_SIZES_ALIASES = [ | ||
| /* translators: S stands for 'small' and is a size label. */ | ||
| __( 'S' ), | ||
| /* translators: M stands for 'medium' and is a size label. */ | ||
| __( 'M' ), | ||
| /* translators: L stands for 'large' and is a size label. */ | ||
| __( 'L' ), | ||
| /* translators: XL stands for 'extra large' and is a size label. */ | ||
| __( 'XL' ), | ||
| /* translators: XXL stands for 'extra extra large' and is a size label. */ | ||
| __( 'XXL' ), | ||
| ]; | ||
|
|
||
| const FontSizePickerToggleGroup = ( props: FontSizePickerToggleGroupProps ) => { | ||
| const { fontSizes, value, __nextHasNoMarginBottom, size, onChange } = props; | ||
| return ( | ||
| <ToggleGroupControl | ||
| __nextHasNoMarginBottom={ __nextHasNoMarginBottom } | ||
| label={ __( 'Font size' ) } | ||
| hideLabelFromVision | ||
| value={ value } | ||
| onChange={ onChange } | ||
| isBlock | ||
| size={ size } | ||
| > | ||
| { fontSizes.map( ( fontSize, index ) => ( | ||
| <ToggleGroupControlOption | ||
| key={ fontSize.slug } | ||
| value={ fontSize.size } | ||
| label={ FONT_SIZES_ALIASES[ index ] } | ||
| aria-label={ fontSize.name || FONT_SIZES_ALIASES[ index ] } | ||
| showTooltip | ||
| /> | ||
| ) ) } | ||
| </ToggleGroupControl> | ||
| ); | ||
| }; | ||
|
|
||
| export default FontSizePickerToggleGroup; |
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
Oops, something went wrong.