WRR-14756: Refactor ColorPicker to use TabGroup instead of TabLayout

ColorPicker/ColorPicker.js

@@ -14,16 +14,15 @@
  * @public
  */
 import Spottable from '@enact/spotlight/Spottable';
-import {Cell, Column, Row} from '@enact/ui/Layout';
-import ri from '@enact/ui/resolution';
+import {Cell, Row} from '@enact/ui/Layout';
 import PropTypes from 'prop-types';
 import {useCallback, useEffect, useRef, useState} from 'react';
 
 import {ButtonBase} from '../Button';
 import Icon from '../Icon';
 import Popup from '../Popup';
 import Skinnable from '../Skinnable';
-import TabLayout, {Tab} from '../TabLayout';
+import TabGroup from '../TabLayout/TabGroup';
 
 import ColorPickerGrid from './ColorPickerGrid';
 import ColorPickerSlider from './ColorPickerSlider';
@@ -145,7 +144,7 @@
 									color: generateOppositeColor(color)
 								}}
 							>
-								{editEnabled && <Icon className={componentCss.deleteButton} size={'tiny'}>trash</Icon>}
+								{editEnabled && <Icon className={componentCss.deleteButton} size="tiny">trash</Icon>}
 							</SpottableButton>
 						);
 					})}
@@ -171,13 +170,13 @@
 									color: generateOppositeColor(color)
 								}}
 							>
-								{editEnabled && <Icon className={componentCss.deleteButton} size={'tiny'}>trash</Icon>}
+								{editEnabled && <Icon className={componentCss.deleteButton} size="tiny">trash</Icon>}
 							</SpottableButton>
 						);
 					})}
 				</Cell>
 			</Row>
-			<Column align="center" className={componentCss.selectedColorColumn}>
+			<Row className={componentCss.selectedColorContainer}>
 				<SpottableButton
 					className={componentCss.selectedColor}
 					minWidth={false}
@@ -191,7 +190,7 @@
 				>
 					<Icon className={componentCss.selectedColorIcon} size="large">{editEnabled ? 'check' : 'plus'}</Icon>
 				</SpottableButton>
-			</Column>
+			</Row>
 		</div>
 	);
 };
@@ -252,7 +251,7 @@
  * @ui
  * @public
  */
-const ColorPickerBase = ({color = '#eb4034', colors = ['#eb4034', '#32a852', '#3455eb'], css, disabled, onChangeColor, open, type = 'grid', ...rest}) => {
+const ColorPickerBase = ({color = '#eb4034', colors = ['#eb4034', '#32a852', '#3455eb'], disabled, onChangeColor, open, type = 'grid', ...rest}) => {
 	const [favoriteColors, setFavoriteColors] = useState(colors);
 	const [selectedColor, setSelectedColor] = useState(color);
 	const [tabLayoutIndex, setTabLayoutIndex] = useState(0);
@@ -298,38 +297,50 @@
 		setTabLayoutIndex(2);
 	}, [disabled, setTabLayoutIndex]);
 
+	const renderContent = () => {
+		if (tabLayoutIndex === 0) {
+			return (
+				<ColorPickerGrid disabled={disabled} selectedColorHandler={setSelectedColor} />
+			);
+		} else if (tabLayoutIndex === 1) {
+			return (
+				<ColorPickerSpectrum disabled={disabled} selectedColor={selectedColor} selectedColorHandler={setSelectedColor} />
+			);
+		} else if (tabLayoutIndex === 2) {
+			return (
+				<ColorPickerSlider disabled={disabled} selectedColor={selectedColor} selectedColorHandler={setSelectedColor} />
+			);
+		} else {
+			return <div>Loading</div>;
+		}
+	};
+
 	return (
 		<Popup disabled={disabled} open={open} position="center" {...rest}>
 			<Row>
 				<Cell size="75%">
-					<TabLayout className={componentCss.pickerTabLayout} css={css} index={tabLayoutIndex} orientation="horizontal">
-						<Tab onTabClick={handleGridClick} spotlightDisabled={disabled} style={{width: ri.scaleToRem(400)}} title="Grid">
-							<div className={componentCss.colorPicker}>
-								<ColorPickerGrid disabled={disabled} selectedColorHandler={setSelectedColor} />
-							</div>
-						</Tab>
-						<Tab onTabClick={handleSpectrumClick} spotlightDisabled={disabled} style={{width: ri.scaleToRem(400)}} title="Spectrum">
-							<div className={componentCss.colorPicker}>
-								<ColorPickerSpectrum disabled={disabled} selectedColor={selectedColor} selectedColorHandler={setSelectedColor} />
-							</div>
-						</Tab>
-						<Tab onTabClick={handleSlidersClick} spotlightDisabled={disabled} style={{width: ri.scaleToRem(400)}} title="Sliders">
-							<div className={componentCss.colorPicker}>
-								<ColorPickerSlider disabled={disabled} selectedColor={selectedColor} selectedColorHandler={setSelectedColor} />
-							</div>
-						</Tab>
-					</TabLayout>
+					<TabGroup
+						className={componentCss.pickerTabGroup}
+						tabs={[
+							{title: 'Grid', onTabClick: handleGridClick},
+							{title: 'Spectrum', onTabClick: handleSpectrumClick},
+							{title: 'Sliders', onTabClick: handleSlidersClick}
+						]}
+						orientation="horizontal"
+						tabSize={400}
+					/>
+					<div className={componentCss.colorPicker}>
+						{renderContent()}
+					</div>
 				</Cell>
 				<Cell align="end" size="25%">
-					<Column>
-						<FavoriteColors
-							disabled={disabled}
-							favoriteColors={favoriteColors}
-							favoriteColorsHandler={setFavoriteColors}
-							selectedColor={selectedColor}
-							selectedColorHandler={setSelectedColor}
-						/>
-					</Column>
+					<FavoriteColors
+						disabled={disabled}
+						favoriteColors={favoriteColors}
+						favoriteColorsHandler={setFavoriteColors}
+						selectedColor={selectedColor}
+						selectedColorHandler={setSelectedColor}
+					/>
 				</Cell>
 			</Row>
 		</Popup>
@@ -355,15 +366,6 @@
 	 */
 	colors: PropTypes.array,
 
-	/**
-	 * Customizes the component by mapping the supplied collection of CSS class names to the
-	 * corresponding internal elements and states of this component.
-	 *
-	 * @type {Object}
-	 * @public
-	 */
-	css: PropTypes.object,
-
 	/**
 	 * Applies a disabled style and prevents interacting with the component.
 	 *

ColorPicker/ColorPicker.module.less

@@ -1,6 +1,7 @@
 // ColorPicker.module.less
 //
 @import "../styles/mixins.less";
+@import "../styles/variables.less";
 
 @keyframes shakeColor {
 	0% { transform: translateX(0) }
@@ -10,55 +11,24 @@
 	100% { transform: translateX(0) }
 }
 
-.pickerTabLayout {
-	align-items: center;
-	overflow: hidden;
-
-	> :first-child {
-		max-width: 100%; /* Fallback */
-		max-width: -webkit-fill-available; /* WebKit-specific */
-		max-width: stretch; /* Modern standard, for other browsers */
-	}
+.pickerTabGroup {
+	min-width: @sand-colorpicker-tabgroup-width;
+	padding-bottom: @sand-colorpicker-padding;
 }
 
 .colorPicker {
 	display: flex;
-	height: 702px;
+	height: @sand-colorpicker-height;
 	justify-content: center;
-	min-width: 800px;
-	padding: 0 21px;
-}
-
-.selectedColorColumn {
-	margin-top: 15px;
-
-	.selectedColor {
-		border-radius: 24px;
-		border: 9px solid;
-		height: 240px;
-		margin-inline: 0;
-		transition: transform .2s;
-
-		.selectedColorIcon {
-			transition: transform .2s;
-		}
-
-		.focus({
-			box-shadow: 0 0 12px 6px inset;
-
-			.selectedColorIcon {
-				transform: scale(1.2);
-			}
-		});
-	}
+	padding: @sand-colorpicker-padding;
 }
 
 .favoriteColorsRow {
 	text-align: center;
 
 	.favoriteColor {
 		border-radius: 50%;
-		border: 6px solid;
+		border: @sand-colorpicker-border-medium solid;
 		transition: transform .2s;
 
 		.deleteButton {
@@ -77,3 +47,28 @@
 		animation-iteration-count: infinite;
 	}
 }
+
+.selectedColorContainer {
+	justify-content: center;
+	margin-top: @sand-colorpicker-selectedcolor-margin;
+
+	.selectedColor {
+		border-radius: @sand-colorpicker-selectedcolor-border-radius;
+		border: @sand-colorpicker-border-medium solid;
+		height: @sand-colorpicker-selectedcolor-height;
+		margin-inline: 0;
+		transition: transform .2s;
+
+		.selectedColorIcon {
+			transition: transform .2s;
+		}
+
+		.focus({
+			box-shadow: 0 0 12px 6px inset;
+
+			.selectedColorIcon {
+				transform: scale(1.2);
+			}
+		});
+	}
+}

ColorPicker/ColorPickerGrid.module.less

@@ -8,9 +8,9 @@
 	display: flex;
 
 	.colorBlock {
-		border: 9px solid transparent;
-		height: 48px;
-		width: 48px;
+		border: @sand-colorpicker-border-large solid @sand-colorpicker-colorblock-border-color;
+		height: @sand-colorpicker-grid-colorblock-size;
+		width: @sand-colorpicker-grid-colorblock-size;
 
 		.focus({
 			border-color: var(--sand-colorpicker-grid-focus-border-color);

ColorPicker/ColorPickerSlider.js

@@ -115,7 +115,7 @@ const ColorPickerSliderRGB = ({disabled, selectedColor, selectedColorHandler, ..
 		<Layout {...props} className={componentCss.slidersContainer}>
 			<Cell>
 				<Cell className={componentCss.labelText}>Red</Cell>
-				<Row>
+				<Row className={componentCss.sliderRow}>
 					<Cell
 						className={componentCss.sliderCell}
 						size="70%"
@@ -144,7 +144,7 @@ const ColorPickerSliderRGB = ({disabled, selectedColor, selectedColorHandler, ..
 					<Cell className={componentCss.outputText} size="20%">{localRed}</Cell>
 				</Row>
 				<Cell className={componentCss.labelText}>Green</Cell>
-				<Row>
+				<Row className={componentCss.sliderRow}>
 					<Cell
 						className={componentCss.sliderCell}
 						size="70%"
@@ -173,7 +173,7 @@ const ColorPickerSliderRGB = ({disabled, selectedColor, selectedColorHandler, ..
 					<Cell className={componentCss.outputText} size="20%">{localGreen}</Cell>
 				</Row>
 				<Cell className={componentCss.labelText}>Blue</Cell>
-				<Row>
+				<Row className={componentCss.sliderRow}>
 					<Cell
 						className={componentCss.sliderCell}
 						size="70%"
@@ -443,7 +443,7 @@ const ColorPickerSlider = ({disabled, selectedColor, selectedColorHandler, type
 
 	return (
 		<Cell {...props} className={componentCss.sliderPickerContainer}>
-			<Row className={componentCss.containerRow}>
+			<Row>
 				<Cell size="60%">
 					<Dropdown
 						className={componentCss.pickerSelect}
@@ -453,6 +453,7 @@ const ColorPickerSlider = ({disabled, selectedColor, selectedColorHandler, type
 						selected={dropdownValue}
 						size="small"
 						spotlightDisabled={disabled}
+						width="tiny"
 					>
 						{['RGB', 'HSL']}
 					</Dropdown>