@progress/kendo-themes-html 6.4.1-dev.1 → 6.5.0-dev.0

package/dist/esm/treelist/tests/treelist-react.js

@@ -6161,7 +6161,7 @@ var treelist_react_default = () => /* @__PURE__ */ jsx50(Fragment16, { children:
     /* @__PURE__ */ jsxs23("tbody", { className: "k-table-tbody", children: [
       /* @__PURE__ */ jsxs23("tr", { className: "k-table-row k-master-row", children: [
         /* @__PURE__ */ jsxs23("td", { className: "k-table-td", children: [
-          /* @__PURE__ */ jsx50(Icon, { icon: "caret-alt-down" }),
+          /* @__PURE__ */ jsx50(Icon, { className: "k-treelist-toggle", icon: "caret-alt-down" }),
           "1"
         ] }),
         /* @__PURE__ */ jsx50("td", { className: "k-table-td", children: "Furniture" }),
@@ -6171,8 +6171,8 @@ var treelist_react_default = () => /* @__PURE__ */ jsx50(Fragment16, { children:
       ] }),
       /* @__PURE__ */ jsxs23("tr", { className: "k-table-row k-master-row", children: [
         /* @__PURE__ */ jsxs23("td", { className: "k-table-td", children: [
-          /* @__PURE__ */ jsx50(Icon, { icon: "none" }),
-          /* @__PURE__ */ jsx50(Icon, { icon: "none" }),
+          /* @__PURE__ */ jsx50(Icon, { className: "k-treelist-toggle", icon: "none" }),
+          /* @__PURE__ */ jsx50(Icon, { className: "k-treelist-toggle", icon: "none" }),
           "1.1"
         ] }),
         /* @__PURE__ */ jsx50("td", { className: "k-table-td", children: "Tables & Chairs" }),
@@ -6182,8 +6182,8 @@ var treelist_react_default = () => /* @__PURE__ */ jsx50(Fragment16, { children:
       ] }),
       /* @__PURE__ */ jsxs23("tr", { className: "k-table-row k-master-row", children: [
         /* @__PURE__ */ jsxs23("td", { className: "k-table-td", children: [
-          /* @__PURE__ */ jsx50(Icon, { icon: "none" }),
-          /* @__PURE__ */ jsx50(Icon, { icon: "none" }),
+          /* @__PURE__ */ jsx50(Icon, { className: "k-treelist-toggle", icon: "none" }),
+          /* @__PURE__ */ jsx50(Icon, { className: "k-treelist-toggle", icon: "none" }),
           "1.2"
         ] }),
         /* @__PURE__ */ jsx50("td", { className: "k-table-td", children: "Sofas" }),
@@ -6193,8 +6193,8 @@ var treelist_react_default = () => /* @__PURE__ */ jsx50(Fragment16, { children:
       ] }),
       /* @__PURE__ */ jsxs23("tr", { className: "k-table-row k-master-row", children: [
         /* @__PURE__ */ jsxs23("td", { className: "k-table-td", children: [
-          /* @__PURE__ */ jsx50(Icon, { icon: "none" }),
-          /* @__PURE__ */ jsx50(Icon, { icon: "none" }),
+          /* @__PURE__ */ jsx50(Icon, { className: "k-treelist-toggle", icon: "none" }),
+          /* @__PURE__ */ jsx50(Icon, { className: "k-treelist-toggle", icon: "none" }),
           "1.3"
         ] }),
         /* @__PURE__ */ jsx50("td", { className: "k-table-td", children: "Occasional Furniture" }),
@@ -6204,7 +6204,7 @@ var treelist_react_default = () => /* @__PURE__ */ jsx50(Fragment16, { children:
       ] }),
       /* @__PURE__ */ jsxs23("tr", { className: "k-table-row k-master-row", children: [
         /* @__PURE__ */ jsxs23("td", { className: "k-table-td", children: [
-          /* @__PURE__ */ jsx50(Icon, { icon: "caret-alt-down" }),
+          /* @__PURE__ */ jsx50(Icon, { className: "k-treelist-toggle", icon: "caret-alt-down" }),
           "2"
         ] }),
         /* @__PURE__ */ jsx50("td", { className: "k-table-td", children: "Decor" }),
@@ -6214,8 +6214,8 @@ var treelist_react_default = () => /* @__PURE__ */ jsx50(Fragment16, { children:
       ] }),
       /* @__PURE__ */ jsxs23("tr", { className: "k-table-row k-master-row", children: [
         /* @__PURE__ */ jsxs23("td", { className: "k-table-td", children: [
-          /* @__PURE__ */ jsx50(Icon, { icon: "none" }),
-          /* @__PURE__ */ jsx50(Icon, { icon: "none" }),
+          /* @__PURE__ */ jsx50(Icon, { className: "k-treelist-toggle", icon: "none" }),
+          /* @__PURE__ */ jsx50(Icon, { className: "k-treelist-toggle", icon: "none" }),
           "2.1"
         ] }),
         /* @__PURE__ */ jsx50("td", { className: "k-table-td", children: "Bed Linen" }),
@@ -6225,8 +6225,8 @@ var treelist_react_default = () => /* @__PURE__ */ jsx50(Fragment16, { children:
       ] }),
       /* @__PURE__ */ jsxs23("tr", { className: "k-table-row k-master-row", children: [
         /* @__PURE__ */ jsxs23("td", { className: "k-table-td", children: [
-          /* @__PURE__ */ jsx50(Icon, { icon: "none" }),
-          /* @__PURE__ */ jsx50(Icon, { icon: "caret-alt-down" }),
+          /* @__PURE__ */ jsx50(Icon, { className: "k-treelist-toggle", icon: "none" }),
+          /* @__PURE__ */ jsx50(Icon, { className: "k-treelist-toggle", icon: "caret-alt-down" }),
           "2.2"
         ] }),
         /* @__PURE__ */ jsx50("td", { className: "k-table-td", children: "Curtains & Blinds" }),
@@ -6236,9 +6236,9 @@ var treelist_react_default = () => /* @__PURE__ */ jsx50(Fragment16, { children:
       ] }),
       /* @__PURE__ */ jsxs23("tr", { className: "k-table-row k-master-row", children: [
         /* @__PURE__ */ jsxs23("td", { className: "k-table-td", children: [
-          /* @__PURE__ */ jsx50(Icon, { icon: "none" }),
-          /* @__PURE__ */ jsx50(Icon, { icon: "none" }),
-          /* @__PURE__ */ jsx50(Icon, { icon: "none" }),
+          /* @__PURE__ */ jsx50(Icon, { className: "k-treelist-toggle", icon: "none" }),
+          /* @__PURE__ */ jsx50(Icon, { className: "k-treelist-toggle", icon: "none" }),
+          /* @__PURE__ */ jsx50(Icon, { className: "k-treelist-toggle", icon: "none" }),
           "2.2.1"
         ] }),
         /* @__PURE__ */ jsx50("td", { className: "k-table-td", children: "Carpets" }),

package/dist/esm/treelist/tests/treelist-row-reordering.js

@@ -4193,7 +4193,7 @@ var treelist_row_reordering_default = () => /* @__PURE__ */ jsx4(Fragment4, { ch
       /* @__PURE__ */ jsxs("tr", { className: "k-table-row", children: [
         /* @__PURE__ */ jsx4("td", { className: "k-table-td k-drag-cell", children: /* @__PURE__ */ jsx4(Icon, { icon: "reorder" }) }),
         /* @__PURE__ */ jsxs("td", { className: "k-table-td", children: [
-          /* @__PURE__ */ jsx4(Icon, { icon: "caret-alt-right" }),
+          /* @__PURE__ */ jsx4(Icon, { className: "k-treelist-toggle", icon: "caret-alt-right" }),
           "Daryl"
         ] }),
         /* @__PURE__ */ jsx4("td", { className: "k-table-td", children: "Sweeney" }),
@@ -4202,8 +4202,8 @@ var treelist_row_reordering_default = () => /* @__PURE__ */ jsx4(Fragment4, { ch
       /* @__PURE__ */ jsxs("tr", { className: "k-table-row k-table-alt-row k-alt k-treelist-group", children: [
         /* @__PURE__ */ jsx4("td", { className: "k-table-td k-drag-cell", children: /* @__PURE__ */ jsx4(Icon, { icon: "reorder" }) }),
         /* @__PURE__ */ jsxs("td", { className: "k-table-td", children: [
-          /* @__PURE__ */ jsx4(Icon, { icon: "none" }),
-          /* @__PURE__ */ jsx4(Icon, { icon: "caret-alt-down" }),
+          /* @__PURE__ */ jsx4(Icon, { className: "k-treelist-toggle", icon: "none" }),
+          /* @__PURE__ */ jsx4(Icon, { className: "k-treelist-toggle", icon: "caret-alt-down" }),
           "Guy"
         ] }),
         /* @__PURE__ */ jsx4("td", { className: "k-table-td", children: "Wooten" }),
@@ -4212,9 +4212,9 @@ var treelist_row_reordering_default = () => /* @__PURE__ */ jsx4(Fragment4, { ch
       /* @__PURE__ */ jsxs("tr", { className: "k-table-row k-treelist-group", children: [
         /* @__PURE__ */ jsx4("td", { className: "k-table-td k-drag-cell", children: /* @__PURE__ */ jsx4(Icon, { icon: "reorder" }) }),
         /* @__PURE__ */ jsxs("td", { className: "k-table-td", children: [
-          /* @__PURE__ */ jsx4(Icon, { icon: "none" }),
-          /* @__PURE__ */ jsx4(Icon, { icon: "none" }),
-          /* @__PURE__ */ jsx4(Icon, { icon: "caret-alt-down" }),
+          /* @__PURE__ */ jsx4(Icon, { className: "k-treelist-toggle", icon: "none" }),
+          /* @__PURE__ */ jsx4(Icon, { className: "k-treelist-toggle", icon: "none" }),
+          /* @__PURE__ */ jsx4(Icon, { className: "k-treelist-toggle", icon: "caret-alt-down" }),
           "Buffy"
         ] }),
         /* @__PURE__ */ jsx4("td", { className: "k-table-td", children: "Weber" }),
@@ -4223,10 +4223,10 @@ var treelist_row_reordering_default = () => /* @__PURE__ */ jsx4(Fragment4, { ch
       /* @__PURE__ */ jsxs("tr", { className: "k-table-row k-table-alt-row k-alt k-treelist-group", children: [
         /* @__PURE__ */ jsx4("td", { className: "k-table-td k-drag-cell", children: /* @__PURE__ */ jsx4(Icon, { icon: "reorder" }) }),
         /* @__PURE__ */ jsxs("td", { className: "k-table-td", children: [
-          /* @__PURE__ */ jsx4(Icon, { icon: "none" }),
-          /* @__PURE__ */ jsx4(Icon, { icon: "none" }),
-          /* @__PURE__ */ jsx4(Icon, { icon: "none" }),
-          /* @__PURE__ */ jsx4(Icon, { icon: "caret-alt-down" }),
+          /* @__PURE__ */ jsx4(Icon, { className: "k-treelist-toggle", icon: "none" }),
+          /* @__PURE__ */ jsx4(Icon, { className: "k-treelist-toggle", icon: "none" }),
+          /* @__PURE__ */ jsx4(Icon, { className: "k-treelist-toggle", icon: "none" }),
+          /* @__PURE__ */ jsx4(Icon, { className: "k-treelist-toggle", icon: "caret-alt-down" }),
           "Hyacinth"
         ] }),
         /* @__PURE__ */ jsx4("td", { className: "k-table-td", children: "Hood" }),
@@ -4235,11 +4235,11 @@ var treelist_row_reordering_default = () => /* @__PURE__ */ jsx4(Fragment4, { ch
       /* @__PURE__ */ jsxs("tr", { className: "k-table-row", children: [
         /* @__PURE__ */ jsx4("td", { className: "k-table-td k-drag-cell", children: /* @__PURE__ */ jsx4(Icon, { icon: "reorder" }) }),
         /* @__PURE__ */ jsxs("td", { className: "k-table-td", children: [
-          /* @__PURE__ */ jsx4(Icon, { icon: "none" }),
-          /* @__PURE__ */ jsx4(Icon, { icon: "none" }),
-          /* @__PURE__ */ jsx4(Icon, { icon: "none" }),
-          /* @__PURE__ */ jsx4(Icon, { icon: "none" }),
-          /* @__PURE__ */ jsx4(Icon, { icon: "none" }),
+          /* @__PURE__ */ jsx4(Icon, { className: "k-treelist-toggle", icon: "none" }),
+          /* @__PURE__ */ jsx4(Icon, { className: "k-treelist-toggle", icon: "none" }),
+          /* @__PURE__ */ jsx4(Icon, { className: "k-treelist-toggle", icon: "none" }),
+          /* @__PURE__ */ jsx4(Icon, { className: "k-treelist-toggle", icon: "none" }),
+          /* @__PURE__ */ jsx4(Icon, { className: "k-treelist-toggle", icon: "none" }),
           "Akeem"
         ] }),
         /* @__PURE__ */ jsx4("td", { className: "k-table-td", children: "Carr" }),

package/dist/esm/treelist/tests/treelist.js

@@ -4194,7 +4194,7 @@ var treelist_default = () => /* @__PURE__ */ jsx4(Fragment4, { children: /* @__P
       ] }),
       /* @__PURE__ */ jsx4("tbody", { className: "k-table-tbody", children: /* @__PURE__ */ jsxs("tr", { className: "k-table-row", children: [
         /* @__PURE__ */ jsxs("td", { className: "k-table-td", children: [
-          /* @__PURE__ */ jsx4(Icon, { icon: "caret-alt-right" }),
+          /* @__PURE__ */ jsx4(Icon, { className: "k-treelist-toggle", icon: "caret-alt-right" }),
           "Daryl"
         ] }),
         /* @__PURE__ */ jsx4("td", { className: "k-table-td", children: "Sweeney" })
@@ -4232,7 +4232,7 @@ var treelist_default = () => /* @__PURE__ */ jsx4(Fragment4, { children: /* @__P
       /* @__PURE__ */ jsxs("tbody", { className: "k-table-tbody", children: [
         /* @__PURE__ */ jsxs("tr", { className: "k-table-row k-treelist-group", children: [
           /* @__PURE__ */ jsxs("td", { className: "k-table-td", children: [
-            /* @__PURE__ */ jsx4(Icon, { icon: "caret-alt-down" }),
+            /* @__PURE__ */ jsx4(Icon, { className: "k-treelist-toggle", icon: "caret-alt-down" }),
             "Daryl"
           ] }),
           /* @__PURE__ */ jsx4("td", { className: "k-table-td", children: "Sweeney" }),
@@ -4240,8 +4240,8 @@ var treelist_default = () => /* @__PURE__ */ jsx4(Fragment4, { children: /* @__P
         ] }),
         /* @__PURE__ */ jsxs("tr", { className: "k-table-row k-table-alt-row k-alt k-treelist-group", children: [
           /* @__PURE__ */ jsxs("td", { className: "k-table-td", children: [
-            /* @__PURE__ */ jsx4(Icon, { icon: "none" }),
-            /* @__PURE__ */ jsx4(Icon, { icon: "caret-alt-down" }),
+            /* @__PURE__ */ jsx4(Icon, { className: "k-treelist-toggle", icon: "none" }),
+            /* @__PURE__ */ jsx4(Icon, { className: "k-treelist-toggle", icon: "caret-alt-down" }),
             "Guy"
           ] }),
           /* @__PURE__ */ jsx4("td", { className: "k-table-td", children: "Wooten" }),
@@ -4249,9 +4249,9 @@ var treelist_default = () => /* @__PURE__ */ jsx4(Fragment4, { children: /* @__P
         ] }),
         /* @__PURE__ */ jsxs("tr", { className: "k-table-row k-treelist-group", children: [
           /* @__PURE__ */ jsxs("td", { className: "k-table-td", children: [
-            /* @__PURE__ */ jsx4(Icon, { icon: "none" }),
-            /* @__PURE__ */ jsx4(Icon, { icon: "none" }),
-            /* @__PURE__ */ jsx4(Icon, { icon: "caret-alt-down" }),
+            /* @__PURE__ */ jsx4(Icon, { className: "k-treelist-toggle", icon: "none" }),
+            /* @__PURE__ */ jsx4(Icon, { className: "k-treelist-toggle", icon: "none" }),
+            /* @__PURE__ */ jsx4(Icon, { className: "k-treelist-toggle", icon: "caret-alt-down" }),
             "Buffy"
           ] }),
           /* @__PURE__ */ jsx4("td", { className: "k-table-td", children: "Weber" }),
@@ -4259,10 +4259,10 @@ var treelist_default = () => /* @__PURE__ */ jsx4(Fragment4, { children: /* @__P
         ] }),
         /* @__PURE__ */ jsxs("tr", { className: "k-table-row k-table-alt-row k-alt k-treelist-group", children: [
           /* @__PURE__ */ jsxs("td", { className: "k-table-td", children: [
-            /* @__PURE__ */ jsx4(Icon, { icon: "none" }),
-            /* @__PURE__ */ jsx4(Icon, { icon: "none" }),
-            /* @__PURE__ */ jsx4(Icon, { icon: "none" }),
-            /* @__PURE__ */ jsx4(Icon, { icon: "caret-alt-down" }),
+            /* @__PURE__ */ jsx4(Icon, { className: "k-treelist-toggle", icon: "none" }),
+            /* @__PURE__ */ jsx4(Icon, { className: "k-treelist-toggle", icon: "none" }),
+            /* @__PURE__ */ jsx4(Icon, { className: "k-treelist-toggle", icon: "none" }),
+            /* @__PURE__ */ jsx4(Icon, { className: "k-treelist-toggle", icon: "caret-alt-down" }),
             "Hyacinth"
           ] }),
           /* @__PURE__ */ jsx4("td", { className: "k-table-td", children: "Hood" }),
@@ -4270,11 +4270,11 @@ var treelist_default = () => /* @__PURE__ */ jsx4(Fragment4, { children: /* @__P
         ] }),
         /* @__PURE__ */ jsxs("tr", { className: "k-table-row", children: [
           /* @__PURE__ */ jsxs("td", { className: "k-table-td", children: [
-            /* @__PURE__ */ jsx4(Icon, { icon: "none" }),
-            /* @__PURE__ */ jsx4(Icon, { icon: "none" }),
-            /* @__PURE__ */ jsx4(Icon, { icon: "none" }),
-            /* @__PURE__ */ jsx4(Icon, { icon: "none" }),
-            /* @__PURE__ */ jsx4(Icon, { icon: "none" }),
+            /* @__PURE__ */ jsx4(Icon, { className: "k-treelist-toggle", icon: "none" }),
+            /* @__PURE__ */ jsx4(Icon, { className: "k-treelist-toggle", icon: "none" }),
+            /* @__PURE__ */ jsx4(Icon, { className: "k-treelist-toggle", icon: "none" }),
+            /* @__PURE__ */ jsx4(Icon, { className: "k-treelist-toggle", icon: "none" }),
+            /* @__PURE__ */ jsx4(Icon, { className: "k-treelist-toggle", icon: "none" }),
             "Akeem"
           ] }),
           /* @__PURE__ */ jsx4("td", { className: "k-table-td", children: "Carr" }),

package/dist/types/button/templates/icon-button.d.ts

@@ -1,2 +1 @@
-import { KendoButtonProps } from "../button.spec";
-export declare const IconButton: (props: KendoButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IconButton: (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/button/templates/icon-text-button.d.ts

@@ -1,2 +1 @@
-import { KendoButtonProps } from "../button.spec";
-export declare const IconTextButton: (props: KendoButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IconTextButton: (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/button/templates/text-button.d.ts

@@ -1,2 +1 @@
-import { KendoButtonProps } from "../button.spec";
-export declare const TextButton: (props: KendoButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TextButton: (props: any) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-themes-html",
   "description": "A collection of HTML helpers used for developing Kendo UI themes",
-  "version": "6.4.1-dev.1",
+  "version": "6.5.0-dev.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -51,5 +51,5 @@
   "devDependencies": {
     "@types/react": "^18.0.2"
   },
-  "gitHead": "6f485dfea68d56b41252d6545667f2839e1ac84e"
+  "gitHead": "b5525f1c4c71eb78873e1fb170ae20cd50a8468d"
 }

package/src/button/templates/icon-button.tsx

@@ -1,3 +1,3 @@
-import { Button, KendoButtonProps } from "../button.spec";
+import { Button } from "../button.spec";
 
-export const IconButton = (props: KendoButtonProps) => <Button icon="folder" {...props} children={undefined} />;
+export const IconButton = (props) => <Button icon="folder" {...props} children={undefined} />;

package/src/button/templates/icon-text-button.tsx

@@ -1,3 +1,3 @@
-import { Button, KendoButtonProps } from "../button.spec";
+import { Button } from "../button.spec";
 
-export const IconTextButton = (props: KendoButtonProps) => <Button icon="folder" children="Button" {...props} />;
+export const IconTextButton = (props) => <Button icon="folder" children="Button" {...props} />;

package/src/button/templates/text-button.tsx

@@ -1,3 +1,3 @@
-import { Button, KendoButtonProps } from "../button.spec";
+import { Button } from "../button.spec";
 
-export const TextButton = (props: KendoButtonProps) => <Button children="Button" {...props} />;
+export const TextButton = (props) => <Button children="Button" {...props} />;

package/src/button/tests/button-clear.tsx

@@ -1,4 +1,4 @@
-import { Button } from '../../button';
+import { Button, TextButton } from '../../button';
 
 const styles = `
     #test-area {
@@ -10,7 +10,6 @@ export default () => (
     <>
         <style>{styles}</style>
         <div id="test-area" className="k-d-grid">
-
             <span></span>
             <span>Normal</span>
             <span>Hover</span>
@@ -18,96 +17,18 @@ export default () => (
             <span>Active</span>
             <span>Selected</span>
             <span>Disabled</span>
-
-            <span>base</span>
-            <span><Button fillMode="clear">Normal</Button></span>
-            <span><Button fillMode="clear" hover>Hover</Button></span>
-            <span><Button fillMode="clear" focus>Focus</Button></span>
-            <span><Button fillMode="clear" active>Active</Button></span>
-            <span><Button fillMode="clear" selected>Selected</Button></span>
-            <span><Button fillMode="clear" disabled>Disabled</Button></span>
-
-            <span>primary</span>
-            <span><Button fillMode="clear" themeColor="primary">Normal</Button></span>
-            <span><Button fillMode="clear" themeColor="primary" hover >Hover</Button></span>
-            <span><Button fillMode="clear" themeColor="primary" focus>Focus</Button></span>
-            <span><Button fillMode="clear" themeColor="primary" active>Active</Button></span>
-            <span><Button fillMode="clear" themeColor="primary" selected >Selected</Button></span>
-            <span><Button fillMode="clear" themeColor="primary" disabled>Disabled</Button></span>
-
-            <span>secondary</span>
-            <span><Button fillMode="clear" themeColor="secondary">Normal</Button></span>
-            <span><Button fillMode="clear" themeColor="secondary" hover>Hover</Button></span>
-            <span><Button fillMode="clear" themeColor="secondary" focus>Focus</Button></span>
-            <span><Button fillMode="clear" themeColor="secondary" active>Active</Button></span>
-            <span><Button fillMode="clear" themeColor="secondary" selected>Selected</Button></span>
-            <span><Button fillMode="clear" themeColor="secondary" disabled>Disabled</Button></span>
-
-            <span>tertiary</span>
-            <span><Button fillMode="clear" themeColor="tertiary">Normal</Button></span>
-            <span><Button fillMode="clear" themeColor="tertiary" hover>Hover</Button></span>
-            <span><Button fillMode="clear" themeColor="tertiary" focus>Focus</Button></span>
-            <span><Button fillMode="clear" themeColor="tertiary" active>Active</Button></span>
-            <span><Button fillMode="clear" themeColor="tertiary" selected>Selected</Button></span>
-            <span><Button fillMode="clear" themeColor="tertiary" disabled>Disabled</Button></span>
-
-            <span>info</span>
-            <span><Button fillMode="clear" themeColor="info">Normal</Button></span>
-            <span><Button fillMode="clear" themeColor="info" hover>Hover</Button></span>
-            <span><Button fillMode="clear" themeColor="info" focus>Focus</Button></span>
-            <span><Button fillMode="clear" themeColor="info" active>Active</Button></span>
-            <span><Button fillMode="clear" themeColor="info" selected>Selected</Button></span>
-            <span><Button fillMode="clear" themeColor="info" disabled>Disabled</Button></span>
-
-            <span>success</span>
-            <span><Button fillMode="clear" themeColor="success">Normal</Button></span>
-            <span><Button fillMode="clear" themeColor="success" hover>Hover</Button></span>
-            <span><Button fillMode="clear" themeColor="success" focus>Focus</Button></span>
-            <span><Button fillMode="clear" themeColor="success" active>Active</Button></span>
-            <span><Button fillMode="clear" themeColor="success" selected>Selected</Button></span>
-            <span><Button fillMode="clear" themeColor="success" disabled>Disabled</Button></span>
-
-            <span>warning</span>
-            <span><Button fillMode="clear" themeColor="warning">Normal</Button></span>
-            <span><Button fillMode="clear" themeColor="warning" hover>Hover</Button></span>
-            <span><Button fillMode="clear" themeColor="warning" focus>Focus</Button></span>
-            <span><Button fillMode="clear" themeColor="warning" active>Active</Button></span>
-            <span><Button fillMode="clear" themeColor="warning" selected>Selected</Button></span>
-            <span><Button fillMode="clear" themeColor="warning" disabled>Disabled</Button></span>
-
-            <span>error</span>
-            <span><Button fillMode="clear" themeColor="error">Normal</Button></span>
-            <span><Button fillMode="clear" themeColor="error" hover>Hover</Button></span>
-            <span><Button fillMode="clear" themeColor="error" focus>Focus</Button></span>
-            <span><Button fillMode="clear" themeColor="error" active>Active</Button></span>
-            <span><Button fillMode="clear" themeColor="error" selected>Selected</Button></span>
-            <span><Button fillMode="clear" themeColor="error" disabled>Disabled</Button></span>
-
-            <span>dark</span>
-            <span><Button fillMode="clear" themeColor="dark">Normal</Button></span>
-            <span><Button fillMode="clear" themeColor="dark" hover>Hover</Button></span>
-            <span><Button fillMode="clear" themeColor="dark" focus>Focus</Button></span>
-            <span><Button fillMode="clear" themeColor="dark" active>Active</Button></span>
-            <span><Button fillMode="clear" themeColor="dark" selected>Selected</Button></span>
-            <span><Button fillMode="clear" themeColor="dark" disabled>Disabled</Button></span>
-
-            <span>light</span>
-            <span><Button fillMode="clear" themeColor="light">Normal</Button></span>
-            <span><Button fillMode="clear" themeColor="light" hover>Hover</Button></span>
-            <span><Button fillMode="clear" themeColor="light" focus>Focus</Button></span>
-            <span><Button fillMode="clear" themeColor="light" active>Active</Button></span>
-            <span><Button fillMode="clear" themeColor="light" selected>Selected</Button></span>
-            <span><Button fillMode="clear" themeColor="light" disabled>Disabled</Button></span>
-
-            <span>inverse</span>
-            <span><Button fillMode="clear" themeColor="inverse">Normal</Button></span>
-            <span><Button fillMode="clear" themeColor="inverse" hover>Hover</Button></span>
-            <span><Button fillMode="clear" themeColor="inverse" focus>Focus</Button></span>
-            <span><Button fillMode="clear" themeColor="inverse" active>Active</Button></span>
-            <span><Button fillMode="clear" themeColor="inverse" selected>Selected</Button></span>
-            <span><Button fillMode="clear" themeColor="inverse" disabled>Disabled</Button></span>
-
+            {[ ...Button.options.themeColor ].map((themeColor) => (
+                <>
+                    <span>{themeColor}</span>
+                    {[ 'normal' , ...Button.states ].map((state) => (
+                        <>
+                            <span>
+                                <TextButton fillMode="clear" themeColor={themeColor} {...{ [state]: true }}>{state}</TextButton>
+                            </span>
+                        </>
+                    ))}
+                </>
+            ))}
         </div>
-
     </>
 );

package/src/button/tests/button-flat.tsx

@@ -1,4 +1,4 @@
-import { Button } from '../../button';
+import { Button, TextButton } from '../../button';
 
 const styles = `
     #test-area {
@@ -10,7 +10,6 @@ export default () => (
     <>
         <style>{styles}</style>
         <div id="test-area" className="k-d-grid">
-
             <span></span>
             <span>Normal</span>
             <span>Hover</span>
@@ -18,96 +17,18 @@ export default () => (
             <span>Active</span>
             <span>Selected</span>
             <span>Disabled</span>
-
-            <span>base</span>
-            <span><Button fillMode="flat">Normal</Button></span>
-            <span><Button fillMode="flat" hover>Hover</Button></span>
-            <span><Button fillMode="flat" focus>Focus</Button></span>
-            <span><Button fillMode="flat" active>Active</Button></span>
-            <span><Button fillMode="flat" selected>Selected</Button></span>
-            <span><Button fillMode="flat" disabled>Disabled</Button></span>
-
-            <span>primary</span>
-            <span><Button fillMode="flat" themeColor="primary">Normal</Button></span>
-            <span><Button fillMode="flat" themeColor="primary" hover >Hover</Button></span>
-            <span><Button fillMode="flat" themeColor="primary" focus>Focus</Button></span>
-            <span><Button fillMode="flat" themeColor="primary" active>Active</Button></span>
-            <span><Button fillMode="flat" themeColor="primary" selected >Selected</Button></span>
-            <span><Button fillMode="flat" themeColor="primary" disabled>Disabled</Button></span>
-
-            <span>secondary</span>
-            <span><Button fillMode="flat" themeColor="secondary">Normal</Button></span>
-            <span><Button fillMode="flat" themeColor="secondary" hover>Hover</Button></span>
-            <span><Button fillMode="flat" themeColor="secondary" focus>Focus</Button></span>
-            <span><Button fillMode="flat" themeColor="secondary" active>Active</Button></span>
-            <span><Button fillMode="flat" themeColor="secondary" selected>Selected</Button></span>
-            <span><Button fillMode="flat" themeColor="secondary" disabled>Disabled</Button></span>
-
-            <span>tertiary</span>
-            <span><Button fillMode="flat" themeColor="tertiary">Normal</Button></span>
-            <span><Button fillMode="flat" themeColor="tertiary" hover>Hover</Button></span>
-            <span><Button fillMode="flat" themeColor="tertiary" focus>Focus</Button></span>
-            <span><Button fillMode="flat" themeColor="tertiary" active>Active</Button></span>
-            <span><Button fillMode="flat" themeColor="tertiary" selected>Selected</Button></span>
-            <span><Button fillMode="flat" themeColor="tertiary" disabled>Disabled</Button></span>
-
-            <span>info</span>
-            <span><Button fillMode="flat" themeColor="info">Normal</Button></span>
-            <span><Button fillMode="flat" themeColor="info" hover>Hover</Button></span>
-            <span><Button fillMode="flat" themeColor="info" focus>Focus</Button></span>
-            <span><Button fillMode="flat" themeColor="info" active>Active</Button></span>
-            <span><Button fillMode="flat" themeColor="info" selected>Selected</Button></span>
-            <span><Button fillMode="flat" themeColor="info" disabled>Disabled</Button></span>
-
-            <span>success</span>
-            <span><Button fillMode="flat" themeColor="success">Normal</Button></span>
-            <span><Button fillMode="flat" themeColor="success" hover>Hover</Button></span>
-            <span><Button fillMode="flat" themeColor="success" focus>Focus</Button></span>
-            <span><Button fillMode="flat" themeColor="success" active>Active</Button></span>
-            <span><Button fillMode="flat" themeColor="success" selected>Selected</Button></span>
-            <span><Button fillMode="flat" themeColor="success" disabled>Disabled</Button></span>
-
-            <span>warning</span>
-            <span><Button fillMode="flat" themeColor="warning">Normal</Button></span>
-            <span><Button fillMode="flat" themeColor="warning" hover>Hover</Button></span>
-            <span><Button fillMode="flat" themeColor="warning" focus>Focus</Button></span>
-            <span><Button fillMode="flat" themeColor="warning" active>Active</Button></span>
-            <span><Button fillMode="flat" themeColor="warning" selected>Selected</Button></span>
-            <span><Button fillMode="flat" themeColor="warning" disabled>Disabled</Button></span>
-
-            <span>error</span>
-            <span><Button fillMode="flat" themeColor="error">Normal</Button></span>
-            <span><Button fillMode="flat" themeColor="error" hover>Hover</Button></span>
-            <span><Button fillMode="flat" themeColor="error" focus>Focus</Button></span>
-            <span><Button fillMode="flat" themeColor="error" active>Active</Button></span>
-            <span><Button fillMode="flat" themeColor="error" selected>Selected</Button></span>
-            <span><Button fillMode="flat" themeColor="error" disabled>Disabled</Button></span>
-
-            <span>dark</span>
-            <span><Button fillMode="flat" themeColor="dark">Normal</Button></span>
-            <span><Button fillMode="flat" themeColor="dark" hover>Hover</Button></span>
-            <span><Button fillMode="flat" themeColor="dark" focus>Focus</Button></span>
-            <span><Button fillMode="flat" themeColor="dark" active>Active</Button></span>
-            <span><Button fillMode="flat" themeColor="dark" selected>Selected</Button></span>
-            <span><Button fillMode="flat" themeColor="dark" disabled>Disabled</Button></span>
-
-            <span>light</span>
-            <span><Button fillMode="flat" themeColor="light">Normal</Button></span>
-            <span><Button fillMode="flat" themeColor="light" hover>Hover</Button></span>
-            <span><Button fillMode="flat" themeColor="light" focus>Focus</Button></span>
-            <span><Button fillMode="flat" themeColor="light" active>Active</Button></span>
-            <span><Button fillMode="flat" themeColor="light" selected>Selected</Button></span>
-            <span><Button fillMode="flat" themeColor="light" disabled>Disabled</Button></span>
-
-            <span>inverse</span>
-            <span><Button fillMode="flat" themeColor="inverse">Normal</Button></span>
-            <span><Button fillMode="flat" themeColor="inverse" hover>Hover</Button></span>
-            <span><Button fillMode="flat" themeColor="inverse" focus>Focus</Button></span>
-            <span><Button fillMode="flat" themeColor="inverse" active>Active</Button></span>
-            <span><Button fillMode="flat" themeColor="inverse" selected>Selected</Button></span>
-            <span><Button fillMode="flat" themeColor="inverse" disabled>Disabled</Button></span>
-
+            {[ ...Button.options.themeColor ].map((themeColor) => (
+                <>
+                    <span>{themeColor}</span>
+                    {[ 'normal' , ...Button.states ].map((state) => (
+                        <>
+                            <span>
+                                <TextButton fillMode="flat" themeColor={themeColor} {...{ [state]: true }}>{state}</TextButton>
+                            </span>
+                        </>
+                    ))}
+                </>
+            ))}
         </div>
-
     </>
 );