@wordpress/components 25.14.0 → 25.15.1-next.79a6196f.0

package/CHANGELOG.md

@@ -2,10 +2,52 @@
 
 ## Unreleased
 
+## 25.15.0-next.0 (2024-01-11)
+
+### Bug Fix
+
+-   `NumberControl`: Make increment and decrement buttons keyboard accessible. ([#57402](https://github.com/WordPress/gutenberg/pull/57402)).
+-   `DropdownMenu V2`: better fallback on browsers that don't support CSS subgrid([#57327](https://github.com/WordPress/gutenberg/pull/57327)).
+-   `FontSizePicker`: Use Button API for keeping focus on reset ([#57221](https://github.com/WordPress/gutenberg/pull/57221)).
+-   `FontSizePicker`: Fix Reset button focus loss ([#57196](https://github.com/WordPress/gutenberg/pull/57196)).
+-   `PaletteEdit`: Consider digits when generating kebab-cased slug ([#56713](https://github.com/WordPress/gutenberg/pull/56713)).
+-   `FormTokenField`: Prevent focus being passed to internal buttons when component is disabled ([#57187](https://github.com/WordPress/gutenberg/pull/57187)).
+-   `Button`: Fix logic of `has-text` class addition ([#56949](https://github.com/WordPress/gutenberg/pull/56949)).
+-   `FormTokenField`: Fix a regression where the suggestion list would re-open after clicking away from the input ([#57002](https://github.com/WordPress/gutenberg/pull/57002)).
+-   `Snackbar`: Remove erroneous `__unstableHTML` prop from TypeScript definitions ([#57218](https://github.com/WordPress/gutenberg/pull/57218)).
+-   `Truncate`: improve handling of non-string `children` ([#57261](https://github.com/WordPress/gutenberg/pull/57261)).
+-   `PaletteEdit`: Don't discard colors with default name and slug ([#54332](https://github.com/WordPress/gutenberg/pull/54332)).
+-   `RadioControl`: Fully encapsulate styles ([#57347](https://github.com/WordPress/gutenberg/pull/57347)).
+-   `DuotonePicker`: Remove top margin when no duotone options ([#57489](https://github.com/WordPress/gutenberg/pull/57489)).
+-   `Snackbar`: Fix icon positioning ([#57377](https://github.com/WordPress/gutenberg/pull/57377)).
+-   `GradientPicker`: Use slug while iterating over gradient entries to avoid React "duplicated key" warning ([#57361](https://github.com/WordPress/gutenberg/pull/57361)).
+-   `NavigatorProvider`: Exclude `size` value from `contain` CSS rule ([#57498](https://github.com/WordPress/gutenberg/pull/57498)).
+
+### Enhancements
+
+-   Update `ariakit` to version `0.3.10` ([#57325](https://github.com/WordPress/gutenberg/pull/57325)).
+-   Update `@ariakit/react` to version `0.3.12` and @ariakit/test to version `0.3.7` ([#57547](https://github.com/WordPress/gutenberg/pull/57547)).
+-   `DropdownMenuV2`: do not collapse suffix width ([#57238](https://github.com/WordPress/gutenberg/pull/57238)).
+-   `DateTimePicker`: Adjustment of the dot position on DayButton and expansion of the button area. ([#55502](https://github.com/WordPress/gutenberg/pull/55502)).
+-   `Modal`: Improve application of body class names ([#55430](https://github.com/WordPress/gutenberg/pull/55430)).
+-   `BaseControl`: Connect to context system ([#57408](https://github.com/WordPress/gutenberg/pull/57408)).
+-   `InputControl`, `NumberControl`, `UnitControl`, `SelectControl`, `TreeSelect`: Add `compact` size variant ([#57398](https://github.com/WordPress/gutenberg/pull/57398)).
+-   `ToggleGroupControl`: Update button size in large variant to be 32px ([#57338](https://github.com/WordPress/gutenberg/pull/57338)).
+-   `Tooltip`: improve unit tests ([#57345](https://github.com/WordPress/gutenberg/pull/57345)).
+-   `Tooltip`: no-op when nested inside other `Tooltip` components ([#57202](https://github.com/WordPress/gutenberg/pull/57202)).
+
+### Experimental
+
+-   `DropdownMenuV2`: remove temporary radix UI based implementation ([#55626](https://github.com/WordPress/gutenberg/pull/55626)).
+-   `Tabs`: do not render hidden content ([#57046](https://github.com/WordPress/gutenberg/pull/57046)).
+-   `Tabs`: improve hover and text alignment styles ([#57275](https://github.com/WordPress/gutenberg/pull/57275)).
+-   `Tabs`: make sure `Tab`s are associated to the right `TabPanel`s, regardless of the order they're rendered in ([#57033](https://github.com/WordPress/gutenberg/pull/57033)).
+
 ## 25.14.0 (2023-12-13)
 
 ### Enhancements
 
+-   `Navigator`: use vanilla CSS animations instead of `framer-motion` ([#56909](https://github.com/WordPress/gutenberg/pull/56909)).
 -   `FormToggle`: fix sass deprecation warning ([#56672](https://github.com/WordPress/gutenberg/pull/56672)).
 -   `QueryControls`: Add opt-in prop for 40px default size ([#56576](https://github.com/WordPress/gutenberg/pull/56576)).
 -   `CheckboxControl`: Add option to not render label ([#56158](https://github.com/WordPress/gutenberg/pull/56158)).
@@ -13,20 +55,25 @@
 -   `FocalPointPicker`: Add opt-in prop for 40px default size ([#56021](https://github.com/WordPress/gutenberg/pull/56021)).
 -   `DimensionControl`: Add opt-in prop for 40px default size ([#56805](https://github.com/WordPress/gutenberg/pull/56805)).
 -   `FontSizePicker`: Add opt-in prop for 40px default size ([#56804](https://github.com/WordPress/gutenberg/pull/56804)).
+-   `ToolsPanel`/`ToolsPanelHeader`: Added `dropdownMenuProps` to allow customization of the panel's dropdown menu. Also merged default and optional control menu groups ([#55785](https://github.com/WordPress/gutenberg/pull/55785)).
 
 ### Bug Fix
+
 -   `PaletteEdit`: temporary custom gradient not saving ([#56896](https://github.com/WordPress/gutenberg/pull/56896)).
 -   `ToggleGroupControl`: react correctly to external controlled updates ([#56678](https://github.com/WordPress/gutenberg/pull/56678)).
 -   `ToolsPanel`: fix a performance issue ([#56770](https://github.com/WordPress/gutenberg/pull/56770)).
 -   `BorderControl`: adjust `BorderControlDropdown` Button size to fix misaligned border ([#56730](https://github.com/WordPress/gutenberg/pull/56730)).
+-   `SlotFillProvider`: Restore contextual Slot/Fills within SlotFillProvider ([#56779](https://github.com/WordPress/gutenberg/pull/56779)).
 
 ### Internal
 
 -   `DropdownMenuV2Ariakit`: prevent prefix collapsing if all radios or checkboxes are unselected ([#56720](https://github.com/WordPress/gutenberg/pull/56720)).
+-   Move `kebabCase()` function from `block-editor` package and mark it as private API ([#56758](https://github.com/WordPress/gutenberg/pull/56758)).
 
 ### Experimental
 
 -   `Tabs`: implement new `tabId` prop ([#56883](https://github.com/WordPress/gutenberg/pull/56883)).
+-   `CustomSelect`: add `WordPressComponentsProps` for more flexibility ([#56998](https://github.com/WordPress/gutenberg/pull/56998))
 
 ### Experimental
 
@@ -66,6 +113,10 @@
 -   `Slot`: add `style` prop to `bubblesVirtually` version ([#56428](https://github.com/WordPress/gutenberg/pull/56428))
 -   Introduce experimental new version of `CustomSelectControl` based on `ariakit` ([#55790](https://github.com/WordPress/gutenberg/pull/55790))
 
+### Code Quality
+
+-   `Composite`: add unit tests for `useCompositeState` ([#56645](https://github.com/WordPress/gutenberg/pull/56645)).
+
 ## 25.12.0 (2023-11-16)
 
 ### Bug Fix

package/CONTRIBUTING.md

@@ -19,8 +19,6 @@ For an example of a component that follows these requirements, take a look at [`
 - [Documentation](#documentation)
 - [README example](#README-example)
 - [Folder structure](#folder-structure)
-- [TypeScript migration guide](#refactoring-a-component-to-typescript)
-- [Using Radix UI primitives](#using-radix-ui-primitives)
 
 ## Introducing new components
 
@@ -239,7 +237,63 @@ TDB -->
 
 ## TypeScript
 
-We strongly encourage using TypeScript for all new components. Components should be typed using the `WordPressComponent` type.
+We strongly encourage using TypeScript for all new components.
+
+Extend existing components’ props if possible, especially when a component internally forwards its props to another component in the package:
+
+```ts
+type NumberControlProps = Omit<
+	InputControlProps,
+	'isDragEnabled' | 'min' | 'max'
+> & {
+	/* Additional props specific to NumberControl */
+};
+```
+
+Use JSDocs syntax for each TypeScript property that is part of the public API of a component. The docs used here should be aligned with the component’s README. Add `@default` values where appropriate:
+
+```ts
+/**
+ * Renders with elevation styles (box shadow).
+ *
+ * @default false
+ * @deprecated
+ */
+isElevated?: boolean;
+```
+
+Prefer `unknown` to `any`, and in general avoid it when possible.
+
+If the component forwards its `...restProps` to an underlying element/component, you should use the `WordPressComponentProps` type for the component's props:
+
+```ts
+import type { WordPressComponentProps } from '../context';
+import type { ComponentOwnProps } from './types';
+
+function UnconnectedMyComponent(
+	// The resulting type will include:
+	// - all props defined in `ComponentOwnProps`
+	// - all HTML props/attributes from the component specified as the second
+	//   parameter (`div` in this example)
+	// - the special `as` prop (which marks the component as polymorphic),
+	//   unless the third parameter is `false`
+	props:  WordPressComponentProps< ComponentOwnProps, 'div', true >
+) { /* ... */ }
+```
+
+### Considerations for the docgen
+
+Make sure you have a **named** export for the component, not just the default export ([example](https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/divider/component.tsx)). This ensures that the docgen can properly extract the types data. The naming should be so that the connected/forwarded component has the plain component name (`MyComponent`), and the raw component is prefixed (`UnconnectedMyComponent` or `UnforwardedMyComponent`). This makes the component's `displayName` look nicer in React devtools and in the autogenerated Storybook code snippets.
+
+```js
+function UnconnectedMyComponent() { /* ... */ }
+
+// 👇 Without this named export, the docgen will not work!
+export const MyComponent = contextConnect( UnconnectedMyComponent, 'MyComponent' );
+export default MyComponent;
+```
+
+On the component's main named export, add a JSDoc comment that includes the main description and the example code snippet from the README ([example](https://github.com/WordPress/gutenberg/blob/43d9c82922619c1d1ff6b454f86f75c3157d3de6/packages/components/src/date-time/date-time/index.tsx#L193-L217)). _At the time of writing, the `@example` JSDoc keyword is not recognized by StoryBook's docgen, so please avoid using it_.
 
 <!-- TODO: add to the previous paragraph once the composision section gets added to this document.
 (more details about polymorphism can be found above in the "Components composition" section). -->
@@ -537,115 +591,3 @@ component-family-name/
 ├── types.ts
 └── utils.ts
 ```
-
-## Refactoring a component to TypeScript
-
-*Note: This section assumes that the local developer environment is set up correctly, including TypeScript linting. We also strongly recommend using an IDE that supports TypeScript.*
-
-Given a component folder (e.g. `packages/components/src/unit-control`):
-
-1. Remove the folder from the exclude list in `tsconfig.json`, if it isn’t already.
-2. Remove any `// @ts-nocheck` comments in the folder, if any.
-3. Rename `*.js{x}` files to `*.ts{x}` (except stories and unit tests).
-4. Run `npm run dev` and take note of all the errors (your IDE should also flag them).
-5. Since we want to focus on one component’s folder at the time, if any errors are coming from files outside of the folder that is being refactored, there are two potential approaches:
-	1. Following those same guidelines, refactor those dependencies first.
-		1. Ideally, start from the “leaf” of the dependency tree and slowly work your way up the chain.
-		2. Resume work on this component once all dependencies have been refactored.
-	2. Alternatively:
-		1. For each of those files, add `// @ts-nocheck` at the start of the file.
-		2. If the components in the ignored files are destructuring props directly from the function's arguments, move the props destructuring to the function's body (this is to avoid TypeScript errors from trying to infer the props type):
-
-			```jsx
-			// Before:
-			function MyComponent( { myProp1, myProp2, ...restProps } ) { /* ... */ }
-
-			// After:
-			function MyComponent( props ) {
-				const {  myProp1, myProp2, ...restProps } = props;
-
-				/* ... */
-			}
-			```
-
-		3. Remove the folders from the exclude list in the `tsconfig.json` file.
-		4. If you’re still getting errors about a component’s props, the easiest way is to slightly refactor this component and perform the props destructuring inside the component’s body (as opposed as in the function signature) — this is to prevent TypeScript from inferring the types of these props.
-		5. Continue with the refactor of the current component (and take care of the refactor of the dependent components at a later stage).
-6. Create a new `types.ts` file.
-7. Slowly work your way through fixing the TypeScript errors in the folder:
-	1. Try to avoid introducing any runtime changes, if possible. The aim of this refactor is to simply rewrite the component to TypeScript.
-	2. Extract props to `types.ts`, and use them to type components. The README can be of help when determining a prop’s type.
-	3. Use existing HTML types when possible? (e.g. `required` for an input field?)
-	4. Use the `CSSProperties` type where it makes sense.
-	5. Extend existing components’ props if possible, especially when a component internally forwards its props to another component in the package.
-	6. If the component forwards its `...restProps` to an underlying element/component, you should use the `WordPressComponentProps` type for the component's props:
-
-		```tsx
-		import type { WordPressComponentProps } from '../context';
-		import type { ComponentOwnProps } from './types';
-
-		function UnconnectedMyComponent(
-			// The resulting type will include:
-			// - all props defined in `ComponentOwnProps`
-			// - all HTML props/attributes from the component specified as the second
-			//   parameter (`div` in this example)
-			// - the special `as` prop (which marks the component as polymorphic),
-			//   unless the third parameter is `false`
-			props:  WordPressComponentProps< ComponentOwnProps, 'div', true >
-		) { /* ... */ }
-		```
-
-	7. As shown in the previous examples, make sure you have a **named** export for the component, not just the default export ([example](https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/divider/component.tsx)). This ensures that the docgen can properly extract the types data. The naming should be so that the connected/forwarded component has the plain component name (`MyComponent`), and the raw component is prefixed (`UnconnectedMyComponent` or `UnforwardedMyComponent`). This makes the component's `displayName` look nicer in React devtools and in the autogenerated Storybook code snippets.
-
-		```jsx
-		function UnconnectedMyComponent() { /* ... */ }
-
-		// 👇 Without this named export, the docgen will not work!
-		export const MyComponent = contextConnect( UnconnectedMyComponent, 'MyComponent' );
-		export default MyComponent;
-		```
-
-	8. Use JSDocs syntax for each TypeScript property that is part of the public API of a component. The docs used here should be aligned with the component’s README. Add `@default` values where appropriate.
-	9. Prefer `unknown` to `any`, and in general avoid it when possible.
-8. On the component's main named export, add a JSDoc comment that includes the main description and the example code snippet from the README ([example](https://github.com/WordPress/gutenberg/blob/43d9c82922619c1d1ff6b454f86f75c3157d3de6/packages/components/src/date-time/date-time/index.tsx#L193-L217)). _At the time of writing, the `@example` JSDoc keyword is not recognized by StoryBook's docgen, so please avoid using it_.
-9. Make sure that:
-	1. tests still pass;
-	2. storybook examples work as expected.
-	3. the component still works as expected in its usage in Gutenberg;
-	4. the JSDocs comments on `types.ts` and README docs are aligned.
-10. Convert Storybook examples to TypeScript (and from knobs to controls, if necessary) ([example](https://github.com/WordPress/gutenberg/pull/39320)).
-	1. Update all consumers of the component to potentially extend the newly added types (e.g. make `UnitControl` props extend `NumberControl` props after `NumberControl` types are made available).
-	2. Rename Story extension from `.js` to `.tsx`.
-	3. Rewrite the `meta` story object, and export it as default. In particular, make sure you add the following settings under the `parameters` key:
-
-		```tsx
-		const meta: Meta< typeof MyComponent > = {
-			parameters: {
-				controls: { expanded: true },
-				docs: { canvas: { sourceState: 'shown' } },
-			},
-		};
-		```
-
-		These options will display prop descriptions in the `Canvas ▸ Controls` tab, and expand code snippets in the `Docs` tab.
-
-	4. Go to the component in Storybook and check the props table in the Docs tab. If there are props that shouldn't be there, check that your types are correct, or consider `Omit`-ing props that shouldn't be exposed.
-		1. Use the `parameters.controls.exclude` property on the `meta` object to hide props from the docs.
-		2. Use the `argTypes` prop on the `meta` object to customize how each prop in the docs can be interactively controlled by the user (tip: use `control: { type: null }` to remove the interactive controls from a prop, without hiding the prop from the docs).
-		3. See the [official docs](https://storybook.js.org/docs/react/essentials/controls) for more details.
-	5. Comment out all existing stories.
-	6. Create a default template, where the component is being used in the most “vanilla” way possible.
-	7. Use the template for the `Default` story, which will serve as an interactive doc playground.
-	8. Add more focused stories as you see fit. These non-default stories should illustrate specific scenarios and usages of the component. A developer looking at the Docs tab should be able to understand what each story is demonstrating. Add JSDoc comments to stories when necessary.
-11. Convert unit tests.
-	1. Rename test file extensions from `.js` to `.tsx`.
-	2. Fix all TypeScript errors.
-
-## Using Radix UI primitives
-
-Useful links:
-
-- [online docs](https://www.radix-ui.com/docs/primitives/overview/introduction)
-- [repo](https://github.com/radix-ui/primitives) — useful for:
-    - inspecting source code
-    - running storybook examples (`yarn install && yarn dev`)

package/LICENSE.md

@@ -1,6 +1,6 @@
 ## Gutenberg
 
-    Copyright 2016-2023 by the contributors
+    Copyright 2016-2024 by the contributors
 
 **License for Contributions (on and after April 15, 2021)**
 

package/build/base-control/index.js

@@ -15,6 +15,7 @@ var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _visuallyHidden = require("../visually-hidden");
 var _baseControlStyles = require("./styles/base-control-styles");
+var _context = require("../context");
 var _hooks = require("./hooks");
 /**
  * External dependencies
@@ -47,17 +48,18 @@ var _hooks = require("./hooks");
  * );
  * ```
  */
-const BaseControl = ({
-  __nextHasNoMarginBottom = false,
-  id,
-  label,
-  hideLabelFromVision = false,
-  help,
-  className,
-  children
-}) => {
+const UnconnectedBaseControl = props => {
+  const {
+    __nextHasNoMarginBottom = false,
+    id,
+    label,
+    hideLabelFromVision = false,
+    help,
+    className,
+    children
+  } = (0, _context.useContextSystem)(props, 'BaseControl');
   return (0, _react.createElement)(_baseControlStyles.Wrapper, {
-    className: (0, _classnames.default)('components-base-control', className)
+    className: className
   }, (0, _react.createElement)(_baseControlStyles.StyledField, {
     className: "components-base-control__field"
     // TODO: Official deprecation for this should start after all internal usages have been migrated
@@ -71,7 +73,7 @@ const BaseControl = ({
     htmlFor: id
   }, label)), label && !id && (hideLabelFromVision ? (0, _react.createElement)(_visuallyHidden.VisuallyHidden, {
     as: "label"
-  }, label) : (0, _react.createElement)(BaseControl.VisualLabel, null, label)), children), !!help && (0, _react.createElement)(_baseControlStyles.StyledHelp, {
+  }, label) : (0, _react.createElement)(VisualLabel, null, label)), children), !!help && (0, _react.createElement)(_baseControlStyles.StyledHelp, {
     id: id ? id + '__help' : undefined,
     className: "components-base-control__help",
     __nextHasNoMarginBottom: __nextHasNoMarginBottom
@@ -95,7 +97,6 @@ const BaseControl = ({
  * 	</BaseControl>
  * );
  */
-exports.BaseControl = BaseControl;
 const VisualLabel = ({
   className,
   children,
@@ -107,7 +108,10 @@ const VisualLabel = ({
   }, children);
 };
 exports.VisualLabel = VisualLabel;
-BaseControl.VisualLabel = VisualLabel;
+const BaseControl = Object.assign((0, _context.contextConnectWithoutRef)(UnconnectedBaseControl, 'BaseControl'), {
+  VisualLabel
+});
+exports.BaseControl = BaseControl;
 var _default = BaseControl;
 exports.default = _default;
 //# sourceMappingURL=index.js.map

package/build/base-control/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_classnames","_interopRequireDefault","require","_visuallyHidden","_baseControlStyles","_hooks","BaseControl","__nextHasNoMarginBottom","id","label","hideLabelFromVision","help","className","children","_react","createElement","Wrapper","classnames","StyledField","VisuallyHidden","as","htmlFor","StyledLabel","VisualLabel","StyledHelp","undefined","exports","props","StyledVisualLabel","_default","default"],"sources":["@wordpress/components/src/base-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * Internal dependencies\n */\nimport { VisuallyHidden } from '../visually-hidden';\nimport type { BaseControlProps, BaseControlVisualLabelProps } from './types';\nimport {\n\tWrapper,\n\tStyledField,\n\tStyledLabel,\n\tStyledHelp,\n\tStyledVisualLabel,\n} from './styles/base-control-styles';\nimport type { WordPressComponentProps } from '../context';\n\nexport { useBaseControlProps } from './hooks';\n\n/**\n * `BaseControl` is a component used to generate labels and help text for components handling user inputs.\n *\n * ```jsx\n * import { BaseControl, useBaseControlProps } from '@wordpress/components';\n *\n * // Render a `BaseControl` for a textarea input\n * const MyCustomTextareaControl = ({ children, ...baseProps }) => (\n * \t// `useBaseControlProps` is a convenience hook to get the props for the `BaseControl`\n * \t// and the inner control itself. Namely, it takes care of generating a unique `id`,\n * \t// properly associating it with the `label` and `help` elements.\n * \tconst { baseControlProps, controlProps } = useBaseControlProps( baseProps );\n *\n * \treturn (\n * \t\t<BaseControl { ...baseControlProps } __nextHasNoMarginBottom={ true }>\n * \t\t\t<textarea { ...controlProps }>\n * \t\t\t  { children }\n * \t\t\t</textarea>\n * \t\t</BaseControl>\n * \t);\n * );\n * ```\n */\nexport const BaseControl = ( {\n\t__nextHasNoMarginBottom = false,\n\tid,\n\tlabel,\n\thideLabelFromVision = false,\n\thelp,\n\tclassName,\n\tchildren,\n}: BaseControlProps ) => {\n\treturn (\n\t\t<Wrapper\n\t\t\tclassName={ classnames( 'components-base-control', className ) }\n\t\t>\n\t\t\t<StyledField\n\t\t\t\tclassName=\"components-base-control__field\"\n\t\t\t\t// TODO: Official deprecation for this should start after all internal usages have been migrated\n\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t>\n\t\t\t\t{ label &&\n\t\t\t\t\tid &&\n\t\t\t\t\t( hideLabelFromVision ? (\n\t\t\t\t\t\t<VisuallyHidden as=\"label\" htmlFor={ id }>\n\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<StyledLabel\n\t\t\t\t\t\t\tclassName=\"components-base-control__label\"\n\t\t\t\t\t\t\thtmlFor={ id }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t</StyledLabel>\n\t\t\t\t\t) ) }\n\t\t\t\t{ label &&\n\t\t\t\t\t! id &&\n\t\t\t\t\t( hideLabelFromVision ? (\n\t\t\t\t\t\t<VisuallyHidden as=\"label\">{ label }</VisuallyHidden>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<BaseControl.VisualLabel>\n\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t\t) ) }\n\t\t\t\t{ children }\n\t\t\t</StyledField>\n\t\t\t{ !! help && (\n\t\t\t\t<StyledHelp\n\t\t\t\t\tid={ id ? id + '__help' : undefined }\n\t\t\t\t\tclassName=\"components-base-control__help\"\n\t\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t\t>\n\t\t\t\t\t{ help }\n\t\t\t\t</StyledHelp>\n\t\t\t) }\n\t\t</Wrapper>\n\t);\n};\n\n/**\n * `BaseControl.VisualLabel` is used to render a purely visual label inside a `BaseControl` component.\n *\n * It should only be used in cases where the children being rendered inside `BaseControl` are already accessibly labeled,\n * e.g., a button, but we want an additional visual label for that section equivalent to the labels `BaseControl` would\n * otherwise use if the `label` prop was passed.\n *\n * @example\n * import { BaseControl } from '@wordpress/components';\n *\n * const MyBaseControl = () => (\n * \t<BaseControl help=\"This button is already accessibly labeled.\">\n * \t\t<BaseControl.VisualLabel>Author</BaseControl.VisualLabel>\n * \t\t<Button>Select an author</Button>\n * \t</BaseControl>\n * );\n */\nexport const VisualLabel = ( {\n\tclassName,\n\tchildren,\n\t...props\n}: WordPressComponentProps< BaseControlVisualLabelProps, 'span' > ) => {\n\treturn (\n\t\t<StyledVisualLabel\n\t\t\t{ ...props }\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-base-control__label',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t{ children }\n\t\t</StyledVisualLabel>\n\t);\n};\nBaseControl.VisualLabel = VisualLabel;\n\nexport default BaseControl;\n"],"mappings":";;;;;;;;;;;;;;AAGA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,eAAA,GAAAD,OAAA;AAEA,IAAAE,kBAAA,GAAAF,OAAA;AASA,IAAAG,MAAA,GAAAH,OAAA;AAnBA;AACA;AACA;;AAGA;AACA;AACA;;AAcA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMI,WAAW,GAAGA,CAAE;EAC5BC,uBAAuB,GAAG,KAAK;EAC/BC,EAAE;EACFC,KAAK;EACLC,mBAAmB,GAAG,KAAK;EAC3BC,IAAI;EACJC,SAAS;EACTC;AACiB,CAAC,KAAM;EACxB,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACX,kBAAA,CAAAY,OAAO;IACPJ,SAAS,EAAG,IAAAK,mBAAU,EAAE,yBAAyB,EAAEL,SAAU;EAAG,GAEhE,IAAAE,MAAA,CAAAC,aAAA,EAACX,kBAAA,CAAAc,WAAW;IACXN,SAAS,EAAC;IACV;IAAA;IACAL,uBAAuB,EAAGA;EAAyB,GAEjDE,KAAK,IACND,EAAE,KACAE,mBAAmB,GACpB,IAAAI,MAAA,CAAAC,aAAA,EAACZ,eAAA,CAAAgB,cAAc;IAACC,EAAE,EAAC,OAAO;IAACC,OAAO,EAAGb;EAAI,GACtCC,KACa,CAAC,GAEjB,IAAAK,MAAA,CAAAC,aAAA,EAACX,kBAAA,CAAAkB,WAAW;IACXV,SAAS,EAAC,gCAAgC;IAC1CS,OAAO,EAAGb;EAAI,GAEZC,KACU,CACb,CAAE,EACFA,KAAK,IACN,CAAED,EAAE,KACFE,mBAAmB,GACpB,IAAAI,MAAA,CAAAC,aAAA,EAACZ,eAAA,CAAAgB,cAAc;IAACC,EAAE,EAAC;EAAO,GAAGX,KAAuB,CAAC,GAErD,IAAAK,MAAA,CAAAC,aAAA,EAACT,WAAW,CAACiB,WAAW,QACrBd,KACsB,CACzB,CAAE,EACFI,QACU,CAAC,EACZ,CAAC,CAAEF,IAAI,IACR,IAAAG,MAAA,CAAAC,aAAA,EAACX,kBAAA,CAAAoB,UAAU;IACVhB,EAAE,EAAGA,EAAE,GAAGA,EAAE,GAAG,QAAQ,GAAGiB,SAAW;IACrCb,SAAS,EAAC,+BAA+B;IACzCL,uBAAuB,EAAGA;EAAyB,GAEjDI,IACS,CAEL,CAAC;AAEZ,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAhBAe,OAAA,CAAApB,WAAA,GAAAA,WAAA;AAiBO,MAAMiB,WAAW,GAAGA,CAAE;EAC5BX,SAAS;EACTC,QAAQ;EACR,GAAGc;AAC4D,CAAC,KAAM;EACtE,OACC,IAAAb,MAAA,CAAAC,aAAA,EAACX,kBAAA,CAAAwB,iBAAiB;IAAA,GACZD,KAAK;IACVf,SAAS,EAAG,IAAAK,mBAAU,EACrB,gCAAgC,EAChCL,SACD;EAAG,GAEDC,QACgB,CAAC;AAEtB,CAAC;AAACa,OAAA,CAAAH,WAAA,GAAAA,WAAA;AACFjB,WAAW,CAACiB,WAAW,GAAGA,WAAW;AAAC,IAAAM,QAAA,GAEvBvB,WAAW;AAAAoB,OAAA,CAAAI,OAAA,GAAAD,QAAA"}
+{"version":3,"names":["_classnames","_interopRequireDefault","require","_visuallyHidden","_baseControlStyles","_context","_hooks","UnconnectedBaseControl","props","__nextHasNoMarginBottom","id","label","hideLabelFromVision","help","className","children","useContextSystem","_react","createElement","Wrapper","StyledField","VisuallyHidden","as","htmlFor","StyledLabel","VisualLabel","StyledHelp","undefined","StyledVisualLabel","classnames","exports","BaseControl","Object","assign","contextConnectWithoutRef","_default","default"],"sources":["@wordpress/components/src/base-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * Internal dependencies\n */\nimport { VisuallyHidden } from '../visually-hidden';\nimport type { BaseControlProps, BaseControlVisualLabelProps } from './types';\nimport {\n\tWrapper,\n\tStyledField,\n\tStyledLabel,\n\tStyledHelp,\n\tStyledVisualLabel,\n} from './styles/base-control-styles';\nimport type { WordPressComponentProps } from '../context';\nimport { contextConnectWithoutRef, useContextSystem } from '../context';\n\nexport { useBaseControlProps } from './hooks';\n\n/**\n * `BaseControl` is a component used to generate labels and help text for components handling user inputs.\n *\n * ```jsx\n * import { BaseControl, useBaseControlProps } from '@wordpress/components';\n *\n * // Render a `BaseControl` for a textarea input\n * const MyCustomTextareaControl = ({ children, ...baseProps }) => (\n * \t// `useBaseControlProps` is a convenience hook to get the props for the `BaseControl`\n * \t// and the inner control itself. Namely, it takes care of generating a unique `id`,\n * \t// properly associating it with the `label` and `help` elements.\n * \tconst { baseControlProps, controlProps } = useBaseControlProps( baseProps );\n *\n * \treturn (\n * \t\t<BaseControl { ...baseControlProps } __nextHasNoMarginBottom={ true }>\n * \t\t\t<textarea { ...controlProps }>\n * \t\t\t  { children }\n * \t\t\t</textarea>\n * \t\t</BaseControl>\n * \t);\n * );\n * ```\n */\nconst UnconnectedBaseControl = (\n\tprops: WordPressComponentProps< BaseControlProps, null >\n) => {\n\tconst {\n\t\t__nextHasNoMarginBottom = false,\n\t\tid,\n\t\tlabel,\n\t\thideLabelFromVision = false,\n\t\thelp,\n\t\tclassName,\n\t\tchildren,\n\t} = useContextSystem( props, 'BaseControl' );\n\n\treturn (\n\t\t<Wrapper className={ className }>\n\t\t\t<StyledField\n\t\t\t\tclassName=\"components-base-control__field\"\n\t\t\t\t// TODO: Official deprecation for this should start after all internal usages have been migrated\n\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t>\n\t\t\t\t{ label &&\n\t\t\t\t\tid &&\n\t\t\t\t\t( hideLabelFromVision ? (\n\t\t\t\t\t\t<VisuallyHidden as=\"label\" htmlFor={ id }>\n\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<StyledLabel\n\t\t\t\t\t\t\tclassName=\"components-base-control__label\"\n\t\t\t\t\t\t\thtmlFor={ id }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t</StyledLabel>\n\t\t\t\t\t) ) }\n\t\t\t\t{ label &&\n\t\t\t\t\t! id &&\n\t\t\t\t\t( hideLabelFromVision ? (\n\t\t\t\t\t\t<VisuallyHidden as=\"label\">{ label }</VisuallyHidden>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<VisualLabel>{ label }</VisualLabel>\n\t\t\t\t\t) ) }\n\t\t\t\t{ children }\n\t\t\t</StyledField>\n\t\t\t{ !! help && (\n\t\t\t\t<StyledHelp\n\t\t\t\t\tid={ id ? id + '__help' : undefined }\n\t\t\t\t\tclassName=\"components-base-control__help\"\n\t\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t\t>\n\t\t\t\t\t{ help }\n\t\t\t\t</StyledHelp>\n\t\t\t) }\n\t\t</Wrapper>\n\t);\n};\n\n/**\n * `BaseControl.VisualLabel` is used to render a purely visual label inside a `BaseControl` component.\n *\n * It should only be used in cases where the children being rendered inside `BaseControl` are already accessibly labeled,\n * e.g., a button, but we want an additional visual label for that section equivalent to the labels `BaseControl` would\n * otherwise use if the `label` prop was passed.\n *\n * @example\n * import { BaseControl } from '@wordpress/components';\n *\n * const MyBaseControl = () => (\n * \t<BaseControl help=\"This button is already accessibly labeled.\">\n * \t\t<BaseControl.VisualLabel>Author</BaseControl.VisualLabel>\n * \t\t<Button>Select an author</Button>\n * \t</BaseControl>\n * );\n */\nexport const VisualLabel = ( {\n\tclassName,\n\tchildren,\n\t...props\n}: WordPressComponentProps< BaseControlVisualLabelProps, 'span' > ) => {\n\treturn (\n\t\t<StyledVisualLabel\n\t\t\t{ ...props }\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-base-control__label',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t{ children }\n\t\t</StyledVisualLabel>\n\t);\n};\n\nexport const BaseControl = Object.assign(\n\tcontextConnectWithoutRef( UnconnectedBaseControl, 'BaseControl' ),\n\t{ VisualLabel }\n);\n\nexport default BaseControl;\n"],"mappings":";;;;;;;;;;;;;;AAGA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,eAAA,GAAAD,OAAA;AAEA,IAAAE,kBAAA,GAAAF,OAAA;AAQA,IAAAG,QAAA,GAAAH,OAAA;AAEA,IAAAI,MAAA,GAAAJ,OAAA;AApBA;AACA;AACA;;AAGA;AACA;AACA;;AAeA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMK,sBAAsB,GAC3BC,KAAwD,IACpD;EACJ,MAAM;IACLC,uBAAuB,GAAG,KAAK;IAC/BC,EAAE;IACFC,KAAK;IACLC,mBAAmB,GAAG,KAAK;IAC3BC,IAAI;IACJC,SAAS;IACTC;EACD,CAAC,GAAG,IAAAC,yBAAgB,EAAER,KAAK,EAAE,aAAc,CAAC;EAE5C,OACC,IAAAS,MAAA,CAAAC,aAAA,EAACd,kBAAA,CAAAe,OAAO;IAACL,SAAS,EAAGA;EAAW,GAC/B,IAAAG,MAAA,CAAAC,aAAA,EAACd,kBAAA,CAAAgB,WAAW;IACXN,SAAS,EAAC;IACV;IAAA;IACAL,uBAAuB,EAAGA;EAAyB,GAEjDE,KAAK,IACND,EAAE,KACAE,mBAAmB,GACpB,IAAAK,MAAA,CAAAC,aAAA,EAACf,eAAA,CAAAkB,cAAc;IAACC,EAAE,EAAC,OAAO;IAACC,OAAO,EAAGb;EAAI,GACtCC,KACa,CAAC,GAEjB,IAAAM,MAAA,CAAAC,aAAA,EAACd,kBAAA,CAAAoB,WAAW;IACXV,SAAS,EAAC,gCAAgC;IAC1CS,OAAO,EAAGb;EAAI,GAEZC,KACU,CACb,CAAE,EACFA,KAAK,IACN,CAAED,EAAE,KACFE,mBAAmB,GACpB,IAAAK,MAAA,CAAAC,aAAA,EAACf,eAAA,CAAAkB,cAAc;IAACC,EAAE,EAAC;EAAO,GAAGX,KAAuB,CAAC,GAErD,IAAAM,MAAA,CAAAC,aAAA,EAACO,WAAW,QAAGd,KAAoB,CACnC,CAAE,EACFI,QACU,CAAC,EACZ,CAAC,CAAEF,IAAI,IACR,IAAAI,MAAA,CAAAC,aAAA,EAACd,kBAAA,CAAAsB,UAAU;IACVhB,EAAE,EAAGA,EAAE,GAAGA,EAAE,GAAG,QAAQ,GAAGiB,SAAW;IACrCb,SAAS,EAAC,+BAA+B;IACzCL,uBAAuB,EAAGA;EAAyB,GAEjDI,IACS,CAEL,CAAC;AAEZ,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMY,WAAW,GAAGA,CAAE;EAC5BX,SAAS;EACTC,QAAQ;EACR,GAAGP;AAC4D,CAAC,KAAM;EACtE,OACC,IAAAS,MAAA,CAAAC,aAAA,EAACd,kBAAA,CAAAwB,iBAAiB;IAAA,GACZpB,KAAK;IACVM,SAAS,EAAG,IAAAe,mBAAU,EACrB,gCAAgC,EAChCf,SACD;EAAG,GAEDC,QACgB,CAAC;AAEtB,CAAC;AAACe,OAAA,CAAAL,WAAA,GAAAA,WAAA;AAEK,MAAMM,WAAW,GAAGC,MAAM,CAACC,MAAM,CACvC,IAAAC,iCAAwB,EAAE3B,sBAAsB,EAAE,aAAc,CAAC,EACjE;EAAEkB;AAAY,CACf,CAAC;AAACK,OAAA,CAAAC,WAAA,GAAAA,WAAA;AAAA,IAAAI,QAAA,GAEaJ,WAAW;AAAAD,OAAA,CAAAM,OAAA,GAAAD,QAAA"}

package/build/border-box-control/border-box-control-linked-button/component.js

@@ -34,7 +34,7 @@ const BorderBoxControlLinkedButton = (props, forwardedRef) => {
     className: className
   }, (0, _react.createElement)(_button.default, {
     ...buttonProps,
-    isSmall: true,
+    size: "small",
     icon: isLinked ? _icons.link : _icons.linkOff,
     iconSize: 24,
     "aria-label": label,

package/build/border-box-control/border-box-control-linked-button/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["_icons","require","_i18n","_button","_interopRequireDefault","_tooltip","_view","_context","_hook","BorderBoxControlLinkedButton","props","forwardedRef","className","isLinked","buttonProps","useBorderBoxControlLinkedButton","label","__","_react","createElement","default","text","View","isSmall","icon","link","linkOff","iconSize","ref","ConnectedBorderBoxControlLinkedButton","contextConnect","_default","exports"],"sources":["@wordpress/components/src/border-box-control/border-box-control-linked-button/component.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { link, linkOff } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Button from '../../button';\nimport Tooltip from '../../tooltip';\nimport { View } from '../../view';\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport { useBorderBoxControlLinkedButton } from './hook';\n\nimport type { LinkedButtonProps } from '../types';\n\nconst BorderBoxControlLinkedButton = (\n\tprops: WordPressComponentProps< LinkedButtonProps, 'button' >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst { className, isLinked, ...buttonProps } =\n\t\tuseBorderBoxControlLinkedButton( props );\n\tconst label = isLinked ? __( 'Unlink sides' ) : __( 'Link sides' );\n\n\treturn (\n\t\t<Tooltip text={ label }>\n\t\t\t<View className={ className }>\n\t\t\t\t<Button\n\t\t\t\t\t{ ...buttonProps }\n\t\t\t\t\tisSmall\n\t\t\t\t\ticon={ isLinked ? link : linkOff }\n\t\t\t\t\ticonSize={ 24 }\n\t\t\t\t\taria-label={ label }\n\t\t\t\t\tref={ forwardedRef }\n\t\t\t\t/>\n\t\t\t</View>\n\t\t</Tooltip>\n\t);\n};\n\nconst ConnectedBorderBoxControlLinkedButton = contextConnect(\n\tBorderBoxControlLinkedButton,\n\t'BorderBoxControlLinkedButton'\n);\nexport default ConnectedBorderBoxControlLinkedButton;\n"],"mappings":";;;;;;;;AAGA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAKA,IAAAE,OAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,QAAA,GAAAD,sBAAA,CAAAH,OAAA;AACA,IAAAK,KAAA,GAAAL,OAAA;AAEA,IAAAM,QAAA,GAAAN,OAAA;AACA,IAAAO,KAAA,GAAAP,OAAA;AAdA;AACA;AACA;;AAIA;AACA;AACA;;AAUA,MAAMQ,4BAA4B,GAAGA,CACpCC,KAA6D,EAC7DC,YAAuC,KACnC;EACJ,MAAM;IAAEC,SAAS;IAAEC,QAAQ;IAAE,GAAGC;EAAY,CAAC,GAC5C,IAAAC,qCAA+B,EAAEL,KAAM,CAAC;EACzC,MAAMM,KAAK,GAAGH,QAAQ,GAAG,IAAAI,QAAE,EAAE,cAAe,CAAC,GAAG,IAAAA,QAAE,EAAE,YAAa,CAAC;EAElE,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACd,QAAA,CAAAe,OAAO;IAACC,IAAI,EAAGL;EAAO,GACtB,IAAAE,MAAA,CAAAC,aAAA,EAACb,KAAA,CAAAgB,IAAI;IAACV,SAAS,EAAGA;EAAW,GAC5B,IAAAM,MAAA,CAAAC,aAAA,EAAChB,OAAA,CAAAiB,OAAM;IAAA,GACDN,WAAW;IAChBS,OAAO;IACPC,IAAI,EAAGX,QAAQ,GAAGY,WAAI,GAAGC,cAAS;IAClCC,QAAQ,EAAG,EAAI;IACf,cAAaX,KAAO;IACpBY,GAAG,EAAGjB;EAAc,CACpB,CACI,CACE,CAAC;AAEZ,CAAC;AAED,MAAMkB,qCAAqC,GAAG,IAAAC,uBAAc,EAC3DrB,4BAA4B,EAC5B,8BACD,CAAC;AAAC,IAAAsB,QAAA,GACaF,qCAAqC;AAAAG,OAAA,CAAAZ,OAAA,GAAAW,QAAA"}
+{"version":3,"names":["_icons","require","_i18n","_button","_interopRequireDefault","_tooltip","_view","_context","_hook","BorderBoxControlLinkedButton","props","forwardedRef","className","isLinked","buttonProps","useBorderBoxControlLinkedButton","label","__","_react","createElement","default","text","View","size","icon","link","linkOff","iconSize","ref","ConnectedBorderBoxControlLinkedButton","contextConnect","_default","exports"],"sources":["@wordpress/components/src/border-box-control/border-box-control-linked-button/component.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { link, linkOff } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Button from '../../button';\nimport Tooltip from '../../tooltip';\nimport { View } from '../../view';\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport { useBorderBoxControlLinkedButton } from './hook';\n\nimport type { LinkedButtonProps } from '../types';\n\nconst BorderBoxControlLinkedButton = (\n\tprops: WordPressComponentProps< LinkedButtonProps, 'button' >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst { className, isLinked, ...buttonProps } =\n\t\tuseBorderBoxControlLinkedButton( props );\n\tconst label = isLinked ? __( 'Unlink sides' ) : __( 'Link sides' );\n\n\treturn (\n\t\t<Tooltip text={ label }>\n\t\t\t<View className={ className }>\n\t\t\t\t<Button\n\t\t\t\t\t{ ...buttonProps }\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\ticon={ isLinked ? link : linkOff }\n\t\t\t\t\ticonSize={ 24 }\n\t\t\t\t\taria-label={ label }\n\t\t\t\t\tref={ forwardedRef }\n\t\t\t\t/>\n\t\t\t</View>\n\t\t</Tooltip>\n\t);\n};\n\nconst ConnectedBorderBoxControlLinkedButton = contextConnect(\n\tBorderBoxControlLinkedButton,\n\t'BorderBoxControlLinkedButton'\n);\nexport default ConnectedBorderBoxControlLinkedButton;\n"],"mappings":";;;;;;;;AAGA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAKA,IAAAE,OAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,QAAA,GAAAD,sBAAA,CAAAH,OAAA;AACA,IAAAK,KAAA,GAAAL,OAAA;AAEA,IAAAM,QAAA,GAAAN,OAAA;AACA,IAAAO,KAAA,GAAAP,OAAA;AAdA;AACA;AACA;;AAIA;AACA;AACA;;AAUA,MAAMQ,4BAA4B,GAAGA,CACpCC,KAA6D,EAC7DC,YAAuC,KACnC;EACJ,MAAM;IAAEC,SAAS;IAAEC,QAAQ;IAAE,GAAGC;EAAY,CAAC,GAC5C,IAAAC,qCAA+B,EAAEL,KAAM,CAAC;EACzC,MAAMM,KAAK,GAAGH,QAAQ,GAAG,IAAAI,QAAE,EAAE,cAAe,CAAC,GAAG,IAAAA,QAAE,EAAE,YAAa,CAAC;EAElE,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACd,QAAA,CAAAe,OAAO;IAACC,IAAI,EAAGL;EAAO,GACtB,IAAAE,MAAA,CAAAC,aAAA,EAACb,KAAA,CAAAgB,IAAI;IAACV,SAAS,EAAGA;EAAW,GAC5B,IAAAM,MAAA,CAAAC,aAAA,EAAChB,OAAA,CAAAiB,OAAM;IAAA,GACDN,WAAW;IAChBS,IAAI,EAAC,OAAO;IACZC,IAAI,EAAGX,QAAQ,GAAGY,WAAI,GAAGC,cAAS;IAClCC,QAAQ,EAAG,EAAI;IACf,cAAaX,KAAO;IACpBY,GAAG,EAAGjB;EAAc,CACpB,CACI,CACE,CAAC;AAEZ,CAAC;AAED,MAAMkB,qCAAqC,GAAG,IAAAC,uBAAc,EAC3DrB,4BAA4B,EAC5B,8BACD,CAAC;AAAC,IAAAsB,QAAA,GACaF,qCAAqC;AAAAG,OAAA,CAAAZ,OAAA,GAAAW,QAAA"}

package/build/border-control/border-control-style-picker/component.js

@@ -70,7 +70,7 @@ const BorderControlStylePicker = (props, forwardedRef) => {
     key: borderStyle.value,
     className: buttonClassName,
     icon: borderStyle.icon,
-    isSmall: true,
+    size: "small",
     isPressed: borderStyle.value === value,
     onClick: () => onChange(borderStyle.value === value ? undefined : borderStyle.value),
     "aria-label": borderStyle.label,

package/build/border-control/border-control-style-picker/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["_icons","require","_i18n","_button","_interopRequireDefault","_baseControlStyles","_view","_flex","_visuallyHidden","_context","_hook","BORDER_STYLES","label","__","icon","lineSolid","value","lineDashed","lineDotted","Label","props","hideLabelFromVision","_react","createElement","VisuallyHidden","as","StyledLabel","BorderControlStylePicker","forwardedRef","buttonClassName","onChange","otherProps","useBorderControlStylePicker","View","ref","Flex","justify","gap","map","borderStyle","default","key","className","isSmall","isPressed","onClick","undefined","showTooltip","ConnectedBorderControlStylePicker","contextConnect","_default","exports"],"sources":["@wordpress/components/src/border-control/border-control-style-picker/component.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { lineDashed, lineDotted, lineSolid } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Button from '../../button';\nimport { StyledLabel } from '../../base-control/styles/base-control-styles';\nimport { View } from '../../view';\nimport { Flex } from '../../flex';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport { useBorderControlStylePicker } from './hook';\n\nimport type { LabelProps, StylePickerProps } from '../types';\n\nconst BORDER_STYLES = [\n\t{ label: __( 'Solid' ), icon: lineSolid, value: 'solid' },\n\t{ label: __( 'Dashed' ), icon: lineDashed, value: 'dashed' },\n\t{ label: __( 'Dotted' ), icon: lineDotted, value: 'dotted' },\n];\n\nconst Label = ( props: LabelProps ) => {\n\tconst { label, hideLabelFromVision } = props;\n\n\tif ( ! label ) {\n\t\treturn null;\n\t}\n\n\treturn hideLabelFromVision ? (\n\t\t<VisuallyHidden as=\"label\">{ label }</VisuallyHidden>\n\t) : (\n\t\t<StyledLabel>{ label }</StyledLabel>\n\t);\n};\n\nconst BorderControlStylePicker = (\n\tprops: WordPressComponentProps< StylePickerProps, 'div' >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\tbuttonClassName,\n\t\thideLabelFromVision,\n\t\tlabel,\n\t\tonChange,\n\t\tvalue,\n\t\t...otherProps\n\t} = useBorderControlStylePicker( props );\n\n\treturn (\n\t\t<View { ...otherProps } ref={ forwardedRef }>\n\t\t\t<Label\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t/>\n\t\t\t<Flex justify=\"flex-start\" gap={ 1 }>\n\t\t\t\t{ BORDER_STYLES.map( ( borderStyle ) => (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tkey={ borderStyle.value }\n\t\t\t\t\t\tclassName={ buttonClassName }\n\t\t\t\t\t\ticon={ borderStyle.icon }\n\t\t\t\t\t\tisSmall\n\t\t\t\t\t\tisPressed={ borderStyle.value === value }\n\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\tborderStyle.value === value\n\t\t\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t\t\t: borderStyle.value\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}\n\t\t\t\t\t\taria-label={ borderStyle.label }\n\t\t\t\t\t\tlabel={ borderStyle.label }\n\t\t\t\t\t\tshowTooltip={ true }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</Flex>\n\t\t</View>\n\t);\n};\n\nconst ConnectedBorderControlStylePicker = contextConnect(\n\tBorderControlStylePicker,\n\t'BorderControlStylePicker'\n);\n\nexport default ConnectedBorderControlStylePicker;\n"],"mappings":"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"}
+{"version":3,"names":["_icons","require","_i18n","_button","_interopRequireDefault","_baseControlStyles","_view","_flex","_visuallyHidden","_context","_hook","BORDER_STYLES","label","__","icon","lineSolid","value","lineDashed","lineDotted","Label","props","hideLabelFromVision","_react","createElement","VisuallyHidden","as","StyledLabel","BorderControlStylePicker","forwardedRef","buttonClassName","onChange","otherProps","useBorderControlStylePicker","View","ref","Flex","justify","gap","map","borderStyle","default","key","className","size","isPressed","onClick","undefined","showTooltip","ConnectedBorderControlStylePicker","contextConnect","_default","exports"],"sources":["@wordpress/components/src/border-control/border-control-style-picker/component.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { lineDashed, lineDotted, lineSolid } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Button from '../../button';\nimport { StyledLabel } from '../../base-control/styles/base-control-styles';\nimport { View } from '../../view';\nimport { Flex } from '../../flex';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport { useBorderControlStylePicker } from './hook';\n\nimport type { LabelProps, StylePickerProps } from '../types';\n\nconst BORDER_STYLES = [\n\t{ label: __( 'Solid' ), icon: lineSolid, value: 'solid' },\n\t{ label: __( 'Dashed' ), icon: lineDashed, value: 'dashed' },\n\t{ label: __( 'Dotted' ), icon: lineDotted, value: 'dotted' },\n];\n\nconst Label = ( props: LabelProps ) => {\n\tconst { label, hideLabelFromVision } = props;\n\n\tif ( ! label ) {\n\t\treturn null;\n\t}\n\n\treturn hideLabelFromVision ? (\n\t\t<VisuallyHidden as=\"label\">{ label }</VisuallyHidden>\n\t) : (\n\t\t<StyledLabel>{ label }</StyledLabel>\n\t);\n};\n\nconst BorderControlStylePicker = (\n\tprops: WordPressComponentProps< StylePickerProps, 'div' >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\tbuttonClassName,\n\t\thideLabelFromVision,\n\t\tlabel,\n\t\tonChange,\n\t\tvalue,\n\t\t...otherProps\n\t} = useBorderControlStylePicker( props );\n\n\treturn (\n\t\t<View { ...otherProps } ref={ forwardedRef }>\n\t\t\t<Label\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t/>\n\t\t\t<Flex justify=\"flex-start\" gap={ 1 }>\n\t\t\t\t{ BORDER_STYLES.map( ( borderStyle ) => (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tkey={ borderStyle.value }\n\t\t\t\t\t\tclassName={ buttonClassName }\n\t\t\t\t\t\ticon={ borderStyle.icon }\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tisPressed={ borderStyle.value === value }\n\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\tborderStyle.value === value\n\t\t\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t\t\t: borderStyle.value\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}\n\t\t\t\t\t\taria-label={ borderStyle.label }\n\t\t\t\t\t\tlabel={ borderStyle.label }\n\t\t\t\t\t\tshowTooltip={ true }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</Flex>\n\t\t</View>\n\t);\n};\n\nconst ConnectedBorderControlStylePicker = contextConnect(\n\tBorderControlStylePicker,\n\t'BorderControlStylePicker'\n);\n\nexport default ConnectedBorderControlStylePicker;\n"],"mappings":";;;;;;;;AAGA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAKA,IAAAE,OAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,kBAAA,GAAAJ,OAAA;AACA,IAAAK,KAAA,GAAAL,OAAA;AACA,IAAAM,KAAA,GAAAN,OAAA;AACA,IAAAO,eAAA,GAAAP,OAAA;AAEA,IAAAQ,QAAA,GAAAR,OAAA;AACA,IAAAS,KAAA,GAAAT,OAAA;AAhBA;AACA;AACA;;AAIA;AACA;AACA;;AAYA,MAAMU,aAAa,GAAG,CACrB;EAAEC,KAAK,EAAE,IAAAC,QAAE,EAAE,OAAQ,CAAC;EAAEC,IAAI,EAAEC,gBAAS;EAAEC,KAAK,EAAE;AAAQ,CAAC,EACzD;EAAEJ,KAAK,EAAE,IAAAC,QAAE,EAAE,QAAS,CAAC;EAAEC,IAAI,EAAEG,iBAAU;EAAED,KAAK,EAAE;AAAS,CAAC,EAC5D;EAAEJ,KAAK,EAAE,IAAAC,QAAE,EAAE,QAAS,CAAC;EAAEC,IAAI,EAAEI,iBAAU;EAAEF,KAAK,EAAE;AAAS,CAAC,CAC5D;AAED,MAAMG,KAAK,GAAKC,KAAiB,IAAM;EACtC,MAAM;IAAER,KAAK;IAAES;EAAoB,CAAC,GAAGD,KAAK;EAE5C,IAAK,CAAER,KAAK,EAAG;IACd,OAAO,IAAI;EACZ;EAEA,OAAOS,mBAAmB,GACzB,IAAAC,MAAA,CAAAC,aAAA,EAACf,eAAA,CAAAgB,cAAc;IAACC,EAAE,EAAC;EAAO,GAAGb,KAAuB,CAAC,GAErD,IAAAU,MAAA,CAAAC,aAAA,EAAClB,kBAAA,CAAAqB,WAAW,QAAGd,KAAoB,CACnC;AACF,CAAC;AAED,MAAMe,wBAAwB,GAAGA,CAChCP,KAAyD,EACzDQ,YAAuC,KACnC;EACJ,MAAM;IACLC,eAAe;IACfR,mBAAmB;IACnBT,KAAK;IACLkB,QAAQ;IACRd,KAAK;IACL,GAAGe;EACJ,CAAC,GAAG,IAAAC,iCAA2B,EAAEZ,KAAM,CAAC;EAExC,OACC,IAAAE,MAAA,CAAAC,aAAA,EAACjB,KAAA,CAAA2B,IAAI;IAAA,GAAMF,UAAU;IAAGG,GAAG,EAAGN;EAAc,GAC3C,IAAAN,MAAA,CAAAC,aAAA,EAACJ,KAAK;IACLP,KAAK,EAAGA,KAAO;IACfS,mBAAmB,EAAGA;EAAqB,CAC3C,CAAC,EACF,IAAAC,MAAA,CAAAC,aAAA,EAAChB,KAAA,CAAA4B,IAAI;IAACC,OAAO,EAAC,YAAY;IAACC,GAAG,EAAG;EAAG,GACjC1B,aAAa,CAAC2B,GAAG,CAAIC,WAAW,IACjC,IAAAjB,MAAA,CAAAC,aAAA,EAACpB,OAAA,CAAAqC,OAAM;IACNC,GAAG,EAAGF,WAAW,CAACvB,KAAO;IACzB0B,SAAS,EAAGb,eAAiB;IAC7Bf,IAAI,EAAGyB,WAAW,CAACzB,IAAM;IACzB6B,IAAI,EAAC,OAAO;IACZC,SAAS,EAAGL,WAAW,CAACvB,KAAK,KAAKA,KAAO;IACzC6B,OAAO,EAAGA,CAAA,KACTf,QAAQ,CACPS,WAAW,CAACvB,KAAK,KAAKA,KAAK,GACxB8B,SAAS,GACTP,WAAW,CAACvB,KAChB,CACA;IACD,cAAauB,WAAW,CAAC3B,KAAO;IAChCA,KAAK,EAAG2B,WAAW,CAAC3B,KAAO;IAC3BmC,WAAW,EAAG;EAAM,CACpB,CACA,CACG,CACD,CAAC;AAET,CAAC;AAED,MAAMC,iCAAiC,GAAG,IAAAC,uBAAc,EACvDtB,wBAAwB,EACxB,0BACD,CAAC;AAAC,IAAAuB,QAAA,GAEaF,iCAAiC;AAAAG,OAAA,CAAAX,OAAA,GAAAU,QAAA"}

package/build/box-control/index.js

@@ -148,7 +148,7 @@ function BoxControl({
   }, label)), allowReset && (0, _react.createElement)(_flex.FlexItem, null, (0, _react.createElement)(_button.default, {
     className: "component-box-control__reset-button",
     variant: "secondary",
-    isSmall: true,
+    size: "small",
     onClick: handleOnReset,
     disabled: !isDirty
   }, (0, _i18n.__)('Reset')))), (0, _react.createElement)(_boxControlStyles.HeaderControlWrapper, {

package/build/box-control/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_compose","require","_element","_i18n","_baseControl","_button","_interopRequireDefault","_flex","_allInputControl","_inputControls","_axialInputControls","_icon","_linkedButton","_boxControlStyles","_utils","_utils2","_hooks","defaultInputProps","min","noop","useUniqueId","idProp","instanceId","useInstanceId","BoxControl","id","inputProps","onChange","label","__","values","valuesProp","units","sides","splitOnAxis","allowReset","resetValues","DEFAULT_VALUES","onMouseOver","onMouseOut","setValues","useControlledState","fallback","inputValues","hasInitialValue","isValuesDefined","hasOneSide","length","isDirty","setIsDirty","useState","isLinked","setIsLinked","isValuesMixed","side","setSide","getInitialSide","selectedUnits","setSelectedUnits","top","parseQuantityAndUnitFromRawValue","right","bottom","left","headingId","toggleLinked","handleOnFocus","_event","nextSide","handleOnChange","nextValues","handleOnReset","inputControlProps","onFocus","_react","createElement","Root","role","Header","className","FlexItem","BaseControl","VisualLabel","default","variant","isSmall","onClick","disabled","HeaderControlWrapper","FlexBlock","_default","exports"],"sources":["@wordpress/components/src/box-control/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { BaseControl } from '../base-control';\nimport Button from '../button';\nimport { FlexItem, FlexBlock } from '../flex';\nimport AllInputControl from './all-input-control';\nimport InputControls from './input-controls';\nimport AxialInputControls from './axial-input-controls';\nimport BoxControlIcon from './icon';\nimport LinkedButton from './linked-button';\nimport {\n\tRoot,\n\tHeader,\n\tHeaderControlWrapper,\n} from './styles/box-control-styles';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport {\n\tDEFAULT_VALUES,\n\tgetInitialSide,\n\tisValuesMixed,\n\tisValuesDefined,\n} from './utils';\nimport { useControlledState } from '../utils/hooks';\nimport type {\n\tBoxControlIconProps,\n\tBoxControlProps,\n\tBoxControlValue,\n} from './types';\n\nconst defaultInputProps = {\n\tmin: 0,\n};\n\nconst noop = () => {};\n\nfunction useUniqueId( idProp?: string ) {\n\tconst instanceId = useInstanceId( BoxControl, 'inspector-box-control' );\n\n\treturn idProp || instanceId;\n}\n\n/**\n * BoxControl components let users set values for Top, Right, Bottom, and Left.\n * This can be used as an input control for values like `padding` or `margin`.\n *\n * ```jsx\n * import { __experimentalBoxControl as BoxControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ values, setValues ] = useState( {\n * \t\ttop: '50px',\n * \t\tleft: '10%',\n * \t\tright: '10%',\n * \t\tbottom: '50px',\n * \t} );\n *\n * \treturn (\n * \t\t<BoxControl\n * \t\t\tvalues={ values }\n * \t\t\tonChange={ ( nextValues ) => setValues( nextValues ) }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nfunction BoxControl( {\n\tid: idProp,\n\tinputProps = defaultInputProps,\n\tonChange = noop,\n\tlabel = __( 'Box Control' ),\n\tvalues: valuesProp,\n\tunits,\n\tsides,\n\tsplitOnAxis = false,\n\tallowReset = true,\n\tresetValues = DEFAULT_VALUES,\n\tonMouseOver,\n\tonMouseOut,\n}: BoxControlProps ) {\n\tconst [ values, setValues ] = useControlledState( valuesProp, {\n\t\tfallback: DEFAULT_VALUES,\n\t} );\n\tconst inputValues = values || DEFAULT_VALUES;\n\tconst hasInitialValue = isValuesDefined( valuesProp );\n\tconst hasOneSide = sides?.length === 1;\n\n\tconst [ isDirty, setIsDirty ] = useState( hasInitialValue );\n\tconst [ isLinked, setIsLinked ] = useState(\n\t\t! hasInitialValue || ! isValuesMixed( inputValues ) || hasOneSide\n\t);\n\n\tconst [ side, setSide ] = useState< BoxControlIconProps[ 'side' ] >(\n\t\tgetInitialSide( isLinked, splitOnAxis )\n\t);\n\n\t// Tracking selected units via internal state allows filtering of CSS unit\n\t// only values from being saved while maintaining preexisting unit selection\n\t// behaviour. Filtering CSS only values prevents invalid style values.\n\tconst [ selectedUnits, setSelectedUnits ] = useState< BoxControlValue >( {\n\t\ttop: parseQuantityAndUnitFromRawValue( valuesProp?.top )[ 1 ],\n\t\tright: parseQuantityAndUnitFromRawValue( valuesProp?.right )[ 1 ],\n\t\tbottom: parseQuantityAndUnitFromRawValue( valuesProp?.bottom )[ 1 ],\n\t\tleft: parseQuantityAndUnitFromRawValue( valuesProp?.left )[ 1 ],\n\t} );\n\n\tconst id = useUniqueId( idProp );\n\tconst headingId = `${ id }-heading`;\n\n\tconst toggleLinked = () => {\n\t\tsetIsLinked( ! isLinked );\n\t\tsetSide( getInitialSide( ! isLinked, splitOnAxis ) );\n\t};\n\n\tconst handleOnFocus = (\n\t\t_event: React.FocusEvent< HTMLInputElement >,\n\t\t{ side: nextSide }: { side: typeof side }\n\t) => {\n\t\tsetSide( nextSide );\n\t};\n\n\tconst handleOnChange = ( nextValues: BoxControlValue ) => {\n\t\tonChange( nextValues );\n\t\tsetValues( nextValues );\n\t\tsetIsDirty( true );\n\t};\n\n\tconst handleOnReset = () => {\n\t\tonChange( resetValues );\n\t\tsetValues( resetValues );\n\t\tsetSelectedUnits( resetValues );\n\t\tsetIsDirty( false );\n\t};\n\n\tconst inputControlProps = {\n\t\t...inputProps,\n\t\tonChange: handleOnChange,\n\t\tonFocus: handleOnFocus,\n\t\tisLinked,\n\t\tunits,\n\t\tselectedUnits,\n\t\tsetSelectedUnits,\n\t\tsides,\n\t\tvalues: inputValues,\n\t\tonMouseOver,\n\t\tonMouseOut,\n\t};\n\n\treturn (\n\t\t<Root id={ id } role=\"group\" aria-labelledby={ headingId }>\n\t\t\t<Header className=\"component-box-control__header\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<BaseControl.VisualLabel id={ headingId }>\n\t\t\t\t\t\t{ label }\n\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t</FlexItem>\n\t\t\t\t{ allowReset && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"component-box-control__reset-button\"\n\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\tonClick={ handleOnReset }\n\t\t\t\t\t\t\tdisabled={ ! isDirty }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t</Header>\n\t\t\t<HeaderControlWrapper className=\"component-box-control__header-control-wrapper\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<BoxControlIcon side={ side } sides={ sides } />\n\t\t\t\t</FlexItem>\n\t\t\t\t{ isLinked && (\n\t\t\t\t\t<FlexBlock>\n\t\t\t\t\t\t<AllInputControl\n\t\t\t\t\t\t\taria-label={ label }\n\t\t\t\t\t\t\t{ ...inputControlProps }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexBlock>\n\t\t\t\t) }\n\t\t\t\t{ ! isLinked && splitOnAxis && (\n\t\t\t\t\t<FlexBlock>\n\t\t\t\t\t\t<AxialInputControls { ...inputControlProps } />\n\t\t\t\t\t</FlexBlock>\n\t\t\t\t) }\n\t\t\t\t{ ! hasOneSide && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<LinkedButton\n\t\t\t\t\t\t\tonClick={ toggleLinked }\n\t\t\t\t\t\t\tisLinked={ isLinked }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t</HeaderControlWrapper>\n\t\t\t{ ! isLinked && ! splitOnAxis && (\n\t\t\t\t<InputControls { ...inputControlProps } />\n\t\t\t) }\n\t\t</Root>\n\t);\n}\n\nexport { applyValueToSides } from './utils';\nexport default BoxControl;\n"],"mappings":"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"}
+{"version":3,"names":["_compose","require","_element","_i18n","_baseControl","_button","_interopRequireDefault","_flex","_allInputControl","_inputControls","_axialInputControls","_icon","_linkedButton","_boxControlStyles","_utils","_utils2","_hooks","defaultInputProps","min","noop","useUniqueId","idProp","instanceId","useInstanceId","BoxControl","id","inputProps","onChange","label","__","values","valuesProp","units","sides","splitOnAxis","allowReset","resetValues","DEFAULT_VALUES","onMouseOver","onMouseOut","setValues","useControlledState","fallback","inputValues","hasInitialValue","isValuesDefined","hasOneSide","length","isDirty","setIsDirty","useState","isLinked","setIsLinked","isValuesMixed","side","setSide","getInitialSide","selectedUnits","setSelectedUnits","top","parseQuantityAndUnitFromRawValue","right","bottom","left","headingId","toggleLinked","handleOnFocus","_event","nextSide","handleOnChange","nextValues","handleOnReset","inputControlProps","onFocus","_react","createElement","Root","role","Header","className","FlexItem","BaseControl","VisualLabel","default","variant","size","onClick","disabled","HeaderControlWrapper","FlexBlock","_default","exports"],"sources":["@wordpress/components/src/box-control/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { BaseControl } from '../base-control';\nimport Button from '../button';\nimport { FlexItem, FlexBlock } from '../flex';\nimport AllInputControl from './all-input-control';\nimport InputControls from './input-controls';\nimport AxialInputControls from './axial-input-controls';\nimport BoxControlIcon from './icon';\nimport LinkedButton from './linked-button';\nimport {\n\tRoot,\n\tHeader,\n\tHeaderControlWrapper,\n} from './styles/box-control-styles';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport {\n\tDEFAULT_VALUES,\n\tgetInitialSide,\n\tisValuesMixed,\n\tisValuesDefined,\n} from './utils';\nimport { useControlledState } from '../utils/hooks';\nimport type {\n\tBoxControlIconProps,\n\tBoxControlProps,\n\tBoxControlValue,\n} from './types';\n\nconst defaultInputProps = {\n\tmin: 0,\n};\n\nconst noop = () => {};\n\nfunction useUniqueId( idProp?: string ) {\n\tconst instanceId = useInstanceId( BoxControl, 'inspector-box-control' );\n\n\treturn idProp || instanceId;\n}\n\n/**\n * BoxControl components let users set values for Top, Right, Bottom, and Left.\n * This can be used as an input control for values like `padding` or `margin`.\n *\n * ```jsx\n * import { __experimentalBoxControl as BoxControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ values, setValues ] = useState( {\n * \t\ttop: '50px',\n * \t\tleft: '10%',\n * \t\tright: '10%',\n * \t\tbottom: '50px',\n * \t} );\n *\n * \treturn (\n * \t\t<BoxControl\n * \t\t\tvalues={ values }\n * \t\t\tonChange={ ( nextValues ) => setValues( nextValues ) }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nfunction BoxControl( {\n\tid: idProp,\n\tinputProps = defaultInputProps,\n\tonChange = noop,\n\tlabel = __( 'Box Control' ),\n\tvalues: valuesProp,\n\tunits,\n\tsides,\n\tsplitOnAxis = false,\n\tallowReset = true,\n\tresetValues = DEFAULT_VALUES,\n\tonMouseOver,\n\tonMouseOut,\n}: BoxControlProps ) {\n\tconst [ values, setValues ] = useControlledState( valuesProp, {\n\t\tfallback: DEFAULT_VALUES,\n\t} );\n\tconst inputValues = values || DEFAULT_VALUES;\n\tconst hasInitialValue = isValuesDefined( valuesProp );\n\tconst hasOneSide = sides?.length === 1;\n\n\tconst [ isDirty, setIsDirty ] = useState( hasInitialValue );\n\tconst [ isLinked, setIsLinked ] = useState(\n\t\t! hasInitialValue || ! isValuesMixed( inputValues ) || hasOneSide\n\t);\n\n\tconst [ side, setSide ] = useState< BoxControlIconProps[ 'side' ] >(\n\t\tgetInitialSide( isLinked, splitOnAxis )\n\t);\n\n\t// Tracking selected units via internal state allows filtering of CSS unit\n\t// only values from being saved while maintaining preexisting unit selection\n\t// behaviour. Filtering CSS only values prevents invalid style values.\n\tconst [ selectedUnits, setSelectedUnits ] = useState< BoxControlValue >( {\n\t\ttop: parseQuantityAndUnitFromRawValue( valuesProp?.top )[ 1 ],\n\t\tright: parseQuantityAndUnitFromRawValue( valuesProp?.right )[ 1 ],\n\t\tbottom: parseQuantityAndUnitFromRawValue( valuesProp?.bottom )[ 1 ],\n\t\tleft: parseQuantityAndUnitFromRawValue( valuesProp?.left )[ 1 ],\n\t} );\n\n\tconst id = useUniqueId( idProp );\n\tconst headingId = `${ id }-heading`;\n\n\tconst toggleLinked = () => {\n\t\tsetIsLinked( ! isLinked );\n\t\tsetSide( getInitialSide( ! isLinked, splitOnAxis ) );\n\t};\n\n\tconst handleOnFocus = (\n\t\t_event: React.FocusEvent< HTMLInputElement >,\n\t\t{ side: nextSide }: { side: typeof side }\n\t) => {\n\t\tsetSide( nextSide );\n\t};\n\n\tconst handleOnChange = ( nextValues: BoxControlValue ) => {\n\t\tonChange( nextValues );\n\t\tsetValues( nextValues );\n\t\tsetIsDirty( true );\n\t};\n\n\tconst handleOnReset = () => {\n\t\tonChange( resetValues );\n\t\tsetValues( resetValues );\n\t\tsetSelectedUnits( resetValues );\n\t\tsetIsDirty( false );\n\t};\n\n\tconst inputControlProps = {\n\t\t...inputProps,\n\t\tonChange: handleOnChange,\n\t\tonFocus: handleOnFocus,\n\t\tisLinked,\n\t\tunits,\n\t\tselectedUnits,\n\t\tsetSelectedUnits,\n\t\tsides,\n\t\tvalues: inputValues,\n\t\tonMouseOver,\n\t\tonMouseOut,\n\t};\n\n\treturn (\n\t\t<Root id={ id } role=\"group\" aria-labelledby={ headingId }>\n\t\t\t<Header className=\"component-box-control__header\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<BaseControl.VisualLabel id={ headingId }>\n\t\t\t\t\t\t{ label }\n\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t</FlexItem>\n\t\t\t\t{ allowReset && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"component-box-control__reset-button\"\n\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\tonClick={ handleOnReset }\n\t\t\t\t\t\t\tdisabled={ ! isDirty }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t</Header>\n\t\t\t<HeaderControlWrapper className=\"component-box-control__header-control-wrapper\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<BoxControlIcon side={ side } sides={ sides } />\n\t\t\t\t</FlexItem>\n\t\t\t\t{ isLinked && (\n\t\t\t\t\t<FlexBlock>\n\t\t\t\t\t\t<AllInputControl\n\t\t\t\t\t\t\taria-label={ label }\n\t\t\t\t\t\t\t{ ...inputControlProps }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexBlock>\n\t\t\t\t) }\n\t\t\t\t{ ! isLinked && splitOnAxis && (\n\t\t\t\t\t<FlexBlock>\n\t\t\t\t\t\t<AxialInputControls { ...inputControlProps } />\n\t\t\t\t\t</FlexBlock>\n\t\t\t\t) }\n\t\t\t\t{ ! hasOneSide && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<LinkedButton\n\t\t\t\t\t\t\tonClick={ toggleLinked }\n\t\t\t\t\t\t\tisLinked={ isLinked }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t</HeaderControlWrapper>\n\t\t\t{ ! isLinked && ! splitOnAxis && (\n\t\t\t\t<InputControls { ...inputControlProps } />\n\t\t\t) }\n\t\t</Root>\n\t);\n}\n\nexport { applyValueToSides } from './utils';\nexport default BoxControl;\n"],"mappings":"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"}

package/build/box-control/linked-button.js

@@ -28,7 +28,7 @@ function LinkedButton({
   }, (0, _react.createElement)(_button.default, {
     ...props,
     className: "component-box-control__linked-button",
-    isSmall: true,
+    size: "small",
     icon: isLinked ? _icons.link : _icons.linkOff,
     iconSize: 24,
     "aria-label": label

package/build/box-control/linked-button.js.map

@@ -1 +1 @@
-{"version":3,"names":["_icons","require","_i18n","_button","_interopRequireDefault","_tooltip","LinkedButton","isLinked","props","label","__","_react","createElement","default","text","className","isSmall","icon","link","linkOff","iconSize"],"sources":["@wordpress/components/src/box-control/linked-button.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { link, linkOff } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport Tooltip from '../tooltip';\n\nexport default function LinkedButton( {\n\tisLinked,\n\t...props\n}: { isLinked?: boolean } & React.ComponentProps< typeof Button > ) {\n\tconst label = isLinked ? __( 'Unlink sides' ) : __( 'Link sides' );\n\n\treturn (\n\t\t<Tooltip text={ label }>\n\t\t\t<Button\n\t\t\t\t{ ...props }\n\t\t\t\tclassName=\"component-box-control__linked-button\"\n\t\t\t\tisSmall\n\t\t\t\ticon={ isLinked ? link : linkOff }\n\t\t\t\ticonSize={ 24 }\n\t\t\t\taria-label={ label }\n\t\t\t/>\n\t\t</Tooltip>\n\t);\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAKA,IAAAE,OAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,QAAA,GAAAD,sBAAA,CAAAH,OAAA;AAVA;AACA;AACA;;AAIA;AACA;AACA;;AAIe,SAASK,YAAYA,CAAE;EACrCC,QAAQ;EACR,GAAGC;AAC4D,CAAC,EAAG;EACnE,MAAMC,KAAK,GAAGF,QAAQ,GAAG,IAAAG,QAAE,EAAE,cAAe,CAAC,GAAG,IAAAA,QAAE,EAAE,YAAa,CAAC;EAElE,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACP,QAAA,CAAAQ,OAAO;IAACC,IAAI,EAAGL;EAAO,GACtB,IAAAE,MAAA,CAAAC,aAAA,EAACT,OAAA,CAAAU,OAAM;IAAA,GACDL,KAAK;IACVO,SAAS,EAAC,sCAAsC;IAChDC,OAAO;IACPC,IAAI,EAAGV,QAAQ,GAAGW,WAAI,GAAGC,cAAS;IAClCC,QAAQ,EAAG,EAAI;IACf,cAAaX;EAAO,CACpB,CACO,CAAC;AAEZ"}
+{"version":3,"names":["_icons","require","_i18n","_button","_interopRequireDefault","_tooltip","LinkedButton","isLinked","props","label","__","_react","createElement","default","text","className","size","icon","link","linkOff","iconSize"],"sources":["@wordpress/components/src/box-control/linked-button.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { link, linkOff } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport Tooltip from '../tooltip';\n\nexport default function LinkedButton( {\n\tisLinked,\n\t...props\n}: { isLinked?: boolean } & React.ComponentProps< typeof Button > ) {\n\tconst label = isLinked ? __( 'Unlink sides' ) : __( 'Link sides' );\n\n\treturn (\n\t\t<Tooltip text={ label }>\n\t\t\t<Button\n\t\t\t\t{ ...props }\n\t\t\t\tclassName=\"component-box-control__linked-button\"\n\t\t\t\tsize=\"small\"\n\t\t\t\ticon={ isLinked ? link : linkOff }\n\t\t\t\ticonSize={ 24 }\n\t\t\t\taria-label={ label }\n\t\t\t/>\n\t\t</Tooltip>\n\t);\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAKA,IAAAE,OAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,QAAA,GAAAD,sBAAA,CAAAH,OAAA;AAVA;AACA;AACA;;AAIA;AACA;AACA;;AAIe,SAASK,YAAYA,CAAE;EACrCC,QAAQ;EACR,GAAGC;AAC4D,CAAC,EAAG;EACnE,MAAMC,KAAK,GAAGF,QAAQ,GAAG,IAAAG,QAAE,EAAE,cAAe,CAAC,GAAG,IAAAA,QAAE,EAAE,YAAa,CAAC;EAElE,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACP,QAAA,CAAAQ,OAAO;IAACC,IAAI,EAAGL;EAAO,GACtB,IAAAE,MAAA,CAAAC,aAAA,EAACT,OAAA,CAAAU,OAAM;IAAA,GACDL,KAAK;IACVO,SAAS,EAAC,sCAAsC;IAChDC,IAAI,EAAC,OAAO;IACZC,IAAI,EAAGV,QAAQ,GAAGW,WAAI,GAAGC,cAAS;IAClCC,QAAQ,EAAG,EAAI;IACf,cAAaX;EAAO,CACpB,CACO,CAAC;AAEZ"}

package/build/button/index.js

@@ -134,7 +134,7 @@ function UnforwardedButton(props, ref) {
     'is-busy': isBusy,
     'is-link': variant === 'link',
     'is-destructive': isDestructive,
-    'has-text': !!icon && hasChildren,
+    'has-text': !!icon && (hasChildren || text),
     'has-icon': !!icon
   });
   const trulyDisabled = disabled && !isFocusable;