Skip to content

Commit

Permalink
Ensuring the font size picker select box shows the right labels
Browse files Browse the repository at this point in the history
  • Loading branch information
ramonjd committed Oct 8, 2022
1 parent 394d74c commit 4d4b550
Show file tree
Hide file tree
Showing 7 changed files with 32 additions and 124 deletions.
32 changes: 5 additions & 27 deletions packages/components/src/font-size-picker/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -111,20 +111,17 @@ const UnforwardedFontSizePicker = (
),
[ shouldUseSelectControl, fontSizes, disableCustomFontSizes ]
);
const [ selectedOptionSlug, setSelectedOptionSlug ] = useState();
const selectedOption = getSelectedOption(
fontSizes,
value,
shouldUseSelectControl,
disableCustomFontSizes,
selectedOptionSlug
disableCustomFontSizes
);
console.log( 'selectedOption', selectedOption );

const isCustomValue = selectedOption.slug === CUSTOM_FONT_SIZE;
const [ showCustomValueControl, setShowCustomValueControl ] = useState(
! disableCustomFontSizes && isCustomValue
);

const headerHint = useMemo( () => {
if ( showCustomValueControl ) {
return `(${ __( 'Custom' ) })`;
Expand Down Expand Up @@ -236,26 +233,16 @@ const UnforwardedFontSizePicker = (
}: {
selectedItem: FontSizeSelectOption;
} ) => {
const selectedSelectControlOption =
getSelectedOption(
fontSizes,
selectedItem.size,
shouldUseSelectControl,
disableCustomFontSizes,
selectedItem?.slug
);
onChange?.(
hasUnits
? selectedItem.size
: Number( selectedItem.size ),
selectedSelectControlOption
: Number( selectedItem.size )
);
if (
selectedItem.key === CUSTOM_FONT_SIZE
) {
setShowCustomValueControl( true );
}
setSelectedOptionSlug( selectedItem?.slug );
} }
size={ size }
/>
Expand All @@ -266,17 +253,9 @@ const UnforwardedFontSizePicker = (
label={ __( 'Font size' ) }
hideLabelFromVision
value={ value }
onChange={ ( newValue, optionSlug ) => {
const groupSelectedOption = getSelectedOption(
fontSizes,
newValue,
shouldUseSelectControl,
disableCustomFontSizes,
optionSlug
);
onChange={ ( newValue ) => {
onChange?.(
hasUnits ? newValue : Number( newValue ),
groupSelectedOption
hasUnits ? newValue : Number( newValue )
);
} }
isBlock
Expand All @@ -287,7 +266,6 @@ const UnforwardedFontSizePicker = (
<ToggleGroupControlOption
key={ option.key }
value={ option.value }
slug={ option.slug }
label={ option.label }
aria-label={ option.name }
showTooltip={ true }
Expand Down
15 changes: 10 additions & 5 deletions packages/components/src/font-size-picker/test/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -120,33 +120,38 @@ describe( 'getToggleGroupOptions', () => {
).toEqual( [
{
key: '1',
value: '1',
label: 'S',
name: '1',
size: '1',
value: '1',
},
{
key: '2',
value: '2',
label: 'M',
name: '2',
size: '2',
value: '2',
},
{
key: '3',
value: '3',
label: 'L',
name: '3',
size: '3',
value: '3',
},
{
key: '4',
value: '4',
label: 'XL',
name: '4',
size: '4',
value: '4',
},
{
key: '5',
value: '5',
label: 'XXL',
name: 'XXL',
value: '5',
size: '5',
},
] );
} );
Expand Down
22 changes: 6 additions & 16 deletions packages/components/src/font-size-picker/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,12 @@ export type FontSizePickerProps = {
*/
fontSizes?: FontSize[];
/**
* A function that receives the new font size value and an optional selectedOption object,
* A function that receives the new font size value.
* If onChange is called without any parameter, it should reset the value,
* attending to what reset means in that context, e.g., set the font size to
* undefined or set the font size a starting value.
*/
onChange?: (
value: number | string | undefined,
selectedOption?: FontSizeSelectOption | FontSizeOption
) => void;
onChange?: ( value: number | string | undefined ) => void;
/**
* The current font size value.
*/
Expand Down Expand Up @@ -84,26 +81,19 @@ export type FontSize = {
slug: string;
};

export type FontSizeFluidOptions = {
max?: string;
min?: string;
};

export type FontSizeOption = Omit< FontSize, 'size' > &
Partial< Pick< FontSize, 'size' > > & {
fluid?: FontSizeFluidOptions;
};
Partial< Pick< FontSize, 'size' > >;

export type FontSizeSelectOption = Pick< FontSizeOption, 'size' > & {
key: string;
name?: string;
slug?: string;
__experimentalHint?: ReactNode;
__experimentalHint: ReactNode;
};

export type FontSizeToggleGroupOption = FontSize & {
export type FontSizeToggleGroupOption = {
key: string;
value: number | string;
label: string;
name: string;
size?: number | string;
};
11 changes: 4 additions & 7 deletions packages/components/src/font-size-picker/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -136,10 +136,9 @@ export function getToggleGroupOptions(
return {
key: slug,
value: size,
size,
label: labelAliases[ index ],
name: name || labelAliases[ index ],
size,
slug,
};
} );
}
Expand All @@ -148,8 +147,7 @@ export function getSelectedOption(
fontSizes: FontSize[],
value: FontSizePickerProps[ 'value' ],
useSelectControl: boolean,
disableCustomFontSizes: boolean = false,
slug: string | undefined
disableCustomFontSizes: boolean = false
): FontSizeOption {
if ( ! value ) {
return DEFAULT_FONT_SIZE_OPTION;
Expand All @@ -160,13 +158,12 @@ export function getSelectedOption(
fontSizes,
disableCustomFontSizes
);
console.log( 'fontSizeOptions', fontSizeOptions, value, slug );

// @TODO fix types for fontSizeOptions.
const selectedOption = fontSizeOptions
? // @ts-ignore
fontSizeOptions.find(
( option: FontSizeSelectOption ) =>
slug === option.slug || option.size === value
( option: FontSizeSelectOption ) => option.size === value
) // @ts-ignore
: null;

Expand Down
12 changes: 1 addition & 11 deletions packages/edit-site/src/components/global-styles/hooks.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ import {
*/
import { getValueFromVariable, getPresetVariableFromValue } from './utils';
import { GlobalStylesContext } from './context';
import { getTypographyFontSizeValue } from './typography-utils';

const EMPTY_CONFIG = { settings: {}, styles: {} };

Expand Down Expand Up @@ -109,19 +108,10 @@ export function useStyle( path, blockName, source = 'all' ) {
? `styles.${ path }`
: `styles.blocks.${ blockName }.${ path }`;

const setStyle = ( newValue, presetSettings = null ) => {
const setStyle = ( newValue ) => {
setUserConfig( ( currentConfig ) => {
// Deep clone `currentConfig` to avoid mutating it later.
const newUserConfig = JSON.parse( JSON.stringify( currentConfig ) );

// Convert font size styles to fluid if fluid is activated.
if ( finalPath.indexOf( 'typography.fontSize' ) !== -1 && presetSettings ) {
newValue = getTypographyFontSizeValue(
{ ...presetSettings, size: newValue },
mergedConfig?.settings?.typography
);
}

set(
newUserConfig,
finalPath,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,7 @@ export default function TypographyPanel( { name, element, headingLevel } ) {
const [ fluidTypography ] = useSetting( 'typography.fluid', name );
const [ fontSizes ] = useSetting( 'typography.fontSizes', name );

// Convert static font size values to fluid font sizes if fluidTypography is activated.
const fontSizesWithFluidValues = fontSizes.map( ( font ) => {
if ( !! fluidTypography ) {
font.size = getTypographyFontSizeValue( font, {
Expand Down
63 changes: 5 additions & 58 deletions test/emptytheme/theme.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,63 +2,10 @@
"version": 2,
"settings": {
"appearanceTools": true,
"typography": {
"fluid": true,
"fontSizes": [
{
"fluid": {
"min": "0.875rem",
"max": "1rem"
},
"size": "1rem",
"slug": "small"
},
{
"fluid": {
"min": "1rem",
"max": "1.125rem"
},
"size": "1.125rem",
"slug": "medium"
},
{
"size": "1.9rem",
"slug": "not-so-large",
"fluid": {
"min": "1.9rem",
"max": "2rem"
}
},
{
"size": "3.5rem",
"slug": "large",
"fluid": {
"min": "3rem",
"max": "5rem"
}
},
{
"size": "2.25rem",
"slug": "x-large",
"fluid": false
},
{
"size": "10rem",
"slug": "xx-large",
"fluid": {
"min": "4rem",
"max": "20rem"
}
},
{
"size": "14rem",
"slug": "Colossal",
"fluid": {
"min": "8rem",
"max": "30rem"
}
}
]
"layout": {
"contentSize": "840px",
"wideSize": "1100px"
}
}
},
"patterns": [ "short-text-surrounded-by-round-images", "partner-logos" ]
}

0 comments on commit 4d4b550

Please sign in to comment.