Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Quality: Don't hardcode IDs of controls #215

Merged
merged 2 commits into from
Oct 20, 2024
Merged

Quality: Don't hardcode IDs of controls #215

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ee89794
Quality: Don't hardcode IDs of controls
t-hamano Oct 20, 2024
b3d5912
Fix e2e test
t-hamano Oct 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 4 additions & 5 deletions src/controls/border-color-control.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading