@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.
Files changed (256) hide show
  1. package/CHANGELOG.md +42 -0
  2. package/CONTRIBUTING.md +80 -7
  3. package/build/alignment-matrix-control/styles/alignment-matrix-control-styles.js +11 -11
  4. package/build/alignment-matrix-control/styles/alignment-matrix-control-styles.js.map +1 -1
  5. package/build/angle-picker-control/angle-circle.js +5 -7
  6. package/build/angle-picker-control/angle-circle.js.map +1 -1
  7. package/build/box-control/index.js +0 -21
  8. package/build/box-control/index.js.map +1 -1
  9. package/build/box-control/utils.js +1 -8
  10. package/build/box-control/utils.js.map +1 -1
  11. package/build/button/index.js +3 -5
  12. package/build/button/index.js.map +1 -1
  13. package/build/circular-option-picker/index.js +1 -2
  14. package/build/circular-option-picker/index.js.map +1 -1
  15. package/build/disabled/index.js +4 -76
  16. package/build/disabled/index.js.map +1 -1
  17. package/build/heading/hook.js +1 -1
  18. package/build/heading/hook.js.map +1 -1
  19. package/build/input-control/index.js +27 -4
  20. package/build/input-control/index.js.map +1 -1
  21. package/build/input-control/styles/input-control-styles.js +42 -30
  22. package/build/input-control/styles/input-control-styles.js.map +1 -1
  23. package/build/mobile/bottom-sheet-select-control/index.native.js +1 -0
  24. package/build/mobile/bottom-sheet-select-control/index.native.js.map +1 -1
  25. package/build/navigation/styles/navigation-styles.js +12 -12
  26. package/build/navigation/styles/navigation-styles.js.map +1 -1
  27. package/build/notice/index.native.js +44 -40
  28. package/build/notice/index.native.js.map +1 -1
  29. package/build/notice/list.native.js +27 -45
  30. package/build/notice/list.native.js.map +1 -1
  31. package/build/popover/index.js +6 -52
  32. package/build/popover/index.js.map +1 -1
  33. package/build/sandbox/index.js +2 -2
  34. package/build/sandbox/index.js.map +1 -1
  35. package/build/select-control/index.js +31 -4
  36. package/build/select-control/index.js.map +1 -1
  37. package/build/select-control/styles/select-control-styles.js +8 -8
  38. package/build/select-control/styles/select-control-styles.js.map +1 -1
  39. package/build/surface/styles.js +8 -8
  40. package/build/surface/styles.js.map +1 -1
  41. package/build/text/hook.js +5 -5
  42. package/build/text/hook.js.map +1 -1
  43. package/build/text/styles/text-mixins.native.js +1 -1
  44. package/build/text/styles/text-mixins.native.js.map +1 -1
  45. package/build/text/styles.js +7 -7
  46. package/build/text/styles.js.map +1 -1
  47. package/build/text-control/index.js +35 -28
  48. package/build/text-control/index.js.map +1 -1
  49. package/build/text-control/types.js +6 -0
  50. package/build/text-control/types.js.map +1 -0
  51. package/build/toggle-group-control/toggle-group-control-option-icon/component.js +6 -4
  52. package/build/toggle-group-control/toggle-group-control-option-icon/component.js.map +1 -1
  53. package/build/tools-panel/tools-panel-header/component.js +52 -36
  54. package/build/tools-panel/tools-panel-header/component.js.map +1 -1
  55. package/build/ui/spinner/component.js +1 -1
  56. package/build/ui/spinner/component.js.map +1 -1
  57. package/build/unit-control/index.js +3 -3
  58. package/build/unit-control/index.js.map +1 -1
  59. package/build/unit-control/styles/unit-control-styles.js +11 -20
  60. package/build/unit-control/styles/unit-control-styles.js.map +1 -1
  61. package/build/unit-control/utils.js.map +1 -1
  62. package/build/utils/colors-values.js +9 -24
  63. package/build/utils/colors-values.js.map +1 -1
  64. package/build-module/alignment-matrix-control/styles/alignment-matrix-control-styles.js +11 -11
  65. package/build-module/alignment-matrix-control/styles/alignment-matrix-control-styles.js.map +1 -1
  66. package/build-module/angle-picker-control/angle-circle.js +5 -7
  67. package/build-module/angle-picker-control/angle-circle.js.map +1 -1
  68. package/build-module/box-control/index.js +1 -20
  69. package/build-module/box-control/index.js.map +1 -1
  70. package/build-module/box-control/utils.js +0 -6
  71. package/build-module/box-control/utils.js.map +1 -1
  72. package/build-module/button/index.js +3 -4
  73. package/build-module/button/index.js.map +1 -1
  74. package/build-module/circular-option-picker/index.js +1 -2
  75. package/build-module/circular-option-picker/index.js.map +1 -1
  76. package/build-module/disabled/index.js +5 -76
  77. package/build-module/disabled/index.js.map +1 -1
  78. package/build-module/heading/hook.js +1 -1
  79. package/build-module/heading/hook.js.map +1 -1
  80. package/build-module/input-control/index.js +24 -3
  81. package/build-module/input-control/index.js.map +1 -1
  82. package/build-module/input-control/styles/input-control-styles.js +42 -30
  83. package/build-module/input-control/styles/input-control-styles.js.map +1 -1
  84. package/build-module/mobile/bottom-sheet-select-control/index.native.js +1 -0
  85. package/build-module/mobile/bottom-sheet-select-control/index.native.js.map +1 -1
  86. package/build-module/navigation/styles/navigation-styles.js +13 -13
  87. package/build-module/navigation/styles/navigation-styles.js.map +1 -1
  88. package/build-module/notice/index.native.js +45 -41
  89. package/build-module/notice/index.native.js.map +1 -1
  90. package/build-module/notice/list.native.js +28 -46
  91. package/build-module/notice/list.native.js.map +1 -1
  92. package/build-module/popover/index.js +6 -52
  93. package/build-module/popover/index.js.map +1 -1
  94. package/build-module/sandbox/index.js +2 -2
  95. package/build-module/sandbox/index.js.map +1 -1
  96. package/build-module/select-control/index.js +29 -3
  97. package/build-module/select-control/index.js.map +1 -1
  98. package/build-module/select-control/styles/select-control-styles.js +8 -8
  99. package/build-module/select-control/styles/select-control-styles.js.map +1 -1
  100. package/build-module/surface/styles.js +8 -8
  101. package/build-module/surface/styles.js.map +1 -1
  102. package/build-module/text/hook.js +5 -5
  103. package/build-module/text/hook.js.map +1 -1
  104. package/build-module/text/styles/text-mixins.native.js +2 -2
  105. package/build-module/text/styles/text-mixins.native.js.map +1 -1
  106. package/build-module/text/styles.js +7 -7
  107. package/build-module/text/styles.js.map +1 -1
  108. package/build-module/text-control/index.js +35 -27
  109. package/build-module/text-control/index.js.map +1 -1
  110. package/build-module/text-control/types.js +2 -0
  111. package/build-module/text-control/types.js.map +1 -0
  112. package/build-module/toggle-group-control/toggle-group-control-option-icon/component.js +1 -5
  113. package/build-module/toggle-group-control/toggle-group-control-option-icon/component.js.map +1 -1
  114. package/build-module/tools-panel/tools-panel-header/component.js +51 -36
  115. package/build-module/tools-panel/tools-panel-header/component.js.map +1 -1
  116. package/build-module/ui/spinner/component.js +1 -1
  117. package/build-module/ui/spinner/component.js.map +1 -1
  118. package/build-module/unit-control/index.js +3 -3
  119. package/build-module/unit-control/index.js.map +1 -1
  120. package/build-module/unit-control/styles/unit-control-styles.js +11 -20
  121. package/build-module/unit-control/styles/unit-control-styles.js.map +1 -1
  122. package/build-module/unit-control/utils.js.map +1 -1
  123. package/build-module/utils/colors-values.js +19 -23
  124. package/build-module/utils/colors-values.js.map +1 -1
  125. package/build-style/style-rtl.css +24 -0
  126. package/build-style/style.css +24 -0
  127. package/build-types/button/index.d.ts.map +1 -1
  128. package/build-types/circular-option-picker/index.d.ts.map +1 -1
  129. package/build-types/color-picker/styles.d.ts +3 -3
  130. package/build-types/disabled/index.d.ts.map +1 -1
  131. package/build-types/input-control/index.d.ts +23 -3
  132. package/build-types/input-control/index.d.ts.map +1 -1
  133. package/build-types/input-control/input-field.d.ts +1 -1
  134. package/build-types/input-control/input-field.d.ts.map +1 -1
  135. package/build-types/input-control/stories/index.d.ts +5 -5
  136. package/build-types/input-control/styles/input-control-styles.d.ts +1 -0
  137. package/build-types/input-control/styles/input-control-styles.d.ts.map +1 -1
  138. package/build-types/input-control/types.d.ts +79 -3
  139. package/build-types/input-control/types.d.ts.map +1 -1
  140. package/build-types/number-control/styles/number-control-styles.d.ts +1 -1
  141. package/build-types/popover/index.d.ts +0 -1
  142. package/build-types/popover/index.d.ts.map +1 -1
  143. package/build-types/select-control/index.d.ts +30 -26
  144. package/build-types/select-control/index.d.ts.map +1 -1
  145. package/build-types/select-control/stories/index.d.ts +23 -0
  146. package/build-types/select-control/stories/index.d.ts.map +1 -0
  147. package/build-types/select-control/styles/select-control-styles.d.ts +3 -4
  148. package/build-types/select-control/styles/select-control-styles.d.ts.map +1 -1
  149. package/build-types/select-control/test/select-control.d.ts +2 -0
  150. package/build-types/select-control/test/select-control.d.ts.map +1 -0
  151. package/build-types/select-control/types.d.ts +52 -1
  152. package/build-types/select-control/types.d.ts.map +1 -1
  153. package/build-types/text-control/index.d.ts +32 -0
  154. package/build-types/text-control/index.d.ts.map +1 -0
  155. package/build-types/text-control/stories/index.d.ts +13 -0
  156. package/build-types/text-control/stories/index.d.ts.map +1 -0
  157. package/build-types/text-control/types.d.ts +25 -0
  158. package/build-types/text-control/types.d.ts.map +1 -0
  159. package/build-types/toggle-group-control/toggle-group-control-option-icon/component.d.ts.map +1 -1
  160. package/build-types/tools-panel/tools-panel-header/component.d.ts.map +1 -1
  161. package/build-types/tools-panel/types.d.ts +0 -1
  162. package/build-types/tools-panel/types.d.ts.map +1 -1
  163. package/build-types/unit-control/index.d.ts +2 -2
  164. package/build-types/unit-control/index.d.ts.map +1 -1
  165. package/build-types/unit-control/styles/unit-control-styles.d.ts.map +1 -1
  166. package/build-types/unit-control/test/index.d.ts +2 -0
  167. package/build-types/unit-control/test/index.d.ts.map +1 -0
  168. package/build-types/unit-control/test/utils.d.ts +2 -0
  169. package/build-types/unit-control/test/utils.d.ts.map +1 -0
  170. package/build-types/unit-control/types.d.ts +1 -1
  171. package/build-types/unit-control/types.d.ts.map +1 -1
  172. package/build-types/unit-control/utils.d.ts +3 -3
  173. package/build-types/unit-control/utils.d.ts.map +1 -1
  174. package/build-types/utils/colors-values.d.ts +6 -146
  175. package/build-types/utils/colors-values.d.ts.map +1 -1
  176. package/package.json +17 -17
  177. package/src/alignment-matrix-control/styles/alignment-matrix-control-styles.js +5 -3
  178. package/src/angle-picker-control/angle-circle.js +3 -3
  179. package/src/box-control/README.md +0 -74
  180. package/src/box-control/index.js +0 -15
  181. package/src/box-control/stories/index.js +0 -29
  182. package/src/box-control/utils.js +0 -7
  183. package/src/button/index.js +2 -4
  184. package/src/button/test/index.js +16 -1
  185. package/src/circular-option-picker/index.js +1 -2
  186. package/src/color-palette/README.md +0 -1
  187. package/src/color-palette/test/__snapshots__/index.js.snap +2 -3
  188. package/src/confirm-dialog/stories/index.js +87 -99
  189. package/src/date-time/stories/index.js +19 -0
  190. package/src/date-time/test/date.js +107 -78
  191. package/src/dimension-control/test/__snapshots__/index.test.js.snap +4 -4
  192. package/src/disabled/index.js +5 -90
  193. package/src/form-file-upload/test/index.js +15 -12
  194. package/src/heading/hook.ts +1 -1
  195. package/src/heading/test/__snapshots__/index.js.snap +3 -3
  196. package/src/input-control/README.md +3 -3
  197. package/src/input-control/index.tsx +23 -3
  198. package/src/input-control/stories/index.tsx +63 -0
  199. package/src/input-control/styles/input-control-styles.tsx +20 -7
  200. package/src/input-control/types.ts +79 -2
  201. package/src/menu-item/style.scss +10 -0
  202. package/src/mobile/bottom-sheet/bottom-sheet-navigation/test/navigation-container.native.js +8 -1
  203. package/src/mobile/bottom-sheet-select-control/index.native.js +1 -0
  204. package/src/mobile/html-text-input/style.android.scss +1 -0
  205. package/src/mobile/html-text-input/style.ios.scss +1 -0
  206. package/src/mobile/link-settings/test/link-settings-navigation.native.js +9 -1
  207. package/src/navigation/styles/navigation-styles.js +5 -5
  208. package/src/notice/index.native.js +44 -54
  209. package/src/notice/list.native.js +27 -51
  210. package/src/notice/style.native.scss +1 -0
  211. package/src/popover/index.js +5 -51
  212. package/src/query-controls/README.md +2 -2
  213. package/src/sandbox/index.js +2 -2
  214. package/src/select-control/README.md +2 -2
  215. package/src/select-control/index.tsx +30 -29
  216. package/src/select-control/stories/index.tsx +90 -0
  217. package/src/select-control/styles/select-control-styles.ts +10 -9
  218. package/src/select-control/test/{select-control.js → select-control.tsx} +2 -2
  219. package/src/select-control/types.ts +66 -1
  220. package/src/surface/styles.js +1 -1
  221. package/src/text/hook.js +1 -1
  222. package/src/text/styles/text-mixins.native.js +2 -2
  223. package/src/text/styles.js +1 -1
  224. package/src/text/test/__snapshots__/{index.js.snap → index.tsx.snap} +16 -0
  225. package/src/text/test/{index.js → index.tsx} +12 -6
  226. package/src/text-control/index.tsx +84 -0
  227. package/src/text-control/stories/index.tsx +66 -0
  228. package/src/text-control/types.ts +29 -0
  229. package/src/toggle-group-control/toggle-group-control-option-icon/component.tsx +1 -5
  230. package/src/toolbar-group/style.scss +20 -0
  231. package/src/tools-panel/test/__snapshots__/index.js.snap +2 -2
  232. package/src/tools-panel/test/index.js +71 -18
  233. package/src/tools-panel/tools-panel-header/component.tsx +75 -33
  234. package/src/tools-panel/types.ts +0 -1
  235. package/src/tooltip/test/index.js +6 -0
  236. package/src/ui/spinner/component.js +1 -1
  237. package/src/ui/spinner/test/__snapshots__/index.js.snap +3 -3
  238. package/src/unit-control/index.tsx +2 -5
  239. package/src/unit-control/styles/unit-control-styles.ts +3 -13
  240. package/src/unit-control/test/__snapshots__/index.tsx.snap +33 -0
  241. package/src/unit-control/test/{index.js → index.tsx} +214 -165
  242. package/src/unit-control/test/{utils.js → utils.ts} +38 -19
  243. package/src/unit-control/types.ts +4 -1
  244. package/src/unit-control/utils.ts +5 -3
  245. package/src/utils/colors-values.js +18 -22
  246. package/tsconfig.json +9 -2
  247. package/tsconfig.tsbuildinfo +1 -1
  248. package/build/box-control/visualizer.js +0 -165
  249. package/build/box-control/visualizer.js.map +0 -1
  250. package/build-module/box-control/visualizer.js +0 -154
  251. package/build-module/box-control/visualizer.js.map +0 -1
  252. package/src/box-control/visualizer.js +0 -116
  253. package/src/input-control/stories/index.js +0 -71
  254. package/src/select-control/stories/index.js +0 -104
  255. package/src/text-control/index.js +0 -72
  256. 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
- };