feat(html): add ColorPalette sizing

telerik · Jan 8, 2025 · 7e4897e · 7e4897e
1 parent 5eaebf2
commit 7e4897e
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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>
+    </>
+);