@wordpress/components 30.0.0 → 30.1.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 (59) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/build/color-picker/styles.js +7 -7
  3. package/build/color-picker/styles.js.map +1 -1
  4. package/build/palette-edit/index.js +1 -1
  5. package/build/palette-edit/index.js.map +1 -1
  6. package/build/private-apis.js +5 -1
  7. package/build/private-apis.js.map +1 -1
  8. package/build/range-control/index.js +1 -1
  9. package/build/range-control/index.js.map +1 -1
  10. package/build/range-control/styles/range-control-styles.js +35 -35
  11. package/build/range-control/styles/range-control-styles.js.map +1 -1
  12. package/build/range-control/tooltip.js +15 -15
  13. package/build/range-control/tooltip.js.map +1 -1
  14. package/build/range-control/types.js.map +1 -1
  15. package/build/textarea-control/index.js +7 -1
  16. package/build/textarea-control/index.js.map +1 -1
  17. package/build-module/color-picker/styles.js +7 -7
  18. package/build-module/color-picker/styles.js.map +1 -1
  19. package/build-module/palette-edit/index.js +2 -2
  20. package/build-module/palette-edit/index.js.map +1 -1
  21. package/build-module/private-apis.js +5 -1
  22. package/build-module/private-apis.js.map +1 -1
  23. package/build-module/range-control/index.js +1 -1
  24. package/build-module/range-control/index.js.map +1 -1
  25. package/build-module/range-control/styles/range-control-styles.js +35 -35
  26. package/build-module/range-control/styles/range-control-styles.js.map +1 -1
  27. package/build-module/range-control/tooltip.js +15 -15
  28. package/build-module/range-control/tooltip.js.map +1 -1
  29. package/build-module/range-control/types.js.map +1 -1
  30. package/build-module/textarea-control/index.js +7 -1
  31. package/build-module/textarea-control/index.js.map +1 -1
  32. package/build-style/style-rtl.css +21 -54
  33. package/build-style/style.css +21 -54
  34. package/build-types/box-control/utils.d.ts +7 -7
  35. package/build-types/calendar/utils/use-localization-props.d.ts +3 -3
  36. package/build-types/color-picker/styles.d.ts.map +1 -1
  37. package/build-types/custom-gradient-picker/constants.d.ts +2 -2
  38. package/build-types/dimension-control/sizes.d.ts +5 -5
  39. package/build-types/font-size-picker/constants.d.ts +2 -2
  40. package/build-types/font-size-picker/constants.d.ts.map +1 -1
  41. package/build-types/private-apis.d.ts.map +1 -1
  42. package/build-types/range-control/types.d.ts +2 -2
  43. package/build-types/range-control/types.d.ts.map +1 -1
  44. package/build-types/text-control/stories/index.story.d.ts.map +1 -1
  45. package/build-types/textarea-control/index.d.ts.map +1 -1
  46. package/package.json +19 -19
  47. package/src/color-picker/styles.ts +10 -0
  48. package/src/modal/style.scss +2 -2
  49. package/src/palette-edit/index.tsx +3 -3
  50. package/src/private-apis.ts +8 -0
  51. package/src/range-control/index.tsx +1 -1
  52. package/src/range-control/styles/range-control-styles.ts +3 -3
  53. package/src/range-control/tooltip.tsx +13 -13
  54. package/src/range-control/types.ts +2 -2
  55. package/src/text-control/stories/index.story.tsx +1 -0
  56. package/src/text-control/style.scss +6 -1
  57. package/src/textarea-control/index.tsx +8 -1
  58. package/src/utils/theme-variables.scss +3 -0
  59. package/tsconfig.tsbuildinfo +1 -1
@@ -4,12 +4,12 @@
4
4
  * When there are 5 font sizes or fewer, we assume that the font sizes are
5
5
  * ordered by size and show T-shirt labels.
6
6
  */
7
- export declare const T_SHIRT_ABBREVIATIONS: (import("@wordpress/i18n/build-types/types").TranslatableText<"S"> | import("@wordpress/i18n/build-types/types").TranslatableText<"M"> | import("@wordpress/i18n/build-types/types").TranslatableText<"L"> | import("@wordpress/i18n/build-types/types").TranslatableText<"XL"> | import("@wordpress/i18n/build-types/types").TranslatableText<"XXL">)[];
7
+ export declare const T_SHIRT_ABBREVIATIONS: (import("@wordpress/i18n").TranslatableText<"S"> | import("@wordpress/i18n").TranslatableText<"M"> | import("@wordpress/i18n").TranslatableText<"L"> | import("@wordpress/i18n").TranslatableText<"XL"> | import("@wordpress/i18n").TranslatableText<"XXL">)[];
8
8
  /**
9
9
  * List of T-shirt names.
10
10
  *
11
11
  * When there are 5 font sizes or fewer, we assume that the font sizes are
12
12
  * ordered by size and show T-shirt labels.
13
13
  */
14
- export declare const T_SHIRT_NAMES: (import("@wordpress/i18n/build-types/types").TranslatableText<"Small"> | import("@wordpress/i18n/build-types/types").TranslatableText<"Medium"> | import("@wordpress/i18n/build-types/types").TranslatableText<"Large"> | import("@wordpress/i18n/build-types/types").TranslatableText<"Extra Large"> | import("@wordpress/i18n/build-types/types").TranslatableText<"Extra Extra Large">)[];
14
+ export declare const T_SHIRT_NAMES: (import("@wordpress/i18n").TranslatableText<"Small"> | import("@wordpress/i18n").TranslatableText<"Medium"> | import("@wordpress/i18n").TranslatableText<"Large"> | import("@wordpress/i18n").TranslatableText<"Extra Large"> | import("@wordpress/i18n").TranslatableText<"Extra Extra Large">)[];
15
15
  //# sourceMappingURL=constants.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/font-size-picker/constants.ts"],"names":[],"mappings":"AAKA;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,0VAWjC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,aAAa,8XAMzB,CAAC"}
1
+ {"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/font-size-picker/constants.ts"],"names":[],"mappings":"AAKA;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,gQAWjC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,aAAa,oSAMzB,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"private-apis.d.ts","sourceRoot":"","sources":["../src/private-apis.ts"],"names":[],"mappings":"AAeA,eAAO,MAAM,WAAW,IAAK,CAAC"}
1
+ {"version":3,"file":"private-apis.d.ts","sourceRoot":"","sources":["../src/private-apis.ts"],"names":[],"mappings":"AAoBA,eAAO,MAAM,WAAW,IAAK,CAAC"}
@@ -247,9 +247,9 @@ export type ThumbProps = {
247
247
  };
248
248
  export type TooltipProps = {
249
249
  show?: boolean;
250
- position?: string;
250
+ placement?: string;
251
251
  inputRef?: MutableRefObject<HTMLElement | undefined>;
252
- tooltipPosition?: string;
252
+ tooltipPlacement?: string;
253
253
  value?: ControlledRangeValue;
254
254
  renderTooltipContent?: (value?: ControlledRangeValue) => string | number | null | undefined;
255
255
  zIndex?: number;
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/range-control/types.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/range-control/types.ts"],"names":[],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/text-control/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAOtD;;GAEG;AACH,OAAO,WAAW,MAAM,IAAI,CAAC;AAE7B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,WAAW,CAgBnC,CAAC;AACF,eAAe,IAAI,CAAC;AAoBpB,eAAO,MAAM,OAAO,EAAE,OAAO,CAAE,OAAO,WAAW,CAEhD,CAAC;AAMF,eAAO,MAAM,oBAAoB,EAAE,OAAO,CAAE,OAAO,WAAW,CACnC,CAAC"}
1
+ {"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/text-control/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAOtD;;GAEG;AACH,OAAO,WAAW,MAAM,IAAI,CAAC;AAE7B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,WAAW,CAgBnC,CAAC;AACF,eAAe,IAAI,CAAC;AAoBpB,eAAO,MAAM,OAAO,EAAE,OAAO,CAAE,OAAO,WAAW,CAEhD,CAAC;AAOF,eAAO,MAAM,oBAAoB,EAAE,OAAO,CAAE,OAAO,WAAW,CACnC,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/textarea-control/index.tsx"],"names":[],"mappings":"AA0DA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,eAAe;;;;0TAA2C,CAAC;AAExE,eAAe,eAAe,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/textarea-control/index.tsx"],"names":[],"mappings":"AAiEA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,eAAe;;;;0TAA2C,CAAC;AAExE,eAAe,eAAe,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wordpress/components",
3
- "version": "30.0.0",
3
+ "version": "30.1.0",
4
4
  "description": "UI components for WordPress.",
5
5
  "author": "The WordPress Contributors",
6
6
  "license": "GPL-2.0-or-later",
@@ -44,23 +44,23 @@
44
44
  "@types/gradient-parser": "0.1.3",
45
45
  "@types/highlight-words-core": "1.2.1",
46
46
  "@use-gesture/react": "^10.3.1",
47
- "@wordpress/a11y": "^4.27.0",
48
- "@wordpress/compose": "^7.27.0",
49
- "@wordpress/date": "^5.27.0",
50
- "@wordpress/deprecated": "^4.27.0",
51
- "@wordpress/dom": "^4.27.0",
52
- "@wordpress/element": "^6.27.0",
53
- "@wordpress/escape-html": "^3.27.0",
54
- "@wordpress/hooks": "^4.27.0",
55
- "@wordpress/html-entities": "^4.27.0",
56
- "@wordpress/i18n": "^6.0.0",
57
- "@wordpress/icons": "^10.27.0",
58
- "@wordpress/is-shallow-equal": "^5.27.0",
59
- "@wordpress/keycodes": "^4.27.0",
60
- "@wordpress/primitives": "^4.27.0",
61
- "@wordpress/private-apis": "^1.27.0",
62
- "@wordpress/rich-text": "^7.27.0",
63
- "@wordpress/warning": "^3.27.0",
47
+ "@wordpress/a11y": "^4.28.0",
48
+ "@wordpress/compose": "^7.28.0",
49
+ "@wordpress/date": "^5.28.0",
50
+ "@wordpress/deprecated": "^4.28.0",
51
+ "@wordpress/dom": "^4.28.0",
52
+ "@wordpress/element": "^6.28.0",
53
+ "@wordpress/escape-html": "^3.28.0",
54
+ "@wordpress/hooks": "^4.28.0",
55
+ "@wordpress/html-entities": "^4.28.0",
56
+ "@wordpress/i18n": "^6.1.0",
57
+ "@wordpress/icons": "^10.28.0",
58
+ "@wordpress/is-shallow-equal": "^5.28.0",
59
+ "@wordpress/keycodes": "^4.28.0",
60
+ "@wordpress/primitives": "^4.28.0",
61
+ "@wordpress/private-apis": "^1.28.0",
62
+ "@wordpress/rich-text": "^7.28.0",
63
+ "@wordpress/warning": "^3.28.0",
64
64
  "change-case": "^4.1.2",
65
65
  "clsx": "^2.1.1",
66
66
  "colord": "^2.7.0",
@@ -86,5 +86,5 @@
86
86
  "publishConfig": {
87
87
  "access": "public"
88
88
  },
89
- "gitHead": "abe06a6f2aef8d03c30ea9d5b3e133f041e523b1"
89
+ "gitHead": "28cc2098f5ee28f89096b638533796538f495f72"
90
90
  }
@@ -91,6 +91,16 @@ export const ColorfulWrapper = styled.div`
91
91
 
92
92
  // Shown instead of box-shadow to Windows high contrast mode.
93
93
  outline: 2px solid transparent;
94
+
95
+ @media not ( prefers-reduced-motion ) {
96
+ transition: transform ${ CONFIG.transitionDurationFast } ease-in-out;
97
+ }
98
+ }
99
+
100
+ .react-colorful__interactive:focus .react-colorful__pointer {
101
+ box-shadow: 0 0 0 ${ CONFIG.borderWidthFocus } ${ CONFIG.surfaceColor };
102
+ border: ${ CONFIG.borderWidthFocus } solid black;
103
+ transform: translate( -50%, -50% ) scale( 1.5 );
94
104
  }
95
105
 
96
106
  .react-colorful__pointer-fill {
@@ -128,7 +128,7 @@
128
128
  flex-direction: row;
129
129
  justify-content: space-between;
130
130
  align-items: center;
131
- height: $header-height + $grid-unit-15;
131
+ height: $header-height + $grid-unit-10; // 72px
132
132
  width: 100%;
133
133
  z-index: z-index(".components-modal__header");
134
134
  position: absolute;
@@ -175,7 +175,7 @@
175
175
  // Modal contents.
176
176
  .components-modal__content {
177
177
  flex: 1;
178
- margin-top: $header-height + $grid-unit-15;
178
+ margin-top: $header-height + $grid-unit-10;
179
179
  // Small top padding required to avoid cutting off the visible outline when the first child element is focusable.
180
180
  padding: $grid-unit-05 $grid-unit-40 $grid-unit-40;
181
181
  overflow: auto;
@@ -22,7 +22,7 @@ import { useDebounce } from '@wordpress/compose';
22
22
  */
23
23
  import Button from '../button';
24
24
  import { ColorPicker } from '../color-picker';
25
- import { FlexItem } from '../flex';
25
+ import { FlexBlock, FlexItem } from '../flex';
26
26
  import { HStack } from '../h-stack';
27
27
  import { Item, ItemGroup } from '../item-group';
28
28
  import { VStack } from '../v-stack';
@@ -229,7 +229,7 @@ function Option< T extends PaletteElement >( {
229
229
  >
230
230
  <IndicatorStyled colorValue={ value } />
231
231
  </Button>
232
- <FlexItem>
232
+ <FlexBlock>
233
233
  { ! canOnlyChangeValues ? (
234
234
  <NameInput
235
235
  label={
@@ -256,7 +256,7 @@ function Option< T extends PaletteElement >( {
256
256
  '\u00A0' }
257
257
  </NameContainer>
258
258
  ) }
259
- </FlexItem>
259
+ </FlexBlock>
260
260
  { ! canOnlyChangeValues && (
261
261
  <FlexItem>
262
262
  <RemoveButton
@@ -12,6 +12,11 @@ import { lock } from './lock-unlock';
12
12
  import Badge from './badge';
13
13
 
14
14
  import { DateCalendar, DateRangeCalendar, TZDate } from './calendar';
15
+ import {
16
+ ValidatedNumberControl,
17
+ ValidatedTextControl,
18
+ ValidatedToggleControl,
19
+ } from './validated-form-controls';
15
20
 
16
21
  export const privateApis = {};
17
22
  lock( privateApis, {
@@ -27,4 +32,7 @@ lock( privateApis, {
27
32
  DateCalendar,
28
33
  DateRangeCalendar,
29
34
  TZDate,
35
+ ValidatedNumberControl,
36
+ ValidatedTextControl,
37
+ ValidatedToggleControl,
30
38
  } );
@@ -314,7 +314,7 @@ function UnforwardedRangeControl(
314
314
  <SimpleTooltip
315
315
  className="components-range-control__tooltip"
316
316
  inputRef={ inputRef }
317
- tooltipPosition="bottom"
317
+ tooltipPlacement="bottom"
318
318
  renderTooltipContent={ renderTooltipContent }
319
319
  show={ isCurrentlyFocused || showTooltip }
320
320
  style={ offsetStyle }
@@ -283,8 +283,8 @@ const tooltipShow = ( { show }: TooltipProps ) => {
283
283
  `;
284
284
  };
285
285
 
286
- const tooltipPosition = ( { position }: TooltipProps ) => {
287
- const isBottom = position === 'bottom';
286
+ const tooltipPlacement = ( { placement }: TooltipProps ) => {
287
+ const isBottom = placement === 'bottom';
288
288
 
289
289
  if ( isBottom ) {
290
290
  return css`
@@ -312,7 +312,7 @@ export const Tooltip = styled.span< TooltipProps >`
312
312
 
313
313
  ${ tooltipShow };
314
314
 
315
- ${ tooltipPosition };
315
+ ${ tooltipPlacement };
316
316
  ${ rtl(
317
317
  { transform: 'translateX(-50%)' },
318
318
  { transform: 'translateX(50%)' }
@@ -22,7 +22,7 @@ export default function SimpleTooltip(
22
22
  const {
23
23
  className,
24
24
  inputRef,
25
- tooltipPosition,
25
+ tooltipPlacement,
26
26
  show = false,
27
27
  style = {},
28
28
  value = 0,
@@ -30,7 +30,7 @@ export default function SimpleTooltip(
30
30
  zIndex = 100,
31
31
  ...restProps
32
32
  } = props;
33
- const position = useTooltipPosition( { inputRef, tooltipPosition } );
33
+ const placement = useTooltipPlacement( { inputRef, tooltipPlacement } );
34
34
  const classes = clsx( 'components-simple-tooltip', className );
35
35
  const styles = {
36
36
  ...style,
@@ -42,7 +42,7 @@ export default function SimpleTooltip(
42
42
  { ...restProps }
43
43
  aria-hidden="false"
44
44
  className={ classes }
45
- position={ position }
45
+ placement={ placement }
46
46
  show={ show }
47
47
  role="tooltip"
48
48
  style={ styles }
@@ -52,26 +52,26 @@ export default function SimpleTooltip(
52
52
  );
53
53
  }
54
54
 
55
- function useTooltipPosition( { inputRef, tooltipPosition }: TooltipProps ) {
56
- const [ position, setPosition ] = useState< string >();
55
+ function useTooltipPlacement( { inputRef, tooltipPlacement }: TooltipProps ) {
56
+ const [ placement, setPlacement ] = useState< string >();
57
57
 
58
- const setTooltipPosition = useCallback( () => {
58
+ const setTooltipPlacement = useCallback( () => {
59
59
  if ( inputRef && inputRef.current ) {
60
- setPosition( tooltipPosition );
60
+ setPlacement( tooltipPlacement );
61
61
  }
62
- }, [ tooltipPosition, inputRef ] );
62
+ }, [ tooltipPlacement, inputRef ] );
63
63
 
64
64
  useEffect( () => {
65
- setTooltipPosition();
66
- }, [ setTooltipPosition ] );
65
+ setTooltipPlacement();
66
+ }, [ setTooltipPlacement ] );
67
67
 
68
68
  useEffect( () => {
69
- window.addEventListener( 'resize', setTooltipPosition );
69
+ window.addEventListener( 'resize', setTooltipPlacement );
70
70
 
71
71
  return () => {
72
- window.removeEventListener( 'resize', setTooltipPosition );
72
+ window.removeEventListener( 'resize', setTooltipPlacement );
73
73
  };
74
74
  } );
75
75
 
76
- return position;
76
+ return placement;
77
77
  }
@@ -269,9 +269,9 @@ export type ThumbProps = {
269
269
 
270
270
  export type TooltipProps = {
271
271
  show?: boolean;
272
- position?: string;
272
+ placement?: string;
273
273
  inputRef?: MutableRefObject< HTMLElement | undefined >;
274
- tooltipPosition?: string;
274
+ tooltipPlacement?: string;
275
275
  value?: ControlledRangeValue;
276
276
  renderTooltipContent?: (
277
277
  value?: ControlledRangeValue
@@ -56,6 +56,7 @@ export const Default: StoryFn< typeof TextControl > = DefaultTemplate.bind(
56
56
  Default.args = {
57
57
  __nextHasNoMarginBottom: true,
58
58
  __next40pxDefaultSize: true,
59
+ placeholder: 'Placeholder',
59
60
  };
60
61
 
61
62
  export const WithLabelAndHelpText: StoryFn< typeof TextControl > =
@@ -18,7 +18,12 @@
18
18
  margin: 0;
19
19
  background: $components-color-background;
20
20
  color: $components-color-foreground;
21
- @include input-control( $components-color-accent);
21
+ @include input-control( $components-color-accent );
22
+ border-color: $components-color-border;
23
+
24
+ &::placeholder {
25
+ color: $components-color-dark-gray-placeholder;
26
+ }
22
27
 
23
28
  &.is-next-40px-default-size {
24
29
  height: $grid-unit-50;
@@ -1,3 +1,8 @@
1
+ /**
2
+ * External dependencies
3
+ */
4
+ import clsx from 'clsx';
5
+
1
6
  /**
2
7
  * WordPress dependencies
3
8
  */
@@ -32,6 +37,8 @@ function UnforwardedTextareaControl(
32
37
  const onChangeValue = ( event: React.ChangeEvent< HTMLTextAreaElement > ) =>
33
38
  onChange( event.target.value );
34
39
 
40
+ const classes = clsx( 'components-textarea-control', className );
41
+
35
42
  return (
36
43
  <BaseControl
37
44
  __nextHasNoMarginBottom={ __nextHasNoMarginBottom }
@@ -40,7 +47,7 @@ function UnforwardedTextareaControl(
40
47
  hideLabelFromVision={ hideLabelFromVision }
41
48
  id={ id }
42
49
  help={ help }
43
- className={ className }
50
+ className={ classes }
44
51
  >
45
52
  <StyledTextarea
46
53
  className="components-textarea-control__input"
@@ -24,5 +24,8 @@ $components-color-gray-600: var(--wp-components-color-gray-600, $gray-600);
24
24
  $components-color-gray-700: var(--wp-components-color-gray-700, $gray-700);
25
25
  $components-color-gray-800: var(--wp-components-color-gray-800, $gray-800);
26
26
 
27
+ $components-color-dark-gray-placeholder: color-mix(in srgb, $components-color-foreground, transparent 38%);
28
+ $components-color-light-gray-placeholder: color-mix(in srgb, $components-color-background, transparent 35%);
29
+
27
30
  // Semantic aliases (prefer these over raw gray values when applicable).
28
31
  $components-color-border: #{ $components-color-gray-600 };