Skip to content

Commit

Permalink
FontSizePicker: Introduce label prop for customizable header text
Browse files Browse the repository at this point in the history
  • Loading branch information
@SainathPoojary
SainathPoojary committed Jan 9, 2025
1 parent f91339e commit 51e0697
Show file tree
Hide file tree
Showing 2 changed files with 187 additions and 156 deletions.
333 changes: 177 additions & 156 deletions packages/components/src/font-size-picker/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ import FontSizePickerSelect from './font-size-picker-select';
import FontSizePickerToggleGroup from './font-size-picker-toggle-group';
import { T_SHIRT_NAMES } from './constants';
import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
import BaseControl from '../base-control';

const DEFAULT_UNITS = [ 'px', 'em', 'rem', 'vw', 'vh' ];

Expand All @@ -56,6 +57,7 @@ const UnforwardedFontSizePicker = (
value,
withSlider = false,
withReset = true,
label = 'Size',
} = props;

const units = useCustomUnits( {
Expand Down Expand Up @@ -131,171 +133,190 @@ const UnforwardedFontSizePicker = (
} );

return (
<Container ref={ ref } className="components-font-size-picker">
<VisuallyHidden as="legend">{ __( 'Font size' ) }</VisuallyHidden>
<Spacer>
<Header className="components-font-size-picker__header">
<HeaderLabel
aria-label={ `${ __( 'Size' ) } ${ headerHint || '' }` }
>
{ __( 'Size' ) }
{ headerHint && (
<HeaderHint className="components-font-size-picker__header__hint">
{ headerHint }
</HeaderHint>
<BaseControl>
<Container ref={ ref } className="components-font-size-picker">
<VisuallyHidden as="legend">
{ __( 'Font size' ) }
</VisuallyHidden>
<Spacer>
<Header className="components-font-size-picker__header">
<HeaderLabel
aria-label={ `${ label } ${ headerHint || '' }` }
>
{ label }
{ headerHint && (
<HeaderHint className="components-font-size-picker__header__hint">
{ headerHint }
</HeaderHint>
) }
</HeaderLabel>
{ ! disableCustomFontSizes && (
<HeaderToggle
label={
currentPickerType === 'custom'
? __( 'Use size preset' )
: __( 'Set custom size' )
}
icon={ settings }
onClick={ () =>
setUserRequestedCustom(
! userRequestedCustom
)
}
isPressed={ currentPickerType === 'custom' }
size="small"
/>
) }
</HeaderLabel>
{ ! disableCustomFontSizes && (
<HeaderToggle
label={
currentPickerType === 'custom'
? __( 'Use size preset' )
: __( 'Set custom size' )
</Header>
</Spacer>
<div>
{ currentPickerType === 'select' && (
<FontSizePickerSelect
__next40pxDefaultSize={ __next40pxDefaultSize }
fontSizes={ fontSizes }
value={ value }
disableCustomFontSizes={ disableCustomFontSizes }
size={ size }
onChange={ ( newValue ) => {
if ( newValue === undefined ) {
onChange?.( undefined );
} else {
onChange?.(
hasUnits
? newValue
: Number( newValue ),
fontSizes.find(
( fontSize ) =>
fontSize.size === newValue
)
);
}
} }
onSelectCustom={ () =>
setUserRequestedCustom( true )
}
icon={ settings }
onClick={ () =>
setUserRequestedCustom( ! userRequestedCustom )
}
isPressed={ currentPickerType === 'custom' }
size="small"
/>
) }
</Header>
</Spacer>
<div>
{ currentPickerType === 'select' && (
<FontSizePickerSelect
__next40pxDefaultSize={ __next40pxDefaultSize }
fontSizes={ fontSizes }
value={ value }
disableCustomFontSizes={ disableCustomFontSizes }
size={ size }
onChange={ ( newValue ) => {
if ( newValue === undefined ) {
onChange?.( undefined );
} else {
onChange?.(
hasUnits ? newValue : Number( newValue ),
fontSizes.find(
( fontSize ) =>
fontSize.size === newValue
)
);
}
} }
onSelectCustom={ () => setUserRequestedCustom( true ) }
/>
) }
{ currentPickerType === 'togglegroup' && (
<FontSizePickerToggleGroup
fontSizes={ fontSizes }
value={ value }
__next40pxDefaultSize={ __next40pxDefaultSize }
size={ size }
onChange={ ( newValue ) => {
if ( newValue === undefined ) {
onChange?.( undefined );
} else {
onChange?.(
hasUnits ? newValue : Number( newValue ),
fontSizes.find(
( fontSize ) =>
fontSize.size === newValue
)
);
}
} }
/>
) }
{ currentPickerType === 'custom' && (
<Flex className="components-font-size-picker__custom-size-control">
<FlexItem isBlock>
<UnitControl
__next40pxDefaultSize={ __next40pxDefaultSize }
__shouldNotWarnDeprecated36pxSize
label={ __( 'Custom' ) }
labelPosition="top"
hideLabelFromVision
value={ value }
onChange={ ( newValue ) => {
setUserRequestedCustom( true );

if ( newValue === undefined ) {
onChange?.( undefined );
} else {
onChange?.(
hasUnits
? newValue
: parseInt( newValue, 10 )
);
}
} }
size={ size }
units={ hasUnits ? units : [] }
min={ 0 }
/>
</FlexItem>
{ withSlider && (
{ currentPickerType === 'togglegroup' && (
<FontSizePickerToggleGroup
fontSizes={ fontSizes }
value={ value }
__next40pxDefaultSize={ __next40pxDefaultSize }
size={ size }
onChange={ ( newValue ) => {
if ( newValue === undefined ) {
onChange?.( undefined );
} else {
onChange?.(
hasUnits
? newValue
: Number( newValue ),
fontSizes.find(
( fontSize ) =>
fontSize.size === newValue
)
);
}
} }
/>
) }
{ currentPickerType === 'custom' && (
<Flex className="components-font-size-picker__custom-size-control">
<FlexItem isBlock>
<Spacer marginX={ 2 } marginBottom={ 0 }>
<RangeControl
__nextHasNoMarginBottom
__next40pxDefaultSize={
__next40pxDefaultSize
<UnitControl
__next40pxDefaultSize={
__next40pxDefaultSize
}
__shouldNotWarnDeprecated36pxSize
label={ __( 'Custom' ) }
labelPosition="top"
hideLabelFromVision
value={ value }
onChange={ ( newValue ) => {
setUserRequestedCustom( true );

if ( newValue === undefined ) {
onChange?.( undefined );
} else {
onChange?.(
hasUnits
? newValue
: parseInt( newValue, 10 )
);
}
__shouldNotWarnDeprecated36pxSize
className="components-font-size-picker__custom-input"
label={ __( 'Custom Size' ) }
hideLabelFromVision
value={ valueQuantity }
initialPosition={ fallbackFontSize }
withInputField={ false }
onChange={ ( newValue ) => {
setUserRequestedCustom( true );
} }
size={ size }
units={ hasUnits ? units : [] }
min={ 0 }
/>
</FlexItem>
{ withSlider && (
<FlexItem isBlock>
<Spacer marginX={ 2 } marginBottom={ 0 }>
<RangeControl
__nextHasNoMarginBottom
__next40pxDefaultSize={
__next40pxDefaultSize
}
__shouldNotWarnDeprecated36pxSize
className="components-font-size-picker__custom-input"
label={ __( 'Custom Size' ) }
hideLabelFromVision
value={ valueQuantity }
initialPosition={ fallbackFontSize }
withInputField={ false }
onChange={ ( newValue ) => {
setUserRequestedCustom( true );

if ( newValue === undefined ) {
onChange?.( undefined );
} else if ( hasUnits ) {
onChange?.(
newValue +
( valueUnit ?? 'px' )
);
} else {
onChange?.( newValue );
if ( newValue === undefined ) {
onChange?.( undefined );
} else if ( hasUnits ) {
onChange?.(
newValue +
( valueUnit ??
'px' )
);
} else {
onChange?.( newValue );
}
} }
min={ 0 }
max={
isValueUnitRelative ? 10 : 100
}
step={
isValueUnitRelative ? 0.1 : 1
}
/>
</Spacer>
</FlexItem>
) }
{ withReset && (
<FlexItem>
<Button
disabled={ isDisabled }
accessibleWhenDisabled
onClick={ () => {
onChange?.( undefined );
} }
min={ 0 }
max={ isValueUnitRelative ? 10 : 100 }
step={ isValueUnitRelative ? 0.1 : 1 }
/>
</Spacer>
</FlexItem>
) }
{ withReset && (
<FlexItem>
<Button
disabled={ isDisabled }
accessibleWhenDisabled
onClick={ () => {
onChange?.( undefined );
} }
variant="secondary"
__next40pxDefaultSize
size={
size === '__unstable-large' ||
props.__next40pxDefaultSize
? 'default'
: 'small'
}
>
{ __( 'Reset' ) }
</Button>
</FlexItem>
) }
</Flex>
) }
</div>
</Container>
variant="secondary"
__next40pxDefaultSize
size={
size === '__unstable-large' ||
props.__next40pxDefaultSize
? 'default'
: 'small'
}
>
{ __( 'Reset' ) }
</Button>
</FlexItem>
) }
</Flex>
) }
</div>
</Container>
</BaseControl>
);
};

Expand Down
10 changes: 10 additions & 0 deletions packages/components/src/font-size-picker/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,16 @@ export type FontSizePickerProps = {
* @default 'default'
*/
size?: 'default' | '__unstable-large';
/**
* Label for the control. If this prop is provided, it will be rendered
* above the control interface.
*/
label?: string;
/**
* Help text to be displayed below the control. If a function is provided, it will
* receive the current font size value as an argument and should return a string.
*/
help?: string | ( ( value: number | string | undefined ) => string );
};

export type FontSize = {
Expand Down

0 comments on commit 51e0697

Please sign in to comment.