@wordpress/components 19.8.3 → 19.10.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 +42 -0
- package/CONTRIBUTING.md +80 -7
- package/build/alignment-matrix-control/styles/alignment-matrix-control-styles.js +11 -11
- package/build/alignment-matrix-control/styles/alignment-matrix-control-styles.js.map +1 -1
- package/build/angle-picker-control/angle-circle.js +5 -7
- package/build/angle-picker-control/angle-circle.js.map +1 -1
- package/build/box-control/index.js +0 -21
- package/build/box-control/index.js.map +1 -1
- package/build/box-control/utils.js +1 -8
- package/build/box-control/utils.js.map +1 -1
- package/build/button/index.js +3 -5
- package/build/button/index.js.map +1 -1
- package/build/circular-option-picker/index.js +1 -2
- package/build/circular-option-picker/index.js.map +1 -1
- package/build/disabled/index.js +4 -76
- package/build/disabled/index.js.map +1 -1
- package/build/heading/hook.js +1 -1
- package/build/heading/hook.js.map +1 -1
- package/build/input-control/index.js +27 -4
- package/build/input-control/index.js.map +1 -1
- package/build/input-control/styles/input-control-styles.js +42 -30
- package/build/input-control/styles/input-control-styles.js.map +1 -1
- package/build/mobile/bottom-sheet-select-control/index.native.js +1 -0
- package/build/mobile/bottom-sheet-select-control/index.native.js.map +1 -1
- package/build/navigation/styles/navigation-styles.js +12 -12
- package/build/navigation/styles/navigation-styles.js.map +1 -1
- package/build/notice/index.native.js +44 -40
- package/build/notice/index.native.js.map +1 -1
- package/build/notice/list.native.js +27 -45
- package/build/notice/list.native.js.map +1 -1
- package/build/popover/index.js +6 -52
- package/build/popover/index.js.map +1 -1
- package/build/sandbox/index.js +2 -2
- package/build/sandbox/index.js.map +1 -1
- package/build/select-control/index.js +31 -4
- package/build/select-control/index.js.map +1 -1
- package/build/select-control/styles/select-control-styles.js +8 -8
- package/build/select-control/styles/select-control-styles.js.map +1 -1
- package/build/surface/styles.js +8 -8
- package/build/surface/styles.js.map +1 -1
- package/build/text/hook.js +5 -5
- package/build/text/hook.js.map +1 -1
- package/build/text/styles/text-mixins.native.js +1 -1
- package/build/text/styles/text-mixins.native.js.map +1 -1
- package/build/text/styles.js +7 -7
- package/build/text/styles.js.map +1 -1
- package/build/text-control/index.js +35 -28
- package/build/text-control/index.js.map +1 -1
- package/build/text-control/types.js +6 -0
- package/build/text-control/types.js.map +1 -0
- package/build/toggle-group-control/toggle-group-control-option-icon/component.js +6 -4
- package/build/toggle-group-control/toggle-group-control-option-icon/component.js.map +1 -1
- package/build/tools-panel/tools-panel-header/component.js +52 -36
- package/build/tools-panel/tools-panel-header/component.js.map +1 -1
- package/build/ui/spinner/component.js +1 -1
- package/build/ui/spinner/component.js.map +1 -1
- package/build/unit-control/index.js +3 -3
- package/build/unit-control/index.js.map +1 -1
- package/build/unit-control/styles/unit-control-styles.js +11 -20
- package/build/unit-control/styles/unit-control-styles.js.map +1 -1
- package/build/unit-control/utils.js.map +1 -1
- package/build/utils/colors-values.js +9 -24
- package/build/utils/colors-values.js.map +1 -1
- package/build-module/alignment-matrix-control/styles/alignment-matrix-control-styles.js +11 -11
- package/build-module/alignment-matrix-control/styles/alignment-matrix-control-styles.js.map +1 -1
- package/build-module/angle-picker-control/angle-circle.js +5 -7
- package/build-module/angle-picker-control/angle-circle.js.map +1 -1
- package/build-module/box-control/index.js +1 -20
- package/build-module/box-control/index.js.map +1 -1
- package/build-module/box-control/utils.js +0 -6
- package/build-module/box-control/utils.js.map +1 -1
- package/build-module/button/index.js +3 -4
- package/build-module/button/index.js.map +1 -1
- package/build-module/circular-option-picker/index.js +1 -2
- package/build-module/circular-option-picker/index.js.map +1 -1
- package/build-module/disabled/index.js +5 -76
- package/build-module/disabled/index.js.map +1 -1
- package/build-module/heading/hook.js +1 -1
- package/build-module/heading/hook.js.map +1 -1
- package/build-module/input-control/index.js +24 -3
- package/build-module/input-control/index.js.map +1 -1
- package/build-module/input-control/styles/input-control-styles.js +42 -30
- package/build-module/input-control/styles/input-control-styles.js.map +1 -1
- package/build-module/mobile/bottom-sheet-select-control/index.native.js +1 -0
- package/build-module/mobile/bottom-sheet-select-control/index.native.js.map +1 -1
- package/build-module/navigation/styles/navigation-styles.js +13 -13
- package/build-module/navigation/styles/navigation-styles.js.map +1 -1
- package/build-module/notice/index.native.js +45 -41
- package/build-module/notice/index.native.js.map +1 -1
- package/build-module/notice/list.native.js +28 -46
- package/build-module/notice/list.native.js.map +1 -1
- package/build-module/popover/index.js +6 -52
- package/build-module/popover/index.js.map +1 -1
- package/build-module/sandbox/index.js +2 -2
- package/build-module/sandbox/index.js.map +1 -1
- package/build-module/select-control/index.js +29 -3
- package/build-module/select-control/index.js.map +1 -1
- package/build-module/select-control/styles/select-control-styles.js +8 -8
- package/build-module/select-control/styles/select-control-styles.js.map +1 -1
- package/build-module/surface/styles.js +8 -8
- package/build-module/surface/styles.js.map +1 -1
- package/build-module/text/hook.js +5 -5
- package/build-module/text/hook.js.map +1 -1
- package/build-module/text/styles/text-mixins.native.js +2 -2
- package/build-module/text/styles/text-mixins.native.js.map +1 -1
- package/build-module/text/styles.js +7 -7
- package/build-module/text/styles.js.map +1 -1
- package/build-module/text-control/index.js +35 -27
- package/build-module/text-control/index.js.map +1 -1
- package/build-module/text-control/types.js +2 -0
- package/build-module/text-control/types.js.map +1 -0
- package/build-module/toggle-group-control/toggle-group-control-option-icon/component.js +1 -5
- package/build-module/toggle-group-control/toggle-group-control-option-icon/component.js.map +1 -1
- package/build-module/tools-panel/tools-panel-header/component.js +51 -36
- package/build-module/tools-panel/tools-panel-header/component.js.map +1 -1
- package/build-module/ui/spinner/component.js +1 -1
- package/build-module/ui/spinner/component.js.map +1 -1
- package/build-module/unit-control/index.js +3 -3
- package/build-module/unit-control/index.js.map +1 -1
- package/build-module/unit-control/styles/unit-control-styles.js +11 -20
- package/build-module/unit-control/styles/unit-control-styles.js.map +1 -1
- package/build-module/unit-control/utils.js.map +1 -1
- package/build-module/utils/colors-values.js +19 -23
- package/build-module/utils/colors-values.js.map +1 -1
- package/build-style/style-rtl.css +24 -0
- package/build-style/style.css +24 -0
- package/build-types/button/index.d.ts.map +1 -1
- package/build-types/circular-option-picker/index.d.ts.map +1 -1
- package/build-types/color-picker/styles.d.ts +3 -3
- package/build-types/disabled/index.d.ts.map +1 -1
- package/build-types/input-control/index.d.ts +23 -3
- package/build-types/input-control/index.d.ts.map +1 -1
- package/build-types/input-control/input-field.d.ts +1 -1
- package/build-types/input-control/input-field.d.ts.map +1 -1
- package/build-types/input-control/stories/index.d.ts +5 -5
- package/build-types/input-control/styles/input-control-styles.d.ts +1 -0
- package/build-types/input-control/styles/input-control-styles.d.ts.map +1 -1
- package/build-types/input-control/types.d.ts +79 -3
- package/build-types/input-control/types.d.ts.map +1 -1
- package/build-types/number-control/styles/number-control-styles.d.ts +1 -1
- package/build-types/popover/index.d.ts +0 -1
- package/build-types/popover/index.d.ts.map +1 -1
- package/build-types/select-control/index.d.ts +30 -26
- package/build-types/select-control/index.d.ts.map +1 -1
- package/build-types/select-control/stories/index.d.ts +23 -0
- package/build-types/select-control/stories/index.d.ts.map +1 -0
- package/build-types/select-control/styles/select-control-styles.d.ts +3 -4
- package/build-types/select-control/styles/select-control-styles.d.ts.map +1 -1
- package/build-types/select-control/test/select-control.d.ts +2 -0
- package/build-types/select-control/test/select-control.d.ts.map +1 -0
- package/build-types/select-control/types.d.ts +52 -1
- package/build-types/select-control/types.d.ts.map +1 -1
- package/build-types/text-control/index.d.ts +32 -0
- package/build-types/text-control/index.d.ts.map +1 -0
- package/build-types/text-control/stories/index.d.ts +13 -0
- package/build-types/text-control/stories/index.d.ts.map +1 -0
- package/build-types/text-control/types.d.ts +25 -0
- package/build-types/text-control/types.d.ts.map +1 -0
- package/build-types/toggle-group-control/toggle-group-control-option-icon/component.d.ts.map +1 -1
- package/build-types/tools-panel/tools-panel-header/component.d.ts.map +1 -1
- package/build-types/tools-panel/types.d.ts +0 -1
- package/build-types/tools-panel/types.d.ts.map +1 -1
- package/build-types/unit-control/index.d.ts +2 -2
- package/build-types/unit-control/index.d.ts.map +1 -1
- package/build-types/unit-control/styles/unit-control-styles.d.ts.map +1 -1
- package/build-types/unit-control/test/index.d.ts +2 -0
- package/build-types/unit-control/test/index.d.ts.map +1 -0
- package/build-types/unit-control/test/utils.d.ts +2 -0
- package/build-types/unit-control/test/utils.d.ts.map +1 -0
- package/build-types/unit-control/types.d.ts +1 -1
- package/build-types/unit-control/types.d.ts.map +1 -1
- package/build-types/unit-control/utils.d.ts +3 -3
- package/build-types/unit-control/utils.d.ts.map +1 -1
- package/build-types/utils/colors-values.d.ts +6 -146
- package/build-types/utils/colors-values.d.ts.map +1 -1
- package/package.json +17 -17
- package/src/alignment-matrix-control/styles/alignment-matrix-control-styles.js +5 -3
- package/src/angle-picker-control/angle-circle.js +3 -3
- package/src/box-control/README.md +0 -74
- package/src/box-control/index.js +0 -15
- package/src/box-control/stories/index.js +0 -29
- package/src/box-control/utils.js +0 -7
- package/src/button/index.js +2 -4
- package/src/button/test/index.js +16 -1
- package/src/circular-option-picker/index.js +1 -2
- package/src/color-palette/README.md +0 -1
- package/src/color-palette/test/__snapshots__/index.js.snap +2 -3
- package/src/confirm-dialog/stories/index.js +87 -99
- package/src/date-time/stories/index.js +19 -0
- package/src/date-time/test/date.js +107 -78
- package/src/dimension-control/test/__snapshots__/index.test.js.snap +4 -4
- package/src/disabled/index.js +5 -90
- package/src/form-file-upload/test/index.js +15 -12
- package/src/heading/hook.ts +1 -1
- package/src/heading/test/__snapshots__/index.js.snap +3 -3
- package/src/input-control/README.md +3 -3
- package/src/input-control/index.tsx +23 -3
- package/src/input-control/stories/index.tsx +63 -0
- package/src/input-control/styles/input-control-styles.tsx +20 -7
- package/src/input-control/types.ts +79 -2
- package/src/menu-item/style.scss +10 -0
- package/src/mobile/bottom-sheet/bottom-sheet-navigation/test/navigation-container.native.js +8 -1
- package/src/mobile/bottom-sheet-select-control/index.native.js +1 -0
- package/src/mobile/html-text-input/style.android.scss +1 -0
- package/src/mobile/html-text-input/style.ios.scss +1 -0
- package/src/mobile/link-settings/test/link-settings-navigation.native.js +9 -1
- package/src/navigation/styles/navigation-styles.js +5 -5
- package/src/notice/index.native.js +44 -54
- package/src/notice/list.native.js +27 -51
- package/src/notice/style.native.scss +1 -0
- package/src/popover/index.js +5 -51
- package/src/query-controls/README.md +2 -2
- package/src/sandbox/index.js +2 -2
- package/src/select-control/README.md +2 -2
- package/src/select-control/index.tsx +30 -29
- package/src/select-control/stories/index.tsx +90 -0
- package/src/select-control/styles/select-control-styles.ts +10 -9
- package/src/select-control/test/{select-control.js → select-control.tsx} +2 -2
- package/src/select-control/types.ts +66 -1
- package/src/surface/styles.js +1 -1
- package/src/text/hook.js +1 -1
- package/src/text/styles/text-mixins.native.js +2 -2
- package/src/text/styles.js +1 -1
- package/src/text/test/__snapshots__/{index.js.snap → index.tsx.snap} +16 -0
- package/src/text/test/{index.js → index.tsx} +12 -6
- package/src/text-control/index.tsx +84 -0
- package/src/text-control/stories/index.tsx +66 -0
- package/src/text-control/types.ts +29 -0
- package/src/toggle-group-control/toggle-group-control-option-icon/component.tsx +1 -5
- package/src/toolbar-group/style.scss +20 -0
- package/src/tools-panel/test/__snapshots__/index.js.snap +2 -2
- package/src/tools-panel/test/index.js +71 -18
- package/src/tools-panel/tools-panel-header/component.tsx +75 -33
- package/src/tools-panel/types.ts +0 -1
- package/src/tooltip/test/index.js +6 -0
- package/src/ui/spinner/component.js +1 -1
- package/src/ui/spinner/test/__snapshots__/index.js.snap +3 -3
- package/src/unit-control/index.tsx +2 -5
- package/src/unit-control/styles/unit-control-styles.ts +3 -13
- package/src/unit-control/test/__snapshots__/index.tsx.snap +33 -0
- package/src/unit-control/test/{index.js → index.tsx} +214 -165
- package/src/unit-control/test/{utils.js → utils.ts} +38 -19
- package/src/unit-control/types.ts +4 -1
- package/src/unit-control/utils.ts +5 -3
- package/src/utils/colors-values.js +18 -22
- package/tsconfig.json +9 -2
- package/tsconfig.tsbuildinfo +1 -1
- package/build/box-control/visualizer.js +0 -165
- package/build/box-control/visualizer.js.map +0 -1
- package/build-module/box-control/visualizer.js +0 -154
- package/build-module/box-control/visualizer.js.map +0 -1
- package/src/box-control/visualizer.js +0 -116
- package/src/input-control/stories/index.js +0 -71
- package/src/select-control/stories/index.js +0 -104
- package/src/text-control/index.js +0 -72
- package/src/text-control/stories/index.js +0 -46
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* WordPress dependencies
|
|
3
|
-
*/
|
|
4
|
-
import { useInstanceId } from '@wordpress/compose';
|
|
5
|
-
import { forwardRef } from '@wordpress/element';
|
|
6
|
-
|
|
7
|
-
/**
|
|
8
|
-
* Internal dependencies
|
|
9
|
-
*/
|
|
10
|
-
import BaseControl from '../base-control';
|
|
11
|
-
|
|
12
|
-
/**
|
|
13
|
-
* @typedef OwnProps
|
|
14
|
-
* @property {string} label Label for the control.
|
|
15
|
-
* @property {boolean} [hideLabelFromVision] Whether to accessibly hide the label.
|
|
16
|
-
* @property {string} value Value of the input.
|
|
17
|
-
* @property {string} [help] Optional help text for the control.
|
|
18
|
-
* @property {string} [className] Classname passed to BaseControl wrapper
|
|
19
|
-
* @property {(value: string) => void} onChange Handle changes.
|
|
20
|
-
* @property {string} [type='text'] Type of the input.
|
|
21
|
-
*/
|
|
22
|
-
|
|
23
|
-
/** @typedef {OwnProps & import('react').ComponentProps<'input'>} Props */
|
|
24
|
-
|
|
25
|
-
/**
|
|
26
|
-
*
|
|
27
|
-
* @param {Props} props Props
|
|
28
|
-
* @param {import('react').ForwardedRef<HTMLInputElement>} ref
|
|
29
|
-
*/
|
|
30
|
-
function TextControl(
|
|
31
|
-
{
|
|
32
|
-
label,
|
|
33
|
-
hideLabelFromVision,
|
|
34
|
-
value,
|
|
35
|
-
help,
|
|
36
|
-
className,
|
|
37
|
-
onChange,
|
|
38
|
-
type = 'text',
|
|
39
|
-
...props
|
|
40
|
-
},
|
|
41
|
-
ref
|
|
42
|
-
) {
|
|
43
|
-
const instanceId = useInstanceId( TextControl );
|
|
44
|
-
const id = `inspector-text-control-${ instanceId }`;
|
|
45
|
-
const onChangeValue = (
|
|
46
|
-
/** @type {import('react').ChangeEvent<HTMLInputElement>} */
|
|
47
|
-
event
|
|
48
|
-
) => onChange( event.target.value );
|
|
49
|
-
|
|
50
|
-
return (
|
|
51
|
-
<BaseControl
|
|
52
|
-
label={ label }
|
|
53
|
-
hideLabelFromVision={ hideLabelFromVision }
|
|
54
|
-
id={ id }
|
|
55
|
-
help={ help }
|
|
56
|
-
className={ className }
|
|
57
|
-
>
|
|
58
|
-
<input
|
|
59
|
-
className="components-text-control__input"
|
|
60
|
-
type={ type }
|
|
61
|
-
id={ id }
|
|
62
|
-
value={ value }
|
|
63
|
-
onChange={ onChangeValue }
|
|
64
|
-
aria-describedby={ !! help ? id + '__help' : undefined }
|
|
65
|
-
ref={ ref }
|
|
66
|
-
{ ...props }
|
|
67
|
-
/>
|
|
68
|
-
</BaseControl>
|
|
69
|
-
);
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
export default forwardRef( TextControl );
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* External dependencies
|
|
3
|
-
*/
|
|
4
|
-
import { boolean, text } from '@storybook/addon-knobs';
|
|
5
|
-
|
|
6
|
-
/**
|
|
7
|
-
* WordPress dependencies
|
|
8
|
-
*/
|
|
9
|
-
import { useState } from '@wordpress/element';
|
|
10
|
-
|
|
11
|
-
/**
|
|
12
|
-
* Internal dependencies
|
|
13
|
-
*/
|
|
14
|
-
import TextControl from '../';
|
|
15
|
-
|
|
16
|
-
export default {
|
|
17
|
-
title: 'Components/TextControl',
|
|
18
|
-
component: TextControl,
|
|
19
|
-
parameters: {
|
|
20
|
-
knobs: { disable: false },
|
|
21
|
-
},
|
|
22
|
-
};
|
|
23
|
-
|
|
24
|
-
const TextControlWithState = ( props ) => {
|
|
25
|
-
const [ value, setValue ] = useState();
|
|
26
|
-
|
|
27
|
-
return <TextControl { ...props } value={ value } onChange={ setValue } />;
|
|
28
|
-
};
|
|
29
|
-
|
|
30
|
-
export const _default = () => {
|
|
31
|
-
const label = text( 'Label', 'Label Text' );
|
|
32
|
-
const hideLabelFromVision = boolean( 'Hide Label From Vision', false );
|
|
33
|
-
const help = text( 'Help Text', 'Help text to explain the input.' );
|
|
34
|
-
const type = text( 'Input Type', 'text' );
|
|
35
|
-
const className = text( 'Class Name', '' );
|
|
36
|
-
|
|
37
|
-
return (
|
|
38
|
-
<TextControlWithState
|
|
39
|
-
label={ label }
|
|
40
|
-
hideLabelFromVision={ hideLabelFromVision }
|
|
41
|
-
help={ help }
|
|
42
|
-
type={ type }
|
|
43
|
-
className={ className }
|
|
44
|
-
/>
|
|
45
|
-
);
|
|
46
|
-
};
|