Merge pull request #9 from infinum/release/1.6.0

1.6.0

CHANGELOG.md

@@ -3,6 +3,18 @@ All notable changes to this project will be documented in this file.
 
 This projects adheres to [Semantic Versioning](https://semver.org/) and [Keep a CHANGELOG](https://keepachangelog.com/).
 
+## [1.6.0] - 2024-09-27
+- Updated dependencies.
+- `ColorPicker` now has better UX when set to `clearable`.
+- Made `clearable` variant of `ColorPicker` less confusing.
+- Reworked `Draggable`, `DraggableList`, and `Repeater` to improve user experience.
+- `Draggable` is now much easier to use.
+- `Repeater` now supports "drag outside to delete item", custom menu items for each item, a settable max number of items, and there's a *Duplicate* option now on items.
+- Fixed `Draggable` not working.
+- Removed `swapy` dependency.
+- Made `OptionsPanel` a bit wider.
+- Added `OptionsPanelHeader`.
+
 ## [1.5.1] - 2024-09-18
 - Fixed select components overlaps in some cases (by @piqusy).
 - Added `noExpandButton`, `noLabel`, `noUseToggle`, and `hideUseToggleOnExpand` to `ComponentToggle`.
@@ -169,6 +181,7 @@ This projects adheres to [Semantic Versioning](https://semver.org/) and [Keep a
 - Initial release
 
 [Unreleased]: https://github.com/infinum/eightshift-ui-components/compare/master...HEAD
+[1.6.0]: https://github.com/infinum/eightshift-ui-components/compare/1.5.1...1.6.0
 [1.5.1]: https://github.com/infinum/eightshift-ui-components/compare/1.5.0...1.5.1
 [1.5.0]: https://github.com/infinum/eightshift-ui-components/compare/1.4.7...1.5.0
 [1.4.7]: https://github.com/infinum/eightshift-ui-components/compare/1.4.6...1.4.7

lib/components/animated-visibility/animated-visibility.jsx

@@ -43,9 +43,9 @@ export const AnimatedVisibility = (props) => {
 			exit: { opacity: 0, scale: 0.9 },
 		},
 		scaleRotateFade: {
-			initial: { opacity: 0, scale: 0.95, rotate: '-25deg' },
+			initial: { opacity: 0, scale: 0.95, rotate: '-10deg' },
 			animate: { opacity: 1, scale: 1, rotate: '0deg' },
-			exit: { opacity: 0, scale: 0.95, rotate: '-25deg' },
+			exit: { opacity: 0, scale: 0.95, rotate: '-10deg' },
 		},
 	};
 
@@ -56,6 +56,7 @@ export const AnimatedVisibility = (props) => {
 					initial={transitions[transition].initial}
 					animate={transitions[transition].animate}
 					exit={transitions[transition].exit}
+					transition={{ type: 'spring', damping: 15, stiffness: 225 }}
 					className={className}
 					{...other}
 				>

lib/components/color-pickers/color-picker.jsx

@@ -1,5 +1,5 @@
 import { __ } from '@wordpress/i18n';
-import { Menu, MenuItem, MenuSection } from '../menu/menu';
+import { Menu, MenuItem, MenuSection, MenuSeparator } from '../menu/menu';
 import { ColorSwatch } from './color-swatch';
 import { RichLabel } from '../rich-label/rich-label';
 import { BaseControl } from '../base-control/base-control';
@@ -25,10 +25,11 @@ import { icons } from '../../icons/icons';
  * @param {boolean} [props.showColorCode] - If `true`, the HEX color code is shown below the color name.
  * @param {boolean} [props.noColorGroups] - If `true`, colors won't be grouped by shades.
  * @param {ColorPickerType} props.type - Type of the color picker. Affects the icon and tooltip.
- * @param {boolean} [props.clearable] - If `true`, the color can be deselected.
+ * @param {boolean} [props.clearable] - If `true`, the picked color can be removed.
  * @param {boolean} [props.stacked] - If `true`, the control is not rendered inline.
  * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  * @param {string} [props.tooltip] - If provided, overrides the default tooltip text. If there is no label, the value will still be shown within the tooltip.
+ * @param {string} [props.clearItemLabel] - Label for the "None" item, if `clearable` is enabled.
  *
  * @returns {JSX.Element} The ColorPicker component.
  *
@@ -70,6 +71,7 @@ export const ColorPicker = (props) => {
 		stacked,
 
 		clearable,
+		clearItemLabel = __('None', 'eightshift-ui-components'),
 
 		hidden,
 
@@ -136,17 +138,8 @@ export const ColorPicker = (props) => {
 					color={color}
 				/>
 			}
-			onClick={() => {
-				if (clearable && value === slug) {
-					onChange(undefined);
-
-					return;
-				}
-
-				onChange(slug);
-			}}
-			checked={clearable ? value === slug : null}
-			selected={!clearable ? value === slug : null}
+			onClick={() => onChange(slug)}
+			selected={value === slug}
 		>
 			{!showColorCode && name}
 			{showColorCode && (
@@ -235,6 +228,19 @@ export const ColorPicker = (props) => {
 				}}
 				{...rest}
 			>
+				{clearable && (
+					<>
+						<MenuItem
+							onClick={() => onChange(undefined)}
+							selected={typeof value === 'undefined'}
+							endIcon={<ColorSwatch className='!es-uic-size-5.5' />}
+						>
+							{clearItemLabel}
+						</MenuItem>
+						<MenuSeparator />
+					</>
+				)}
+
 				{(noColorGroups || !hasColorGroups) &&
 					colors.map((color) => (
 						<SingleItem

lib/components/component-toggle/component-toggle.jsx

@@ -134,6 +134,7 @@ export const ComponentToggle = (props) => {
 					<AnimatedVisibility
 						visible={useComponent}
 						className={contentClassName}
+						noInitial
 					>
 						{children}
 					</AnimatedVisibility>

lib/components/draggable-list/draggable-list-item.jsx

@@ -1,8 +1,8 @@
 import { clsx } from 'clsx/lite';
 import { __ } from '@wordpress/i18n';
-import { RichLabel } from '../rich-label/rich-label';
-import { DraggableListContext } from './draggable-list-context';
-import { useContext } from 'react';
+import { BaseControl } from '../base-control/base-control';
+import { icons } from '../../icons';
+import { cloneElement } from 'react';
 
 /**
  * A DraggableList item.
@@ -15,7 +15,6 @@ import { useContext } from 'react';
  * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to display to the right of the label.
  * @param {string} [props.textValue] - The text value of the item.
  * @param {string} [props.className] - Classes to pass to the label.
- * @param {string} [props.containerClassName] - Classes to pass to the item container.
  *
  * @returns {JSX.Element} The DraggableList component.
  *
@@ -24,36 +23,24 @@ import { useContext } from 'react';
  * @preserve
  */
 export const DraggableListItem = (props) => {
-	const { children, icon, label, subtitle, className, containerClassName, ...rest } = props;
+	const { children, icon, label, subtitle, className, ...rest } = props;
 
-	const { labelAsHandle } = useContext(DraggableListContext);
-
-	const labelElement = (
-		<RichLabel
-			hidden={!(icon || label || subtitle)}
+	return (
+		<BaseControl
 			icon={icon}
 			label={label}
 			subtitle={subtitle}
-			className={className}
-			fullWidth
-		/>
-	);
-
-	return (
-		<div
-			className={clsx(
-				'es-uic-flex es-uic-min-h-7 es-uic-items-center es-uic-gap-1 es-uic-rounded-lg es-uic-transition',
-				'focus:es-uic-outline-none focus-visible:es-uic-ring focus-visible:es-uic-ring-teal-500 focus-visible:es-uic-ring-opacity-50',
-				containerClassName,
-			)}
+			className={clsx('es-uic-w-full', className)}
+			fullWidthLabel
+			inline
 			{...rest}
 		>
-			{labelAsHandle && <div data-swapy-handle>{labelElement}</div>}
-
-			{!labelAsHandle && labelElement}
+			{cloneElement(icons.reorderGrabberV, {
+				className: 'es-uic-opacity-0 es-uic-transition-opacity group-focus-visible:es-uic-opacity-100 es-uic-text-gray-400 es-uic-size-4 group-hover:es-uic-opacity-100',
+			})}
 
 			{children}
-		</div>
+		</BaseControl>
 	);
 };
 
@@ -75,15 +62,16 @@ export const DraggableListItemHandle = (props) => {
 	const { className, children, ...rest } = props;
 
 	return (
-		<div
-			data-swapy-handle
+		<button
 			className={
 				className ??
 				'es-uic-relative es-uic-h-6 es-uic-w-2 es-uic-cursor-pointer es-uic-items-center es-uic-justify-center es-uic-self-center es-uic-rounded es-uic-border es-uic-border-gray-300 es-uic-bg-gray-50 es-uic-transition after:es-uic-absolute after:es-uic-inset-0 after:es-uic-m-auto after:es-uic-h-4 after:es-uic-w-px after:es-uic-bg-gray-200 after:es-uic-transition after:es-uic-content-[""] hover:es-uic-border-teal-500 hover:es-uic-bg-teal-400 hover:after:es-uic-bg-teal-500'
 			}
 			{...rest}
+			data-movable-handle
+			tabIndex={-1}
 		>
 			{children}
-		</div>
+		</button>
 	);
 };