fix(@clayui/color-picker): remove last-row classes and API that was added on accident

Author: bryceosterhaus

packages/clay-color-picker/src/Basic.tsx

@@ -3,7 +3,6 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
-import classNames from 'classnames';
 import React from 'react';
 
 import Splotch from './Splotch';
@@ -42,12 +41,7 @@ const ClayColorPickerBasic: React.FunctionComponent<IProps> = ({
 
 		<div className="clay-color-swatch">
 			{colors.map((hex, i) => (
-				<div
-					className={classNames('clay-color-swatch-item', {
-						'clay-color-swatch-item-last-row': i >= 20,
-					})}
-					key={i}
-				>
+				<div className="clay-color-swatch-item" key={i}>
 					<Splotch onClick={() => onChange(hex)} value={hex} />
 				</div>
 			))}

packages/clay-color-picker/src/Custom.tsx

@@ -6,7 +6,6 @@
 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';
 
@@ -197,12 +196,7 @@ const ClayColorPickerCustom: React.FunctionComponent<IProps> = ({
 			{showPalette && (
 				<div className="clay-color-swatch">
 					{colors.map((hex, i) => (
-						<div
-							className={classNames('clay-color-swatch-item', {
-								'clay-color-swatch-item-last-row': i >= 6,
-							})}
-							key={i}
-						>
+						<div className="clay-color-swatch-item" key={i}>
 							<Splotch
 								active={i === activeSplotchIndex}
 								onClick={() => {

packages/clay-color-picker/src/Splotch.tsx

@@ -23,18 +23,13 @@ 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, last, size, value, ...otherProps}, ref) => {
+	({active, className, size, value, ...otherProps}, ref) => {
 		const color = tinycolor(value);
 
 		const isHex = (color.getFormat() || '').match('hex');
@@ -48,7 +43,6 @@ 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}