feat(@clayui/color-picker): update markup for hybrid color-picker

liferay · Feb 4, 2021 · de4e90f · de4e90f
1 parent d149fc1
commit de4e90f
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 73 deletions.
diff --git a/packages/clay-color-picker/src/Basic.tsx b/packages/clay-color-picker/src/Basic.tsx
@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
+import classNames from 'classnames';
 import React from 'react';
 
 import Splotch from './Splotch';
@@ -41,7 +42,12 @@ const ClayColorPickerBasic: React.FunctionComponent<IProps> = ({
 
 		<div className="clay-color-swatch">
 			{colors.map((hex, i) => (
-				<div className="clay-color-swatch-item" key={i}>
+				<div
+					className={classNames('clay-color-swatch-item', {
+						'clay-color-swatch-item-last-row': i >= 20,
+					})}
+					key={i}
+				>
 					<Splotch onClick={() => onChange(hex)} value={hex} />
 				</div>
 			))}

diff --git a/packages/clay-color-picker/src/Custom.tsx b/packages/clay-color-picker/src/Custom.tsx
@@ -6,6 +6,7 @@
 import ClayForm, {ClayInput} from '@clayui/form';
 import Icon from '@clayui/icon';
 import {TInternalStateOnChange, useInternalState} from '@clayui/shared';
+import classNames from 'classnames';
 import React from 'react';
 import tinycolor from 'tinycolor2';
 
@@ -196,7 +197,12 @@ const ClayColorPickerCustom: React.FunctionComponent<IProps> = ({
 			{showPalette && (
 				<div className="clay-color-swatch">
 					{colors.map((hex, i) => (
-						<div className="clay-color-swatch-item" key={i}>
+						<div
+							className={classNames('clay-color-swatch-item', {
+								'clay-color-swatch-item-last-row': i >= 6,
+							})}
+							key={i}
+						>
 							<Splotch
 								active={i === activeSplotchIndex}
 								onClick={() => {

diff --git a/packages/clay-color-picker/src/Splotch.tsx b/packages/clay-color-picker/src/Splotch.tsx
@@ -23,13 +23,18 @@ interface IProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 	 * The hex value of the splotch color
 	 */
 	value: string;
+
+	/**
+	 * Adds class `clay-color-swatch-item-last-row`
+	 */
+	last?: boolean;
 }
 
 /**
  * Renders component that displays a color
  */
 const ClayColorPickerSplotch = React.forwardRef<HTMLButtonElement, IProps>(
-	({active, className, size, value, ...otherProps}, ref) => {
+	({active, className, last, size, value, ...otherProps}, ref) => {
 		const color = tinycolor(value);
 
 		const isHex = (color.getFormat() || '').match('hex');
@@ -43,6 +48,7 @@ const ClayColorPickerSplotch = React.forwardRef<HTMLButtonElement, IProps>(
 				className={classNames('clay-color-btn', className, {
 					active,
 					'clay-color-btn-bordered': requireBorder,
+					'clay-color-swatch-item-last-row': last,
 				})}
 				displayType={null}
 				ref={ref}