From 7e4897ed4a2d44fa528ee35fb688535ff53594fe Mon Sep 17 00:00:00 2001
From: Iliyana Dyankova <inikolova@progress.com>
Date: Wed, 8 Jan 2025 15:18:18 +0200
Subject: [PATCH] feat(html): add ColorPalette sizing

---
 .../src/coloreditor/color-editor.spec.tsx     |  2 +-
 .../src/colorpalette/colorpalette.spec.tsx    | 17 +++++++++++----
 .../colorpalette/tests/colorpalette-size.tsx  | 21 +++++++++++++++++++
 3 files changed, 35 insertions(+), 5 deletions(-)
 create mode 100644 packages/html/src/colorpalette/tests/colorpalette-size.tsx

diff --git a/packages/html/src/coloreditor/color-editor.spec.tsx b/packages/html/src/coloreditor/color-editor.spec.tsx
index 4a5e17f07e6..102ffe7f1cd 100644
--- a/packages/html/src/coloreditor/color-editor.spec.tsx
+++ b/packages/html/src/coloreditor/color-editor.spec.tsx
@@ -89,7 +89,7 @@ export const ColorEditor = (
                 </div>
             </div>
             <div className="k-coloreditor-views k-vstack">
-                { view === 'gradient' ? <ColorGradient focus={focusView} size={size} canvasOrientation={canvasOrientation} /> : <ColorPalette palette={palette} /> }
+                { view === 'gradient' ? <ColorGradient focus={focusView} size={size} canvasOrientation={canvasOrientation} /> : <ColorPalette palette={palette} size={size} /> }
             </div>
             {actionButtons && <ActionButtons className="k-coloreditor-footer" alignment="end" >
                 <Button className="k-coloreditor-cancel" size={size}>Cancel</Button>
diff --git a/packages/html/src/colorpalette/colorpalette.spec.tsx b/packages/html/src/colorpalette/colorpalette.spec.tsx
index 0970219f25c..ab5ded9be15 100644
--- a/packages/html/src/colorpalette/colorpalette.spec.tsx
+++ b/packages/html/src/colorpalette/colorpalette.spec.tsx
@@ -1,4 +1,4 @@
-import { classNames, stateClassNames, States } from '../misc';
+import { classNames, stateClassNames, States, Size, optionClassNames } from '../misc';
 import { ColorPaletteRow } from './colorpalette-row';
 import { ColorPaletteTile } from './colorpalette-tile';
 
@@ -8,9 +8,15 @@ const states = [
     States.disabled
 ];
 
-const options = {};
+const options = {
+    size: [ Size.small, Size.medium, Size.large ]
+};
+
+export type KendoColorPaletteOptions = {
+    size?: (typeof options.size)[number] | null;
+};
 
-export type KendoColorPaletteProps = {
+export type KendoColorPaletteProps = KendoColorPaletteOptions & {
     palette?: Array<string> | any;
     columns?: number;
     tileSize?: string;
@@ -19,7 +25,8 @@ export type KendoColorPaletteProps = {
 export type KendoColorPaletteState = { [K in (typeof states)[number]]?: boolean };
 
 const defaultOptions = {
-    columns: 10
+    columns: 10,
+    size: Size.medium
 };
 
 export const ColorPalette = (
@@ -28,6 +35,7 @@ export const ColorPalette = (
         React.HTMLAttributes<HTMLDivElement>
 ) => {
     const {
+        size = defaultOptions.size,
         palette,
         columns = defaultOptions.columns,
         tileSize,
@@ -69,6 +77,7 @@ export const ColorPalette = (
                 stateClassNames(COLORPALETTE_CLASSNAME, {
                     disabled,
                 }),
+                optionClassNames(COLORPALETTE_CLASSNAME, { size }),
             )}>
 
             <table className="k-colorpalette-table">
diff --git a/packages/html/src/colorpalette/tests/colorpalette-size.tsx b/packages/html/src/colorpalette/tests/colorpalette-size.tsx
new file mode 100644
index 00000000000..302cc8bad57
--- /dev/null
+++ b/packages/html/src/colorpalette/tests/colorpalette-size.tsx
@@ -0,0 +1,21 @@
+import { ColorPalette, ColorPaletteNormal } from '../../colorpalette';
+
+export default () =>(
+    <>
+        <div id="test-area" className="k-d-grid k-grid-cols-3">
+
+            <span>Small</span>
+            <span>Medium</span>
+            <span>Large</span>
+
+            { ColorPalette.options.size.map((size) => (
+                <>
+                    <section>
+                        <ColorPaletteNormal size={size} />
+                    </section>
+                </>
+            ))}
+
+        </div>
+    </>
+);