Skip to content

Commit

Permalink
Quality: Don't hardcode IDs of controls (#215)
Browse files Browse the repository at this point in the history 
* Quality: Don't hardcode IDs of controls

* Fix e2e test
  • Loading branch information
@t-hamano
t-hamano authored Oct 20, 2024
1 parent 51915ec commit ea8039d
Show file tree
Hide file tree
Showing 12 changed files with 35 additions and 60 deletions.
9 changes: 4 additions & 5 deletions src/controls/border-color-control.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import {
__experimentalText as Text,
} from '@wordpress/components';
import { store as blockEditorStore } from '@wordpress/block-editor';
import { useInstanceId } from '@wordpress/compose';

/**
* Internal dependencies
Expand All @@ -29,7 +30,6 @@ import { SIDE_CONTROLS } from '../constants';
import type { SideValue } from '../BlockAttributes';

type Props = {
id: string;
label: string;
help?: string;
onChange: ( event: any ) => void;
Expand All @@ -50,7 +50,6 @@ const DEFAULT_VALUES = {
};

export default function BorderColorControl( {
id,
label = __( 'Border color', 'flexible-table-block' ),
help,
onChange,
Expand All @@ -61,6 +60,8 @@ export default function BorderColorControl( {
...DEFAULT_VALUES,
...valuesProp,
};
const instanceId = useInstanceId( BorderColorControl, 'ftb-border-color-control' );
const headingId: string = `${ instanceId }-heading`;

const isMixed: boolean = ! (
values.top === values.right &&
Expand All @@ -80,8 +81,6 @@ export default function BorderColorControl( {
const [ isPickerOpen, setIsPickerOpen ] = useState< boolean >( false );
const [ pickerIndex, setPickerIndex ] = useState< number | undefined >( undefined );

const headingId: string = `${ id }-heading`;

const linkedLabel: string = isLinked
? __( 'Unlink sides', 'flexible-table-block' )
: __( 'Link sides', 'flexible-table-block' );
Expand Down Expand Up @@ -122,7 +121,7 @@ export default function BorderColorControl( {
};

return (
<BaseControl id={ id } className="ftb-border-color-control" help={ help }>
<BaseControl className="ftb-border-color-control" help={ help }>
<div aria-labelledby={ headingId } role="region">
<div className="ftb-border-color-control__header">
<Text id={ headingId }>{ label }</Text>
Expand Down
9 changes: 4 additions & 5 deletions src/controls/border-radius-control.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
__experimentalUnitControl as UnitControl,
__experimentalUseCustomUnits as useCustomUnits,
} from '@wordpress/components';
import { useInstanceId } from '@wordpress/compose';

/**
* Internal dependencies
Expand All @@ -33,7 +34,6 @@ const DEFAULT_VALUES = {
};

type Props = {
id: string;
label: string;
help?: string;
onChange: ( event: any ) => void;
Expand All @@ -50,7 +50,6 @@ type ValuesKey = keyof typeof DEFAULT_VALUES;
type MaxBorderRadiusKey = keyof typeof MAX_BORDER_RADIUS;

export default function BorderRadiusControl( {
id,
label = __( 'Border radius', 'flexible-table-block' ),
help,
onChange,
Expand All @@ -61,6 +60,8 @@ export default function BorderRadiusControl( {
...DEFAULT_VALUES,
...valuesProp,
};
const instanceId = useInstanceId( BorderRadiusControl, 'ftb-border-radius-contro' );
const headingId: string = `${ instanceId }-heading`;

const isMixed: boolean = ! (
values.topLeft === values.topRight &&
Expand All @@ -73,8 +74,6 @@ export default function BorderRadiusControl( {
const [ isLinked, setIsLinked ] = useState< boolean >( true );
const [ corner, setCorner ] = useState< CornerValue | undefined >( undefined );

const headingId: string = `${ id }-heading`;

const linkedLabel: string = isLinked
? __( 'Unlink sides', 'flexible-table-block' )
: __( 'Link sides', 'flexible-table-block' );
Expand Down Expand Up @@ -138,7 +137,7 @@ export default function BorderRadiusControl( {
};

return (
<BaseControl id={ id } className="ftb-border-radius-control" help={ help }>
<BaseControl className="ftb-border-radius-control" help={ help }>
<div aria-labelledby={ headingId } role="region">
<div className="ftb-border-radius-control__header">
<Text id={ headingId }>{ label }</Text>
Expand Down
9 changes: 4 additions & 5 deletions src/controls/border-spacing-control.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
__experimentalUnitControl as UnitControl,
__experimentalUseCustomUnits as useCustomUnits,
} from '@wordpress/components';
import { useInstanceId } from '@wordpress/compose';

/**
* Internal dependencies
Expand All @@ -26,7 +27,6 @@ const DEFAULT_VALUES = {
};

type Props = {
id: string;
label: string;
help?: string;
onChange: ( event: any ) => void;
Expand All @@ -38,7 +38,6 @@ type ValuesKey = keyof typeof DEFAULT_VALUES;
type MaxBorderSpacingKey = keyof typeof MAX_BORDER_SPACING;

export default function BorderSpacingControl( {
id,
label = __( 'Border spacing', 'flexible-table-block' ),
help,
onChange,
Expand All @@ -49,15 +48,15 @@ export default function BorderSpacingControl( {
...DEFAULT_VALUES,
...valuesProp,
};
const instanceId = useInstanceId( BorderSpacingControl, 'ftb-border-spacing-control' );
const headingId: string = `${ instanceId }-heading`;

const isMixed: boolean = ! ( values.horizontal === values.vertical );

const borderSpacingUnits = useCustomUnits( { availableUnits: BORDER_SPACING_UNITS } );

const [ isLinked, setIsLinked ] = useState< boolean >( true );

const headingId: string = `${ id }-heading`;

const linkedLabel: string = isLinked
? __( 'Unlink directions', 'flexible-table-block' )
: __( 'Link directions', 'flexible-table-block' );
Expand Down Expand Up @@ -113,7 +112,7 @@ export default function BorderSpacingControl( {
};

return (
<BaseControl id={ id } className="ftb-border-spacing-control" help={ help }>
<BaseControl className="ftb-border-spacing-control" help={ help }>
<div aria-labelledby={ headingId } role="region">
<div className="ftb-border-spacing-control__header">
<Text id={ headingId }>{ label }</Text>
Expand Down
8 changes: 4 additions & 4 deletions src/controls/border-style-control.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
__experimentalText as Text,
} from '@wordpress/components';
import { useInstanceId } from '@wordpress/compose';

/**
* Internal dependencies
Expand All @@ -31,7 +32,6 @@ const DEFAULT_VALUES = {
};

type Props = {
id: string;
label: string;
help?: string;
onChange: ( event: any ) => void;
Expand All @@ -48,7 +48,6 @@ type Props = {
type ValuesKey = keyof typeof DEFAULT_VALUES;

export default function BorderStyleControl( {
id,
label = __( 'Border style', 'flexible-table-block' ),
help,
onChange,
Expand All @@ -60,13 +59,14 @@ export default function BorderStyleControl( {
...DEFAULT_VALUES,
...valuesProp,
};
const instanceId = useInstanceId( BorderStyleControl, 'ftb-border-style-control' );
const headingId: string = `${ instanceId }-heading`;

const isMixed: boolean =
allowSides &&
! ( values.top === values.right && values.top === values.bottom && values.top === values.left );

const [ isLinked, setIsLinked ] = useState< boolean >( true );
const headingId = `${ id }-heading`;

const controlLabel: string =
isMixed && isLinked ? `${ label } ${ __( '(Mixed)', 'flexible-table-block' ) }` : label;
Expand Down Expand Up @@ -114,7 +114,7 @@ export default function BorderStyleControl( {
};

return (
<BaseControl id={ id } className="ftb-border-style-control" help={ help }>
<BaseControl className="ftb-border-style-control" help={ help }>
<div aria-labelledby={ headingId } role="region">
<div className="ftb-border-style-control__header">
<Text id={ headingId }>{ controlLabel }</Text>
Expand Down
9 changes: 4 additions & 5 deletions src/controls/border-width-control.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
__experimentalUnitControl as UnitControl,
__experimentalUseCustomUnits as useCustomUnits,
} from '@wordpress/components';
import { useInstanceId } from '@wordpress/compose';

/**
* Internal dependencies
Expand All @@ -33,7 +34,6 @@ const DEFAULT_VALUES = {
};

type Props = {
id: string;
label: string;
help?: string;
onChange: ( event: any ) => void;
Expand All @@ -51,7 +51,6 @@ type ValuesKey = keyof typeof DEFAULT_VALUES;
type MaxBorderWidthKey = keyof typeof MAX_BORDER_WIDTH;

export default function BorderWidthControl( {
id,
label = __( 'Border width', 'flexible-table-block' ),
help,
onChange,
Expand All @@ -63,6 +62,8 @@ export default function BorderWidthControl( {
...DEFAULT_VALUES,
...valuesProp,
};
const instanceId = useInstanceId( BorderWidthControl, 'ftb-border-width-control' );
const headingId: string = `${ instanceId }-heading`;

const isMixed: boolean =
allowSides &&
Expand All @@ -73,8 +74,6 @@ export default function BorderWidthControl( {
const [ isLinked, setIsLinked ] = useState< boolean >( true );
const [ side, setSide ] = useState< SideValue | undefined >( undefined );

const headingId: string = `${ id }-heading`;

const linkedLabel: string = isLinked
? __( 'Unlink sides', 'flexible-table-block' )
: __( 'Link sides', 'flexible-table-block' );
Expand Down Expand Up @@ -136,7 +135,7 @@ export default function BorderWidthControl( {
};

return (
<BaseControl id={ id } className="ftb-border-width-control" help={ help }>
<BaseControl className="ftb-border-width-control" help={ help }>
<div aria-labelledby={ headingId } role="region">
<div className="ftb-border-width-control__header">
<Text id={ headingId }>{ label }</Text>
Expand Down
10 changes: 5 additions & 5 deletions src/controls/color-control.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,9 @@ import {
__experimentalText as Text,
} from '@wordpress/components';
import { store as blockEditorStore } from '@wordpress/block-editor';
import { useInstanceId } from '@wordpress/compose';

type Props = {
id: string;
label: string | ReactElement;
help?: string;
onChange: ( event: any ) => void;
Expand All @@ -36,13 +36,15 @@ type Props = {
};

export default function ColorControl( {
id,
label = __( 'Color', 'flexible-table-block' ),
help,
onChange,
colors: colorsProp = [],
value,
}: Props ) {
const instanceId = useInstanceId( ColorControl, 'ftb-color-control' );
const headingId: string = `${ instanceId }-heading`;

const colors = useSelect( ( select ) => {
const settings = select(
blockEditorStore
Expand All @@ -53,8 +55,6 @@ export default function ColorControl( {

const [ isPickerOpen, setIsPickerOpen ] = useState< boolean >( false );

const headingId: string = `${ id }-heading`;

const handleOnReset = () => onChange( undefined );

const handleOnChange = ( inputValue: Property.Color | undefined ) => onChange( inputValue );
Expand All @@ -65,7 +65,7 @@ export default function ColorControl( {

return (
<SlotFillProvider>
<BaseControl id={ id } className="ftb-color-control" help={ help }>
<BaseControl className="ftb-color-control" help={ help }>
<div aria-labelledby={ headingId } role="region">
<div className="ftb-color-control__header">
<Text id={ headingId }>{ label }</Text>
Expand Down
9 changes: 4 additions & 5 deletions src/controls/padding-control.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
__experimentalUnitControl as UnitControl,
__experimentalUseCustomUnits as useCustomUnits,
} from '@wordpress/components';
import { useInstanceId } from '@wordpress/compose';

/**
* Internal dependencies
Expand All @@ -33,7 +34,6 @@ const DEFAULT_VALUES = {
};

type Props = {
id: string;
label: string;
help?: string;
onChange: ( event: any ) => void;
Expand All @@ -49,14 +49,15 @@ type Props = {
type ValuesKey = keyof typeof DEFAULT_VALUES;

export default function PaddingControl( {
id,
label = __( 'Padding', 'flexible-table-block' ),
help,
onChange,
values: valuesProp,
hasIndicator = true,
}: Props ) {
const values = { ...DEFAULT_VALUES, ...valuesProp };
const instanceId = useInstanceId( PaddingControl, 'ftb-padding-control' );
const headingId: string = `${ instanceId }-heading`;

const isMixed: boolean = ! (
values.top === values.right &&
Expand All @@ -69,8 +70,6 @@ export default function PaddingControl( {
const [ isLinked, setIsLinked ] = useState< boolean >( true );
const [ side, setSide ] = useState< SideValue | undefined >( undefined );

const headingId: string = `${ id }-heading`;

const linkedLabel: string = isLinked
? __( 'Unlink sides', 'flexible-table-block' )
: __( 'Link sides', 'flexible-table-block' );
Expand Down Expand Up @@ -109,7 +108,7 @@ export default function PaddingControl( {
};

return (
<BaseControl id={ id } className="ftb-padding-control" help={ help }>
<BaseControl className="ftb-padding-control" help={ help }>
<div aria-labelledby={ headingId } role="region">
<div className="ftb-padding-control__header">
<Text id={ headingId }>{ label }</Text>
Expand Down
Loading

0 comments on commit ea8039d

Please sign in to comment.