Merge branch 'develop' of github.com:10up/block-components into develop

10up · Jun 29, 2023 · 18d7369 · 18d7369
2 parents bc2f249 + 6363116
commit 18d7369
Show file tree

Hide file tree

Showing 7 changed files with 6,360 additions and 30,434 deletions.
diff --git a/components/icon-picker/icon-picker-toolbar-button.js b/components/icon-picker/icon-picker-toolbar-button.js
@@ -21,18 +21,18 @@ const StyledIconPickerDropdown = styled(IconPicker)`
  * @returns {*}
  */
 export const IconPickerToolbarButton = (props) => {
-	const {
-		value: { name, iconSet },
-		buttonLabel,
-	} = props;
+	const { value, buttonLabel } = props;
 
-	const buttonIcon = name && iconSet ? <Icon name={name} iconSet={iconSet} /> : null;
+	const buttonIcon =
+		value?.name && value?.iconSet ? <Icon name={value?.name} iconSet={value?.iconSet} /> : null;
 
 	return (
 		<Dropdown
 			className="component-icon-picker-toolbar-button"
 			contentClassName="component-icon-picker-toolbar-button__content"
-			position="bottom right"
+			popoverProps={{
+				placement: 'bottom-start',
+			}}
 			renderToggle={({ isOpen, onToggle }) => (
 				<ToolbarButton onClick={onToggle} aria-expanded={isOpen} icon={buttonIcon}>
 					{buttonLabel ?? __('Select Icon')}

diff --git a/components/icon-picker/icon-picker.js b/components/icon-picker/icon-picker.js
@@ -10,7 +10,7 @@ import {
 	SearchControl,
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
-import { useState, memo } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 
 import { useIcons } from '../../hooks/use-icons';
 import { useFilteredList } from '../../hooks/use-filtered-list';
@@ -35,9 +35,9 @@ const StyledIconGrid = styled(NavigableMenu)`
 `;
 
 const StyledIconButton = styled(Icon)`
-	background-color: ${({ isSelected }) => (isSelected ? 'black' : 'white')};
-	color: ${({ isSelected }) => (isSelected ? 'white' : 'black')};
-	fill: ${({ isSelected }) => (isSelected ? 'white' : 'black')};
+	background-color: ${({ selected }) => (selected ? 'black' : 'white')};
+	color: ${({ selected }) => (selected ? 'white' : 'black')};
+	fill: ${({ selected }) => (selected ? 'white' : 'black')};
 	padding: 5px;
 	border: none;
 	border-radius: 4px;
@@ -48,7 +48,7 @@ const StyledIconButton = styled(Icon)`
 	justify-content: center;
 
 	&:hover {
-		background-color: ${({ isSelected }) => (isSelected ? '#555D66' : '#f3f4f5')};
+		background-color: ${({ selected }) => (selected ? '#555D66' : '#f3f4f5')};
 	}
 
 	& svg {
@@ -108,29 +108,49 @@ IconPicker.propTypes = {
 	label: PropTypes.string,
 };
 
+/**
+ * IconLabel
+ *
+ * @typedef IconLabelProps
+ * @property {object} icon icon object
+ * @property {boolean} isChecked whether the icon is checked
+ *
+ * @param {IconLabelProps} props IconLabel Props
+ * @returns {*} React Element
+ */
+const IconLabel = (props) => {
+	const { icon, isChecked } = props;
+	return (
+		<>
+			<StyledIconButton
+				selected={isChecked}
+				key={icon.name}
+				name={icon.name}
+				iconSet={icon.iconSet}
+			/>
+			<VisuallyHidden>{icon.label}</VisuallyHidden>
+		</>
+	);
+};
+
+IconLabel.propTypes = {
+	icon: PropTypes.object.isRequired,
+	isChecked: PropTypes.bool.isRequired,
+};
+
 const IconGrid = (props) => {
 	const { icons, selectedIcon, onChange } = props;
 
 	return (
 		<StyledIconGrid orientation="vertical" className="component-icon-picker__list">
 			{icons.map((icon) => {
 				const isChecked =
-					selectedIcon?.name === icon.name && selectedIcon?.iconSet === icon.iconSet;
-				const Label = memo(() => (
-					<>
-						<StyledIconButton
-							isSelected={isChecked}
-							key={icon.name}
-							name={icon.name}
-							iconSet={icon.iconSet}
-						/>
-						<VisuallyHidden>{icon.label}</VisuallyHidden>
-					</>
-				));
+					selectedIcon?.name === icon?.name && selectedIcon?.iconSet === icon?.iconSet;
+
 				return (
 					<CheckboxControl
 						key={icon.name}
-						label={<Label />}
+						label={<IconLabel isChecked={isChecked} icon={icon} />}
 						checked={isChecked}
 						onChange={() => onChange(icon)}
 						className="component-icon-picker__checkbox-control"

diff --git a/components/icon-picker/inline-icon-picker.js b/components/icon-picker/inline-icon-picker.js
@@ -24,7 +24,7 @@ export const InlineIconPicker = (props) => {
 	const { value, ...rest } = props;
 	const IconButton = useCallback(
 		({ onToggle }) => (
-			<Icon name={value.name} iconSet={value.iconSet} onClick={onToggle} {...rest} />
+			<Icon name={value?.name} iconSet={value?.iconSet} onClick={onToggle} {...rest} />
 		),
 		[value, rest],
 	);
@@ -46,7 +46,7 @@ export const IconPickerDropdown = (props) => {
 		<Dropdown
 			className="component-icon-picker-inline-button"
 			contentClassName="component-icon-picker-inline__content"
-			position="bottom right"
+			popoverProps={{ placement: 'bottom-start' }}
 			renderToggle={renderToggle}
 			renderContent={() => <StyledIconPickerDropdown {...iconPickerProps} />}
 		/>

diff --git a/example/.wp-env.json b/example/.wp-env.json
@@ -1,5 +1,5 @@
 {
-    "plugins": [ ".", "https://downloads.wordpress.org/plugin/wordpress-seo.20.4.zip" ],
+    "plugins": [ ".", "https://downloads.wordpress.org/plugin/wordpress-seo.20.9.zip" ],
     "mappings": {
         "/var/www/html/images": "./images"
     }