@wordpress/components 32.4.1-next.v.202603161435.0 → 32.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +18 -1
- package/build/alignment-matrix-control/cell.cjs +2 -2
- package/build/alignment-matrix-control/cell.cjs.map +1 -1
- package/build/alignment-matrix-control/index.cjs +2 -2
- package/build/alignment-matrix-control/index.cjs.map +1 -1
- package/build/angle-picker-control/angle-circle.cjs +2 -2
- package/build/angle-picker-control/angle-circle.cjs.map +1 -1
- package/build/combobox-control/index.cjs +5 -1
- package/build/combobox-control/index.cjs.map +2 -2
- package/build/custom-gradient-picker/index.cjs +9 -1
- package/build/custom-gradient-picker/index.cjs.map +2 -2
- package/build/form-token-field/token-input.cjs +2 -1
- package/build/form-token-field/token-input.cjs.map +2 -2
- package/build/radio-control/index.cjs +1 -0
- package/build/radio-control/index.cjs.map +2 -2
- package/build/toggle-group-control/toggle-group-control/as-button-group.cjs +1 -0
- package/build/toggle-group-control/toggle-group-control/as-button-group.cjs.map +2 -2
- package/build/toggle-group-control/toggle-group-control/component.cjs +15 -9
- package/build/toggle-group-control/toggle-group-control/component.cjs.map +3 -3
- package/build/toggle-group-control/toggle-group-control/styles.cjs +6 -32
- package/build/toggle-group-control/toggle-group-control/styles.cjs.map +3 -3
- package/build/validated-form-controls/control-with-error.cjs +26 -3
- package/build/validated-form-controls/control-with-error.cjs.map +2 -2
- package/build/validated-form-controls/validity-indicator.cjs +2 -0
- package/build/validated-form-controls/validity-indicator.cjs.map +2 -2
- package/build-module/alignment-matrix-control/cell.mjs +2 -2
- package/build-module/alignment-matrix-control/cell.mjs.map +1 -1
- package/build-module/alignment-matrix-control/index.mjs +2 -2
- package/build-module/alignment-matrix-control/index.mjs.map +1 -1
- package/build-module/angle-picker-control/angle-circle.mjs +2 -2
- package/build-module/angle-picker-control/angle-circle.mjs.map +1 -1
- package/build-module/combobox-control/index.mjs +5 -1
- package/build-module/combobox-control/index.mjs.map +2 -2
- package/build-module/custom-gradient-picker/index.mjs +10 -2
- package/build-module/custom-gradient-picker/index.mjs.map +2 -2
- package/build-module/form-token-field/token-input.mjs +2 -1
- package/build-module/form-token-field/token-input.mjs.map +2 -2
- package/build-module/radio-control/index.mjs +1 -0
- package/build-module/radio-control/index.mjs.map +2 -2
- package/build-module/toggle-group-control/toggle-group-control/as-button-group.mjs +1 -0
- package/build-module/toggle-group-control/toggle-group-control/as-button-group.mjs.map +2 -2
- package/build-module/toggle-group-control/toggle-group-control/component.mjs +17 -11
- package/build-module/toggle-group-control/toggle-group-control/component.mjs.map +2 -2
- package/build-module/toggle-group-control/toggle-group-control/styles.mjs +6 -21
- package/build-module/toggle-group-control/toggle-group-control/styles.mjs.map +2 -2
- package/build-module/validated-form-controls/control-with-error.mjs +27 -4
- package/build-module/validated-form-controls/control-with-error.mjs.map +2 -2
- package/build-module/validated-form-controls/validity-indicator.mjs +2 -0
- package/build-module/validated-form-controls/validity-indicator.mjs.map +2 -2
- package/build-style/style-rtl.css +14 -11
- package/build-style/style.css +14 -11
- package/build-types/alignment-matrix-control/stories/index.story.d.ts +1 -1
- package/build-types/alignment-matrix-control/stories/index.story.d.ts.map +1 -1
- package/build-types/angle-picker-control/stories/index.story.d.ts +1 -1
- package/build-types/animate/stories/index.story.d.ts +7 -7
- package/build-types/animate/stories/index.story.d.ts.map +1 -1
- package/build-types/base-control/stories/index.story.d.ts +1 -1
- package/build-types/border-box-control/stories/index.story.d.ts +1 -1
- package/build-types/border-control/stories/index.story.d.ts +5 -5
- package/build-types/box-control/stories/index.story.d.ts +7 -7
- package/build-types/box-control/stories/index.story.d.ts.map +1 -1
- package/build-types/button/stories/e2e/index.story.d.ts +1 -1
- package/build-types/button/stories/e2e/index.story.d.ts.map +1 -1
- package/build-types/button/stories/index.story.d.ts +7 -7
- package/build-types/button/stories/index.story.d.ts.map +1 -1
- package/build-types/circular-option-picker/stories/index.story.d.ts +5 -5
- package/build-types/circular-option-picker/stories/index.story.d.ts.map +1 -1
- package/build-types/combobox-control/index.d.ts.map +1 -1
- package/build-types/combobox-control/stories/index.story.d.ts +4 -4
- package/build-types/combobox-control/stories/index.story.d.ts.map +1 -1
- package/build-types/confirm-dialog/stories/index.story.d.ts +2 -2
- package/build-types/confirm-dialog/stories/index.story.d.ts.map +1 -1
- package/build-types/custom-gradient-picker/index.d.ts.map +1 -1
- package/build-types/custom-gradient-picker/stories/index.story.d.ts +1 -1
- package/build-types/custom-gradient-picker/stories/index.story.d.ts.map +1 -1
- package/build-types/custom-gradient-picker/test/index.d.ts +2 -0
- package/build-types/custom-gradient-picker/test/index.d.ts.map +1 -0
- package/build-types/custom-select-control/stories/index.story.d.ts +3 -3
- package/build-types/custom-select-control/stories/index.story.d.ts.map +1 -1
- package/build-types/custom-select-control-v2/stories/index.story.d.ts +3 -3
- package/build-types/date-time/stories/time.story.d.ts +1 -1
- package/build-types/date-time/stories/time.story.d.ts.map +1 -1
- package/build-types/drop-zone/stories/index.story.d.ts +1 -1
- package/build-types/drop-zone/stories/index.story.d.ts.map +1 -1
- package/build-types/duotone-picker/stories/duotone-picker.story.d.ts +1 -1
- package/build-types/duotone-picker/stories/duotone-picker.story.d.ts.map +1 -1
- package/build-types/duotone-picker/stories/duotone-swatch.story.d.ts +3 -3
- package/build-types/duotone-picker/stories/duotone-swatch.story.d.ts.map +1 -1
- package/build-types/focal-point-picker/stories/index.story.d.ts +4 -4
- package/build-types/form-file-upload/stories/index.story.d.ts +5 -5
- package/build-types/form-file-upload/stories/index.story.d.ts.map +1 -1
- package/build-types/form-token-field/token-input.d.ts.map +1 -1
- package/build-types/guide/stories/index.story.d.ts +1 -1
- package/build-types/guide/stories/index.story.d.ts.map +1 -1
- package/build-types/icon/stories/index.story.d.ts +4 -4
- package/build-types/icon/stories/index.story.d.ts.map +1 -1
- package/build-types/input-control/stories/index.story.d.ts +7 -7
- package/build-types/input-control/stories/index.story.d.ts.map +1 -1
- package/build-types/keyboard-shortcuts/stories/index.story.d.ts +1 -1
- package/build-types/keyboard-shortcuts/stories/index.story.d.ts.map +1 -1
- package/build-types/menu-group/stories/index.story.d.ts +1 -1
- package/build-types/menu-group/stories/index.story.d.ts.map +1 -1
- package/build-types/menu-item/stories/index.story.d.ts +4 -4
- package/build-types/navigation/stories/index.story.d.ts +6 -6
- package/build-types/navigation/stories/index.story.d.ts.map +1 -1
- package/build-types/notice/stories/index.story.d.ts +5 -5
- package/build-types/notice/stories/index.story.d.ts.map +1 -1
- package/build-types/number-control/stories/index.story.d.ts +1 -1
- package/build-types/palette-edit/stories/index.story.d.ts +2 -2
- package/build-types/palette-edit/stories/index.story.d.ts.map +1 -1
- package/build-types/progress-bar/stories/index.story.d.ts +1 -1
- package/build-types/progress-bar/stories/index.story.d.ts.map +1 -1
- package/build-types/query-controls/stories/index.story.d.ts +1 -1
- package/build-types/query-controls/stories/index.story.d.ts.map +1 -1
- package/build-types/radio-control/index.d.ts.map +1 -1
- package/build-types/resizable-box/stories/index.story.d.ts +2 -2
- package/build-types/responsive-wrapper/stories/index.story.d.ts +1 -1
- package/build-types/responsive-wrapper/stories/index.story.d.ts.map +1 -1
- package/build-types/sandbox/stories/index.story.d.ts +1 -1
- package/build-types/sandbox/stories/index.story.d.ts.map +1 -1
- package/build-types/search-control/stories/index.story.d.ts +1 -1
- package/build-types/select-control/stories/index.story.d.ts +5 -5
- package/build-types/shortcut/stories/index.story.d.ts +1 -1
- package/build-types/shortcut/stories/index.story.d.ts.map +1 -1
- package/build-types/tab-panel/stories/index.story.d.ts +4 -4
- package/build-types/tab-panel/stories/index.story.d.ts.map +1 -1
- package/build-types/tabs/stories/index.story.d.ts +7 -7
- package/build-types/tabs/stories/index.story.d.ts.map +1 -1
- package/build-types/text/stories/index.story.d.ts +3 -3
- package/build-types/theme/stories/index.story.d.ts +1 -1
- package/build-types/toggle-control/stories/index.story.d.ts +2 -2
- package/build-types/toggle-group-control/stories/index.story.d.ts.map +1 -1
- package/build-types/toggle-group-control/toggle-group-control/as-button-group.d.ts.map +1 -1
- package/build-types/toggle-group-control/toggle-group-control/component.d.ts.map +1 -1
- package/build-types/toggle-group-control/toggle-group-control/styles.d.ts +0 -4
- package/build-types/toggle-group-control/toggle-group-control/styles.d.ts.map +1 -1
- package/build-types/toolbar/stories/index.story.d.ts +3 -3
- package/build-types/toolbar/stories/index.story.d.ts.map +1 -1
- package/build-types/tooltip/stories/index.story.d.ts +1 -1
- package/build-types/tooltip/stories/index.story.d.ts.map +1 -1
- package/build-types/tree-grid/stories/index.story.d.ts +1 -1
- package/build-types/tree-grid/stories/index.story.d.ts.map +1 -1
- package/build-types/tree-select/stories/index.story.d.ts +1 -1
- package/build-types/tree-select/stories/index.story.d.ts.map +1 -1
- package/build-types/v-stack/stories/index.story.d.ts +1 -1
- package/build-types/validated-form-controls/control-with-error.d.ts.map +1 -1
- package/build-types/validated-form-controls/test/checkbox-control.d.ts +2 -0
- package/build-types/validated-form-controls/test/checkbox-control.d.ts.map +1 -0
- package/build-types/validated-form-controls/test/combobox-control.d.ts +2 -0
- package/build-types/validated-form-controls/test/combobox-control.d.ts.map +1 -0
- package/build-types/validated-form-controls/test/custom-select-control.d.ts +2 -0
- package/build-types/validated-form-controls/test/custom-select-control.d.ts.map +1 -0
- package/build-types/validated-form-controls/test/form-token-field.d.ts +2 -0
- package/build-types/validated-form-controls/test/form-token-field.d.ts.map +1 -0
- package/build-types/validated-form-controls/test/input-control.d.ts +2 -0
- package/build-types/validated-form-controls/test/input-control.d.ts.map +1 -0
- package/build-types/validated-form-controls/test/number-control.d.ts +2 -0
- package/build-types/validated-form-controls/test/number-control.d.ts.map +1 -0
- package/build-types/validated-form-controls/test/radio-control.d.ts +2 -0
- package/build-types/validated-form-controls/test/radio-control.d.ts.map +1 -0
- package/build-types/validated-form-controls/test/range-control.d.ts +2 -0
- package/build-types/validated-form-controls/test/range-control.d.ts.map +1 -0
- package/build-types/validated-form-controls/test/select-control.d.ts +2 -0
- package/build-types/validated-form-controls/test/select-control.d.ts.map +1 -0
- package/build-types/validated-form-controls/test/text-control.d.ts +2 -0
- package/build-types/validated-form-controls/test/text-control.d.ts.map +1 -0
- package/build-types/validated-form-controls/test/textarea-control.d.ts +2 -0
- package/build-types/validated-form-controls/test/textarea-control.d.ts.map +1 -0
- package/build-types/validated-form-controls/test/toggle-control.d.ts +2 -0
- package/build-types/validated-form-controls/test/toggle-control.d.ts.map +1 -0
- package/build-types/validated-form-controls/test/toggle-group-control.d.ts +2 -0
- package/build-types/validated-form-controls/test/toggle-group-control.d.ts.map +1 -0
- package/build-types/validated-form-controls/validity-indicator.d.ts +2 -1
- package/build-types/validated-form-controls/validity-indicator.d.ts.map +1 -1
- package/package.json +24 -24
- package/src/button/style.scss +16 -5
- package/src/combobox-control/index.tsx +6 -0
- package/src/combobox-control/stories/index.story.tsx +3 -2
- package/src/combobox-control/test/index.tsx +16 -9
- package/src/custom-gradient-picker/index.tsx +15 -4
- package/src/custom-gradient-picker/test/index.tsx +81 -0
- package/src/form-token-field/token-input.tsx +7 -1
- package/src/guide/style.scss +3 -0
- package/src/modal/style.scss +4 -7
- package/src/radio-control/index.tsx +1 -0
- package/src/radio-control/test/index.tsx +5 -5
- package/src/snackbar/style.scss +1 -1
- package/src/toggle-group-control/stories/index.story.tsx +1 -0
- package/src/toggle-group-control/test/__snapshots__/index.tsx.snap +124 -164
- package/src/toggle-group-control/test/index.tsx +54 -0
- package/src/toggle-group-control/toggle-group-control/as-button-group.tsx +1 -0
- package/src/toggle-group-control/toggle-group-control/component.tsx +13 -8
- package/src/toggle-group-control/toggle-group-control/styles.ts +0 -6
- package/src/validated-form-controls/control-with-error.tsx +44 -4
- package/src/validated-form-controls/test/checkbox-control.tsx +49 -0
- package/src/validated-form-controls/test/combobox-control.tsx +61 -0
- package/src/validated-form-controls/test/control-with-error.tsx +182 -1
- package/src/validated-form-controls/test/custom-select-control.tsx +60 -0
- package/src/validated-form-controls/test/form-token-field.tsx +52 -0
- package/src/validated-form-controls/test/input-control.tsx +42 -0
- package/src/validated-form-controls/test/number-control.tsx +44 -0
- package/src/validated-form-controls/test/radio-control.tsx +61 -0
- package/src/validated-form-controls/test/range-control.tsx +73 -0
- package/src/validated-form-controls/test/select-control.tsx +57 -0
- package/src/validated-form-controls/test/text-control.tsx +49 -0
- package/src/validated-form-controls/test/textarea-control.tsx +51 -0
- package/src/validated-form-controls/test/toggle-control.tsx +49 -0
- package/src/validated-form-controls/test/toggle-group-control.tsx +28 -0
- package/src/validated-form-controls/validity-indicator.tsx +3 -0
|
@@ -8,7 +8,7 @@ import type { Meta, StoryFn } from '@storybook/react-vite';
|
|
|
8
8
|
import Theme from '../index';
|
|
9
9
|
declare const meta: Meta<typeof Theme>;
|
|
10
10
|
export default meta;
|
|
11
|
-
export declare const Default: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react
|
|
11
|
+
export declare const Default: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("../types").ThemeInputValues & {
|
|
12
12
|
children?: import("react").ReactNode;
|
|
13
13
|
} & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children" | "as" | keyof import("../types").ThemeInputValues> & {
|
|
14
14
|
as?: keyof import("react").JSX.IntrinsicElements | undefined;
|
|
@@ -8,12 +8,12 @@ import type { Meta } from '@storybook/react-vite';
|
|
|
8
8
|
import ToggleControl from '..';
|
|
9
9
|
declare const meta: Meta<typeof ToggleControl>;
|
|
10
10
|
export default meta;
|
|
11
|
-
export declare const Default: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react
|
|
11
|
+
export declare const Default: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Pick<import("../../form-toggle/types").FormToggleProps, "disabled" | "checked"> & Pick<import("../../base-control/types").BaseControlProps, "className" | "__nextHasNoMarginBottom"> & {
|
|
12
12
|
help?: import("react").ReactNode | ((checked: boolean) => import("react").ReactNode);
|
|
13
13
|
label: import("react").ReactNode;
|
|
14
14
|
onChange: (value: boolean) => void;
|
|
15
15
|
} & Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "onChange" | "label" | "help" | "disabled" | "children" | "as" | "className" | "checked" | "__nextHasNoMarginBottom"> & import("react").RefAttributes<HTMLInputElement>>;
|
|
16
|
-
export declare const WithHelpText: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react
|
|
16
|
+
export declare const WithHelpText: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Pick<import("../../form-toggle/types").FormToggleProps, "disabled" | "checked"> & Pick<import("../../base-control/types").BaseControlProps, "className" | "__nextHasNoMarginBottom"> & {
|
|
17
17
|
help?: import("react").ReactNode | ((checked: boolean) => import("react").ReactNode);
|
|
18
18
|
label: import("react").ReactNode;
|
|
19
19
|
onChange: (value: boolean) => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/toggle-group-control/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAQ3D;;GAEG;AACH,OAAO,EACN,kBAAkB,EAGlB,MAAM,UAAU,CAAC;AAOlB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,kBAAkB,CAoB1C,CAAC;AACF,eAAe,IAAI,CAAC;AAoCpB,eAAO,MAAM,OAAO,EAAE,OAAO,CAAE,OAAO,kBAAkB,CAEvD,CAAC;
|
|
1
|
+
{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/toggle-group-control/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAQ3D;;GAEG;AACH,OAAO,EACN,kBAAkB,EAGlB,MAAM,UAAU,CAAC;AAOlB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,kBAAkB,CAoB1C,CAAC;AACF,eAAe,IAAI,CAAC;AAoCpB,eAAO,MAAM,OAAO,EAAE,OAAO,CAAE,OAAO,kBAAkB,CAEvD,CAAC;AAaF;;;;GAIG;AACH,eAAO,MAAM,WAAW,EAAE,OAAO,CAAE,OAAO,kBAAkB,CAE3D,CAAC;AAmBF;;;GAGG;AACH,eAAO,MAAM,SAAS,EAAE,OAAO,CAAE,OAAO,kBAAkB,CAEzD,CAAC;AAUF;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,OAAO,CAAE,OAAO,kBAAkB,CAE5D,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"as-button-group.d.ts","sourceRoot":"","sources":["../../../src/toggle-group-control/toggle-group-control/as-button-group.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAEX,8BAA8B,EAC9B,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"as-button-group.d.ts","sourceRoot":"","sources":["../../../src/toggle-group-control/toggle-group-control/as-button-group.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAEX,8BAA8B,EAC9B,MAAM,UAAU,CAAC;AA4ElB,eAAO,MAAM,+BAA+B,mfAE3C,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/toggle-group-control/toggle-group-control/component.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/toggle-group-control/toggle-group-control/component.tsx"],"names":[],"mappings":"AAyHA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;8CAG9B,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
|
|
@@ -4,8 +4,4 @@ export declare const toggleGroupControl: ({ isBlock, isDeselectable, size, }: Pi
|
|
|
4
4
|
}) => import("@emotion/utils").SerializedStyles;
|
|
5
5
|
export declare const toggleGroupControlSize: (size: NonNullable<ToggleGroupControlProps["size"]>) => import("@emotion/utils").SerializedStyles;
|
|
6
6
|
export declare const block: import("@emotion/utils").SerializedStyles;
|
|
7
|
-
export declare const VisualLabelWrapper: import("@emotion/styled").StyledComponent<{
|
|
8
|
-
theme?: import("@emotion/react").Theme;
|
|
9
|
-
as?: React.ElementType;
|
|
10
|
-
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
11
7
|
//# sourceMappingURL=styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/toggle-group-control/toggle-group-control/styles.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/toggle-group-control/toggle-group-control/styles.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC;AAExD,eAAO,MAAM,kBAAkB,GAAK,oCAIjC,IAAI,CAAE,uBAAuB,EAAE,SAAS,GAAG,gBAAgB,CAAE,GAAG;IAClE,IAAI,EAAE,WAAW,CAAE,uBAAuB,CAAE,MAAM,CAAE,CAAE,CAAC;CACvD,8CA0CA,CAAC;AAuBF,eAAO,MAAM,sBAAsB,GAClC,MAAM,WAAW,CAAE,uBAAuB,CAAE,MAAM,CAAE,CAAE,8CAYtD,CAAC;AAEF,eAAO,MAAM,KAAK,2CAGjB,CAAC"}
|
|
@@ -8,11 +8,11 @@ import type { Meta } from '@storybook/react-vite';
|
|
|
8
8
|
import { Toolbar } from '..';
|
|
9
9
|
declare const meta: Meta<typeof Toolbar>;
|
|
10
10
|
export default meta;
|
|
11
|
-
export declare const Default: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react
|
|
12
|
-
export declare const WithoutGroup: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react
|
|
11
|
+
export declare const Default: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("../toolbar/types").ToolbarProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "as" | keyof import("../toolbar/types").ToolbarProps> & import("react").RefAttributes<any>>;
|
|
12
|
+
export declare const WithoutGroup: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("../toolbar/types").ToolbarProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "as" | keyof import("../toolbar/types").ToolbarProps> & import("react").RefAttributes<any>>;
|
|
13
13
|
/**
|
|
14
14
|
* Set the variant to `unstyled` to remove default border styles.
|
|
15
15
|
* Otherwise, leave it as `undefined` for default styles.
|
|
16
16
|
*/
|
|
17
|
-
export declare const Unstyled: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react
|
|
17
|
+
export declare const Unstyled: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("../toolbar/types").ToolbarProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "as" | keyof import("../toolbar/types").ToolbarProps> & import("react").RefAttributes<any>>;
|
|
18
18
|
//# sourceMappingURL=index.story.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/toolbar/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,uBAAuB,CAAC;AAwB3D;;GAEG;AACH,OAAO,EACN,OAAO,EAKP,MAAM,IAAI,CAAC;AAGZ,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,OAAO,CAwB/B,CAAC;AAEF,eAAe,IAAI,CAAC;AAgBpB,eAAO,MAAM,OAAO,
|
|
1
|
+
{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/toolbar/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,uBAAuB,CAAC;AAwB3D;;GAEG;AACH,OAAO,EACN,OAAO,EAKP,MAAM,IAAI,CAAC;AAGZ,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,OAAO,CAwB/B,CAAC;AAEF,eAAe,IAAI,CAAC;AAgBpB,eAAO,MAAM,OAAO,wVAAsB,CAAC;AA8F3C,eAAO,MAAM,YAAY,wVAAsB,CAAC;AAahD;;;GAGG;AAEH,eAAO,MAAM,QAAQ,wVAAsB,CAAC"}
|
|
@@ -9,7 +9,7 @@ import Tooltip from '..';
|
|
|
9
9
|
declare const meta: Meta<typeof Tooltip>;
|
|
10
10
|
export default meta;
|
|
11
11
|
export declare const Default: StoryFn<typeof Tooltip>;
|
|
12
|
-
export declare const KeyboardShortcut: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react
|
|
12
|
+
export declare const KeyboardShortcut: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("../types").TooltipProps & import("react").RefAttributes<any>>;
|
|
13
13
|
/**
|
|
14
14
|
* In case one or more `Tooltip` components are rendered inside another
|
|
15
15
|
* `Tooltip` component, only the tooltip associated to the outermost `Tooltip`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/tooltip/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAO3D;;GAEG;AACH,OAAO,OAAO,MAAM,IAAI,CAAC;AAGzB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,OAAO,CA2B/B,CAAC;AACF,eAAe,IAAI,CAAC;AAMpB,eAAO,MAAM,OAAO,EAAE,OAAO,CAAE,OAAO,OAAO,CAAwB,CAAC;AAUtE,eAAO,MAAM,gBAAgB,
|
|
1
|
+
{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/tooltip/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAO3D;;GAEG;AACH,OAAO,OAAO,MAAM,IAAI,CAAC;AAGzB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,OAAO,CA2B/B,CAAC;AACF,eAAe,IAAI,CAAC;AAMpB,eAAO,MAAM,OAAO,EAAE,OAAO,CAAE,OAAO,OAAO,CAAwB,CAAC;AAUtE,eAAO,MAAM,gBAAgB,mKAAsB,CAAC;AAapD;;;;;;GAMG;AACH,eAAO,MAAM,MAAM,EAAE,OAAO,CAAE,OAAO,OAAO,CAAwB,CAAC"}
|
|
@@ -8,5 +8,5 @@ import type { Meta } from '@storybook/react-vite';
|
|
|
8
8
|
import TreeGrid from '..';
|
|
9
9
|
declare const meta: Meta<typeof TreeGrid>;
|
|
10
10
|
export default meta;
|
|
11
|
-
export declare const Default: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react
|
|
11
|
+
export declare const Default: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("../types").TreeGridProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref">, "as" | keyof import("../types").TreeGridProps> & import("react").RefAttributes<HTMLTableElement>>;
|
|
12
12
|
//# sourceMappingURL=index.story.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/tree-grid/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,uBAAuB,CAAC;AAQ3D;;GAEG;AACH,OAAO,QAAuC,MAAM,IAAI,CAAC;AAIzD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,QAAQ,CAqBhC,CAAC;AACF,eAAe,IAAI,CAAC;AAqHpB,eAAO,MAAM,OAAO,
|
|
1
|
+
{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/tree-grid/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,uBAAuB,CAAC;AAQ3D;;GAEG;AACH,OAAO,QAAuC,MAAM,IAAI,CAAC;AAIzD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,QAAQ,CAqBhC,CAAC;AACF,eAAe,IAAI,CAAC;AAqHpB,eAAO,MAAM,OAAO,gWAAsB,CAAC"}
|
|
@@ -8,5 +8,5 @@ import type { Meta } from '@storybook/react-vite';
|
|
|
8
8
|
import TreeSelect from '../';
|
|
9
9
|
declare const meta: Meta<typeof TreeSelect>;
|
|
10
10
|
export default meta;
|
|
11
|
-
export declare const Default: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react
|
|
11
|
+
export declare const Default: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("../types").TreeSelectProps>;
|
|
12
12
|
//# sourceMappingURL=index.story.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/tree-select/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,uBAAuB,CAAC;AAO3D;;GAEG;AACH,OAAO,UAAU,MAAM,KAAK,CAAC;AAE7B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,UAAU,CAqBlC,CAAC;AAEF,eAAe,IAAI,CAAC;AAgBpB,eAAO,MAAM,OAAO,
|
|
1
|
+
{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/tree-select/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,uBAAuB,CAAC;AAO3D;;GAEG;AACH,OAAO,UAAU,MAAM,KAAK,CAAC;AAE7B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,UAAU,CAqBlC,CAAC;AAEF,eAAe,IAAI,CAAC;AAgBpB,eAAO,MAAM,OAAO,iIAAiC,CAAC"}
|
|
@@ -5,7 +5,7 @@ import type { Meta } from '@storybook/react-vite';
|
|
|
5
5
|
import { VStack } from '..';
|
|
6
6
|
declare const meta: Meta<typeof VStack>;
|
|
7
7
|
export default meta;
|
|
8
|
-
export declare const Default: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react
|
|
8
|
+
export declare const Default: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Omit<import("../../h-stack/types").Props, "spacing" | "alignment"> & {
|
|
9
9
|
alignment?: import("../../h-stack/types").HStackAlignment | import("react").CSSProperties["alignItems"];
|
|
10
10
|
spacing?: import("react").CSSProperties["width"];
|
|
11
11
|
} & import("react").RefAttributes<any> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "direction" | "wrap" | "expanded" | "justify" | "children" | "as" | "spacing" | keyof import("react").RefAttributes<any> | "isReversed" | "alignment"> & {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"control-with-error.d.ts","sourceRoot":"","sources":["../../src/validated-form-controls/control-with-error.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"control-with-error.d.ts","sourceRoot":"","sources":["../../src/validated-form-controls/control-with-error.tsx"],"names":[],"mappings":"AAYA;;GAEG;AACH,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AA4BhE;;;;;;;GAOG;AACH,KAAK,cAAc,GAChB,mBAAmB,GACnB,gBAAgB,GAChB,iBAAiB,GACjB,mBAAmB,CAAC;AAiQvB,eAAO,MAAM,gBAAgB;IAvP3B;;OAEG;eACQ,OAAO;IAClB;;OAEG;uBACgB,OAAO;qBACT,qBAAqB,CAAE,gBAAgB,CAAE;IAC1D;;OAEG;uBACgB,MAAM,cAAc,GAAG,IAAI,GAAG,SAAS;IAC1D;;;;;;;OAOG;;kDAmOoE,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"checkbox-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/test/checkbox-control.tsx"],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"combobox-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/test/combobox-control.tsx"],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"custom-select-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/test/custom-select-control.tsx"],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"form-token-field.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/test/form-token-field.tsx"],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"input-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/test/input-control.tsx"],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"number-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/test/number-control.tsx"],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"radio-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/test/radio-control.tsx"],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"range-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/test/range-control.tsx"],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"select-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/test/select-control.tsx"],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"text-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/test/text-control.tsx"],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"textarea-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/test/textarea-control.tsx"],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"toggle-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/test/toggle-control.tsx"],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"toggle-group-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/test/toggle-group-control.tsx"],"names":[],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"validity-indicator.d.ts","sourceRoot":"","sources":["../../src/validated-form-controls/validity-indicator.tsx"],"names":[],"mappings":"AAgBA,wBAAgB,iBAAiB,CAAE,EAClC,IAAI,EACJ,OAAO,GACP,EAAE;IACF,IAAI,EAAE,YAAY,GAAG,OAAO,GAAG,SAAS,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB,+
|
|
1
|
+
{"version":3,"file":"validity-indicator.d.ts","sourceRoot":"","sources":["../../src/validated-form-controls/validity-indicator.tsx"],"names":[],"mappings":"AAgBA,wBAAgB,iBAAiB,CAAE,EAClC,EAAE,EACF,IAAI,EACJ,OAAO,GACP,EAAE;IACF,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,YAAY,GAAG,OAAO,GAAG,SAAS,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB,+BA0BA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wordpress/components",
|
|
3
|
-
"version": "32.
|
|
3
|
+
"version": "32.5.0",
|
|
4
4
|
"description": "UI components for WordPress.",
|
|
5
5
|
"author": "The WordPress Contributors",
|
|
6
6
|
"license": "GPL-2.0-or-later",
|
|
@@ -64,24 +64,24 @@
|
|
|
64
64
|
"@types/highlight-words-core": "1.2.1",
|
|
65
65
|
"@types/react": "^18.3.27",
|
|
66
66
|
"@use-gesture/react": "^10.3.1",
|
|
67
|
-
"@wordpress/a11y": "^4.
|
|
68
|
-
"@wordpress/base-styles": "^6.
|
|
69
|
-
"@wordpress/compose": "^7.
|
|
70
|
-
"@wordpress/date": "^5.
|
|
71
|
-
"@wordpress/deprecated": "^4.
|
|
72
|
-
"@wordpress/dom": "^4.
|
|
73
|
-
"@wordpress/element": "^6.
|
|
74
|
-
"@wordpress/escape-html": "^3.
|
|
75
|
-
"@wordpress/hooks": "^4.
|
|
76
|
-
"@wordpress/html-entities": "^4.
|
|
77
|
-
"@wordpress/i18n": "^6.
|
|
78
|
-
"@wordpress/icons": "^12.
|
|
79
|
-
"@wordpress/is-shallow-equal": "^5.
|
|
80
|
-
"@wordpress/keycodes": "^4.
|
|
81
|
-
"@wordpress/primitives": "^4.
|
|
82
|
-
"@wordpress/private-apis": "^1.
|
|
83
|
-
"@wordpress/rich-text": "^7.
|
|
84
|
-
"@wordpress/warning": "^3.
|
|
67
|
+
"@wordpress/a11y": "^4.43.0",
|
|
68
|
+
"@wordpress/base-styles": "^6.19.0",
|
|
69
|
+
"@wordpress/compose": "^7.43.0",
|
|
70
|
+
"@wordpress/date": "^5.43.0",
|
|
71
|
+
"@wordpress/deprecated": "^4.43.0",
|
|
72
|
+
"@wordpress/dom": "^4.43.0",
|
|
73
|
+
"@wordpress/element": "^6.43.0",
|
|
74
|
+
"@wordpress/escape-html": "^3.43.0",
|
|
75
|
+
"@wordpress/hooks": "^4.43.0",
|
|
76
|
+
"@wordpress/html-entities": "^4.43.0",
|
|
77
|
+
"@wordpress/i18n": "^6.16.0",
|
|
78
|
+
"@wordpress/icons": "^12.1.0",
|
|
79
|
+
"@wordpress/is-shallow-equal": "^5.43.0",
|
|
80
|
+
"@wordpress/keycodes": "^4.43.0",
|
|
81
|
+
"@wordpress/primitives": "^4.43.0",
|
|
82
|
+
"@wordpress/private-apis": "^1.43.0",
|
|
83
|
+
"@wordpress/rich-text": "^7.43.0",
|
|
84
|
+
"@wordpress/warning": "^3.43.0",
|
|
85
85
|
"change-case": "^4.1.2",
|
|
86
86
|
"clsx": "^2.1.1",
|
|
87
87
|
"colord": "^2.7.0",
|
|
@@ -103,13 +103,13 @@
|
|
|
103
103
|
},
|
|
104
104
|
"devDependencies": {
|
|
105
105
|
"@ariakit/test": "^0.4.13",
|
|
106
|
-
"@storybook/addon-docs": "^10.
|
|
107
|
-
"@storybook/react-vite": "^10.
|
|
106
|
+
"@storybook/addon-docs": "^10.2.8",
|
|
107
|
+
"@storybook/react-vite": "^10.2.8",
|
|
108
108
|
"@testing-library/jest-dom": "^6.9.1",
|
|
109
109
|
"@types/jest": "^29.5.14",
|
|
110
|
-
"@wordpress/jest-console": "^8.
|
|
110
|
+
"@wordpress/jest-console": "^8.43.0",
|
|
111
111
|
"snapshot-diff": "^0.10.0",
|
|
112
|
-
"storybook": "^10.
|
|
112
|
+
"storybook": "^10.2.8",
|
|
113
113
|
"timezone-mock": "^1.3.6"
|
|
114
114
|
},
|
|
115
115
|
"peerDependencies": {
|
|
@@ -119,5 +119,5 @@
|
|
|
119
119
|
"publishConfig": {
|
|
120
120
|
"access": "public"
|
|
121
121
|
},
|
|
122
|
-
"gitHead": "
|
|
122
|
+
"gitHead": "2cea90674d11aa521ec3f71652fb3a6a4c383969"
|
|
123
123
|
}
|
package/src/button/style.scss
CHANGED
|
@@ -48,11 +48,6 @@
|
|
|
48
48
|
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
|
|
49
49
|
}
|
|
50
50
|
|
|
51
|
-
// Windows High Contrast mode will show this outline, but not the box-shadow.
|
|
52
|
-
&:focus {
|
|
53
|
-
outline: 3px solid transparent;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
51
|
/**
|
|
57
52
|
* Primary button style.
|
|
58
53
|
*/
|
|
@@ -276,6 +271,14 @@
|
|
|
276
271
|
}
|
|
277
272
|
}
|
|
278
273
|
|
|
274
|
+
// Windows High Contrast mode will show this outline, but not the box-shadow.
|
|
275
|
+
// This rule is placed after variant outline declarations (e.g. is-primary,
|
|
276
|
+
// is-secondary, is-tertiary) to ensure it wins by source order at the same
|
|
277
|
+
// specificity, while not using `:not(:active)` to avoid outline flicker.
|
|
278
|
+
&:focus {
|
|
279
|
+
outline: 3px solid transparent;
|
|
280
|
+
}
|
|
281
|
+
|
|
279
282
|
&:not(:disabled, [aria-disabled="true"]):active {
|
|
280
283
|
color: $components-color-foreground;
|
|
281
284
|
}
|
|
@@ -388,6 +391,14 @@
|
|
|
388
391
|
}
|
|
389
392
|
}
|
|
390
393
|
|
|
394
|
+
// Hide focus outline on :active to provide click feedback in forced-colors
|
|
395
|
+
// mode, where box-shadow is not visible. Higher specificity (0,3,0)
|
|
396
|
+
// ensures this wins over variant outline declarations. Placed after
|
|
397
|
+
// .is-pressed to also win by source order at equal specificity (0,3,0).
|
|
398
|
+
&:focus:active {
|
|
399
|
+
outline: none;
|
|
400
|
+
}
|
|
401
|
+
|
|
391
402
|
svg {
|
|
392
403
|
fill: currentColor;
|
|
393
404
|
outline: none;
|
|
@@ -358,6 +358,12 @@ function ComboboxControl( props: ComboboxControlProps ) {
|
|
|
358
358
|
matchingSuggestions
|
|
359
359
|
) }
|
|
360
360
|
onChange={ onInputChange }
|
|
361
|
+
aria-describedby={
|
|
362
|
+
help
|
|
363
|
+
? // TODO: Refactor `TokenInput` to not use hardcoded IDs.
|
|
364
|
+
`components-form-token-input-${ instanceId }__help`
|
|
365
|
+
: undefined
|
|
366
|
+
}
|
|
361
367
|
/>
|
|
362
368
|
</FlexBlock>
|
|
363
369
|
{ isLoading && <Spinner /> }
|
|
@@ -88,8 +88,9 @@ const Template: StoryFn< typeof ComboboxControl > = ( {
|
|
|
88
88
|
export const Default = Template.bind( {} );
|
|
89
89
|
Default.args = {
|
|
90
90
|
__next40pxDefaultSize: true,
|
|
91
|
-
label: '
|
|
91
|
+
label: 'Country',
|
|
92
92
|
options: countryOptions,
|
|
93
|
+
help: 'Help text to describe the control.',
|
|
93
94
|
};
|
|
94
95
|
|
|
95
96
|
/**
|
|
@@ -100,7 +101,7 @@ Default.args = {
|
|
|
100
101
|
export const WithCustomRenderItem = Template.bind( {} );
|
|
101
102
|
WithCustomRenderItem.args = {
|
|
102
103
|
...Default.args,
|
|
103
|
-
label: '
|
|
104
|
+
label: 'Author',
|
|
104
105
|
options: [
|
|
105
106
|
{
|
|
106
107
|
value: 'parsley',
|
|
@@ -92,8 +92,8 @@ describe.each( [
|
|
|
92
92
|
render(
|
|
93
93
|
<Component options={ timezones } label={ defaultLabelText } />
|
|
94
94
|
);
|
|
95
|
-
|
|
96
|
-
expect(
|
|
95
|
+
expect( getLabel( defaultLabelText ) ).toBeVisible();
|
|
96
|
+
expect( getInput( defaultLabelText ) ).toBeVisible();
|
|
97
97
|
} );
|
|
98
98
|
|
|
99
99
|
it( 'should render with hidden label', () => {
|
|
@@ -104,13 +104,7 @@ describe.each( [
|
|
|
104
104
|
hideLabelFromVision
|
|
105
105
|
/>
|
|
106
106
|
);
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
expect( label ).toBeInTheDocument();
|
|
110
|
-
expect( label ).toHaveAttribute(
|
|
111
|
-
'data-wp-component',
|
|
112
|
-
'VisuallyHidden'
|
|
113
|
-
);
|
|
107
|
+
expect( getInput( defaultLabelText ) ).toBeVisible();
|
|
114
108
|
} );
|
|
115
109
|
|
|
116
110
|
it( 'should render with the correct options', async () => {
|
|
@@ -451,6 +445,19 @@ describe.each( [
|
|
|
451
445
|
expect( input ).toHaveFocus();
|
|
452
446
|
} );
|
|
453
447
|
|
|
448
|
+
it( 'should associate the `help` text with the combobox accessibly', () => {
|
|
449
|
+
render(
|
|
450
|
+
<Component
|
|
451
|
+
options={ timezones }
|
|
452
|
+
label={ defaultLabelText }
|
|
453
|
+
help="Help text"
|
|
454
|
+
/>
|
|
455
|
+
);
|
|
456
|
+
expect( getInput( defaultLabelText ) ).toHaveAccessibleDescription(
|
|
457
|
+
'Help text'
|
|
458
|
+
);
|
|
459
|
+
} );
|
|
460
|
+
|
|
454
461
|
it( 'should reset input when pressing the Reset button with the Spacebar key', async () => {
|
|
455
462
|
const user = await userEvent.setup();
|
|
456
463
|
const targetOption = timezones[ 13 ];
|
|
@@ -7,6 +7,7 @@ import { type LinearGradientNode } from 'gradient-parser';
|
|
|
7
7
|
* WordPress dependencies
|
|
8
8
|
*/
|
|
9
9
|
import { __ } from '@wordpress/i18n';
|
|
10
|
+
import { useRef } from '@wordpress/element';
|
|
10
11
|
|
|
11
12
|
/**
|
|
12
13
|
* Internal dependencies
|
|
@@ -25,8 +26,8 @@ import {
|
|
|
25
26
|
import { serializeGradient } from './serializer';
|
|
26
27
|
import {
|
|
27
28
|
DEFAULT_LINEAR_GRADIENT_ANGLE,
|
|
28
|
-
HORIZONTAL_GRADIENT_ORIENTATION,
|
|
29
29
|
GRADIENT_OPTIONS,
|
|
30
|
+
HORIZONTAL_GRADIENT_ORIENTATION,
|
|
30
31
|
} from './constants';
|
|
31
32
|
import {
|
|
32
33
|
AccessoryWrapper,
|
|
@@ -70,14 +71,24 @@ const GradientTypePicker = ( {
|
|
|
70
71
|
onChange,
|
|
71
72
|
}: GradientTypePickerProps ) => {
|
|
72
73
|
const { type } = gradientAST;
|
|
74
|
+
const lastLinearOrientationAngle = useRef(
|
|
75
|
+
Number( HORIZONTAL_GRADIENT_ORIENTATION.value )
|
|
76
|
+
);
|
|
77
|
+
|
|
78
|
+
if ( type === 'linear-gradient' && gradientAST.orientation ) {
|
|
79
|
+
lastLinearOrientationAngle.current = Number(
|
|
80
|
+
gradientAST.orientation.value
|
|
81
|
+
);
|
|
82
|
+
}
|
|
73
83
|
|
|
74
84
|
const onSetLinearGradient = () => {
|
|
75
85
|
onChange(
|
|
76
86
|
serializeGradient( {
|
|
77
87
|
...gradientAST,
|
|
78
|
-
orientation:
|
|
79
|
-
|
|
80
|
-
:
|
|
88
|
+
orientation: {
|
|
89
|
+
type: 'angular' as const,
|
|
90
|
+
value: `${ lastLinearOrientationAngle.current }`,
|
|
91
|
+
},
|
|
81
92
|
type: 'linear-gradient',
|
|
82
93
|
} satisfies LinearGradientNode )
|
|
83
94
|
);
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* External dependencies
|
|
3
|
+
*/
|
|
4
|
+
import { render, screen } from '@testing-library/react';
|
|
5
|
+
import userEvent from '@testing-library/user-event';
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Internal dependencies
|
|
9
|
+
*/
|
|
10
|
+
import CustomGradientPicker from '../';
|
|
11
|
+
|
|
12
|
+
describe( 'CustomGradientPicker', () => {
|
|
13
|
+
describe( 'GradientTypePicker angle persistence', () => {
|
|
14
|
+
it( 'should restore the previous linear angle when switching from radial back to linear', async () => {
|
|
15
|
+
const user = userEvent.setup();
|
|
16
|
+
const onChange = jest.fn();
|
|
17
|
+
|
|
18
|
+
render(
|
|
19
|
+
<CustomGradientPicker
|
|
20
|
+
value="linear-gradient(125deg,rgb(0,0,0) 0%,rgb(255,255,255) 100%)"
|
|
21
|
+
onChange={ onChange }
|
|
22
|
+
/>
|
|
23
|
+
);
|
|
24
|
+
|
|
25
|
+
const typeSelect = screen.getByRole( 'combobox', {
|
|
26
|
+
name: /type/i,
|
|
27
|
+
} );
|
|
28
|
+
await user.selectOptions( typeSelect, 'radial-gradient' );
|
|
29
|
+
await user.selectOptions( typeSelect, 'linear-gradient' );
|
|
30
|
+
|
|
31
|
+
// Verify the angle from before the radial switch is restored, not the default
|
|
32
|
+
const lastCall =
|
|
33
|
+
onChange.mock.calls[ onChange.mock.calls.length - 1 ][ 0 ];
|
|
34
|
+
expect( lastCall ).toContain( '125deg' );
|
|
35
|
+
} );
|
|
36
|
+
|
|
37
|
+
it( 'should use HORIZONTAL_GRADIENT_ORIENTATION when no prior linear angle exists', async () => {
|
|
38
|
+
const user = userEvent.setup();
|
|
39
|
+
const onChange = jest.fn();
|
|
40
|
+
|
|
41
|
+
// Start with a radial gradient so there is no previous linear angle in the ref
|
|
42
|
+
render(
|
|
43
|
+
<CustomGradientPicker
|
|
44
|
+
value="radial-gradient(rgb(0,0,0) 0%, rgb(255,255,255) 100%)"
|
|
45
|
+
onChange={ onChange }
|
|
46
|
+
/>
|
|
47
|
+
);
|
|
48
|
+
|
|
49
|
+
const typeSelect = screen.getByRole( 'combobox', {
|
|
50
|
+
name: /type/i,
|
|
51
|
+
} );
|
|
52
|
+
await user.selectOptions( typeSelect, 'linear-gradient' );
|
|
53
|
+
|
|
54
|
+
const lastCall =
|
|
55
|
+
onChange.mock.calls[ onChange.mock.calls.length - 1 ][ 0 ];
|
|
56
|
+
expect( lastCall ).toContain( '90deg' );
|
|
57
|
+
} );
|
|
58
|
+
|
|
59
|
+
it( 'should not restore angle when switching to radial', async () => {
|
|
60
|
+
const user = userEvent.setup();
|
|
61
|
+
const onChange = jest.fn();
|
|
62
|
+
|
|
63
|
+
render(
|
|
64
|
+
<CustomGradientPicker
|
|
65
|
+
value="linear-gradient(45deg, rgb(0,0,0) 0%, rgb(255,255,255) 100%)"
|
|
66
|
+
onChange={ onChange }
|
|
67
|
+
/>
|
|
68
|
+
);
|
|
69
|
+
|
|
70
|
+
const typeSelect = screen.getByRole( 'combobox', {
|
|
71
|
+
name: /type/i,
|
|
72
|
+
} );
|
|
73
|
+
await user.selectOptions( typeSelect, 'radial-gradient' );
|
|
74
|
+
|
|
75
|
+
// Radial gradients have no orientation, so deg should not appear in the output
|
|
76
|
+
const lastCall =
|
|
77
|
+
onChange.mock.calls[ onChange.mock.calls.length - 1 ][ 0 ];
|
|
78
|
+
expect( lastCall ).not.toContain( 'deg' );
|
|
79
|
+
} );
|
|
80
|
+
} );
|
|
81
|
+
} );
|