@wordpress/components 25.13.0 → 25.15.0

package/src/button/README.md

@@ -4,12 +4,6 @@ Buttons let users take actions and make choices with a single click or tap.
 
 ![Button components](https://make.wordpress.org/design/files/2019/03/button.png)
 
-## Table of contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-3. [Related components](#related-components)
-
 ## Design guidelines
 
 ### Usage
@@ -182,6 +176,14 @@ Renders a red text-based button style to indicate destructive behavior.
 
 -   Required: No
 
+#### `isLink`: `boolean`
+
+Deprecated: Renders a button with an anchor style.
+Use `variant` prop with `link` value instead.
+
+-   Required: No
+-   Default: `false`
+
 #### `isPressed`: `boolean`
 
 Renders a pressed button style.
@@ -190,6 +192,22 @@ If the native `aria-pressed` attribute is also set, it will take precedence.
 
 -   Required: No
 
+#### `isPrimary`: `boolean`
+
+Deprecated: Renders a primary button style.
+Use `variant` prop with `primary` value instead.
+
+-   Required: No
+-   Default: `false`
+
+#### `isSecondary`: `boolean`
+
+Deprecated: Renders a default button style.
+Use `variant` prop with `secondary` value instead.
+
+-   Required: No
+-   Default: `false`
+
 #### `isSmall`: `boolean`
 
 Decreases the size of the button.
@@ -198,6 +216,14 @@ Deprecated in favor of the `size` prop. If both props are defined, the `size` pr
 
 -   Required: No
 
+#### `isTertiary`: `boolean`
+
+Deprecated: Renders a text-based button style.
+Use `variant` prop with `tertiary` value instead.
+
+-   Required: No
+-   Default: `false`
+
 #### `label`: `string`
 
 Sets the `aria-label` of the component, if none is provided. Sets the Tooltip content if `showTooltip` is provided.

package/src/button/index.tsx

@@ -156,7 +156,7 @@ export function UnforwardedButton(
 		'is-busy': isBusy,
 		'is-link': variant === 'link',
 		'is-destructive': isDestructive,
-		'has-text': !! icon && hasChildren,
+		'has-text': !! icon && ( hasChildren || text ),
 		'has-icon': !! icon,
 	} );
 

package/src/button-group/README.md

@@ -4,12 +4,6 @@ ButtonGroup can be used to group any related buttons together. To emphasize rela
 
 ![ButtonGroup component](https://wordpress.org/gutenberg/files/2018/12/s_96EC471FE9C9D91A996770229947AAB54A03351BDE98F444FD3C1BF0CED365EA_1541792995815_ButtonGroup.png)
 
-## Table of contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-3. [Related components](#related-components)
-
 ## Design guidelines
 
 ### Usage

package/src/card/card/README.md

@@ -99,7 +99,7 @@ const Example = () => (
 		<CardMedia>
 			<img src="..." />
 		</CardMedia>
-		<CardHeader>...</CardHeader>
+		<CardFooter>...</CardFooter>
 	</Card>
 );
 ```

package/src/checkbox-control/README.md

@@ -2,15 +2,7 @@
 
 Checkboxes allow the user to select one or more items from a set.
 
-![](https://make.wordpress.org/design/files/2019/02/CheckboxControl.png)
-
-Selected and unselected checkboxes
-
-## Table of contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-3. [Related components](#related-components)
+![Selected and unselected checkboxes](https://make.wordpress.org/design/files/2019/02/CheckboxControl.png)
 
 ## Design guidelines
 
@@ -77,11 +69,12 @@ const MyCheckboxControl = () => {
 The set of props accepted by the component will be specified below.
 Props not included in this set will be applied to the input element.
 
-#### `label`: `string`
+#### `label`: `string|false`
 
 A label for the input field, that appears at the side of the checkbox.
 The prop will be rendered as content a label element.
 If no prop is passed an empty label is rendered.
+If the prop is set to false no label is rendered.
 
 -   Required: No
 

package/src/checkbox-control/index.tsx

@@ -125,12 +125,14 @@ export function CheckboxControl(
 					/>
 				) : null }
 			</span>
-			<label
-				className="components-checkbox-control__label"
-				htmlFor={ id }
-			>
-				{ label }
-			</label>
+			{ label && (
+				<label
+					className="components-checkbox-control__label"
+					htmlFor={ id }
+				>
+					{ label }
+				</label>
+			) }
 		</BaseControl>
 	);
 }

package/src/checkbox-control/test/__snapshots__/index.tsx.snap

@@ -5,14 +5,14 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -8,17 +8,31 @@
+@@ -8,13 +8,27 @@
         <span
           class="components-checkbox-control__input-container"
         >
           <input
             class="components-checkbox-control__input"
--           id="inspector-checkbox-control-5"
-+           id="inspector-checkbox-control-6"
+-           id="inspector-checkbox-control-6"
++           id="inspector-checkbox-control-7"
             type="checkbox"
             value="1"
 +         />
@@ -31,11 +31,6 @@ Snapshot Diff:
             />
 +         </svg>
         </span>
-        <label
-          class="components-checkbox-control__label"
--         for="inspector-checkbox-control-5"
-+         for="inspector-checkbox-control-6"
-        />
       </div>
     </div>
   </div>

package/src/checkbox-control/test/index.tsx

@@ -60,6 +60,13 @@ describe( 'CheckboxControl', () => {
 			expect( label ).toBeInTheDocument();
 		} );
 
+		it( 'should not render label element if label is set to false', () => {
+			render( <CheckboxControl label={ false } /> );
+
+			const label = screen.queryByRole( 'label' );
+			expect( label ).not.toBeInTheDocument();
+		} );
+
 		it( 'should render a checkbox in an indeterminate state', () => {
 			render( <CheckboxControl indeterminate /> );
 			expect( getInput() ).toHaveProperty( 'indeterminate', true );

package/src/checkbox-control/types.ts

@@ -19,9 +19,10 @@ export type CheckboxControlProps = Pick<
 	/**
 	 * A label for the input field, that appears at the side of the checkbox.
 	 * The prop will be rendered as content a label element. If no prop is
-	 * passed an empty label is rendered.
+	 * passed an empty label is rendered. If the prop is set to false no label
+	 * is rendered.
 	 */
-	label?: string;
+	label?: string | false;
 	/**
 	 * If checked is true the checkbox will be checked. If checked is false the
 	 * checkbox will be unchecked. If no value is passed the checkbox will be

package/src/color-picker/color-copy-button.tsx

@@ -62,7 +62,7 @@ export const ColorCopyButton = ( props: ColorCopyButtonProps ) => {
 			}
 		>
 			<CopyButton
-				isSmall
+				size="small"
 				ref={ copyRef }
 				icon={ copy }
 				showTooltip={ false }

package/src/combobox-control/README.md

@@ -2,12 +2,6 @@
 
 `ComboboxControl` is an enhanced version of a [`SelectControl`](/packages/components/src/select-control/README.md), with the addition of being able to search for options using a search input.
 
-## Table of contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-3. [Related components](#related-components)
-
 ## Design guidelines
 
 These are the same as [the ones for `SelectControl`s](/packages/components/src/select-control/README.md#design-guidelines), but this component is better suited for when there are too many items to scroll through or load at once so you need to filter them based on user input.