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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (55) hide show
  1. package/dist/cjs/button/tests/button-clear.js +5 -77
  2. package/dist/cjs/button/tests/button-flat.js +5 -77
  3. package/dist/cjs/button/tests/button-link.js +5 -77
  4. package/dist/cjs/button/tests/button-outline.js +5 -77
  5. package/dist/cjs/button/tests/button-rtl.js +39 -36
  6. package/dist/cjs/button/tests/button-size.js +8 -80
  7. package/dist/cjs/button/tests/button-solid.js +5 -77
  8. package/dist/cjs/button/tests/button.js +39 -36
  9. package/dist/cjs/gantt/tests/gantt-react.js +47 -47
  10. package/dist/cjs/gantt/tests/gantt-row-reordering.js +58 -58
  11. package/dist/cjs/gantt/tests/gantt.js +59 -59
  12. package/dist/cjs/treelist/tests/treelist-aggregate-react.js +20 -20
  13. package/dist/cjs/treelist/tests/treelist-aggregates.js +34 -34
  14. package/dist/cjs/treelist/tests/treelist-react.js +15 -15
  15. package/dist/cjs/treelist/tests/treelist-row-reordering.js +15 -15
  16. package/dist/cjs/treelist/tests/treelist.js +16 -16
  17. package/dist/esm/button/tests/button-clear.js +5 -77
  18. package/dist/esm/button/tests/button-flat.js +5 -77
  19. package/dist/esm/button/tests/button-link.js +5 -77
  20. package/dist/esm/button/tests/button-outline.js +5 -77
  21. package/dist/esm/button/tests/button-rtl.js +39 -36
  22. package/dist/esm/button/tests/button-size.js +8 -80
  23. package/dist/esm/button/tests/button-solid.js +5 -77
  24. package/dist/esm/button/tests/button.js +39 -36
  25. package/dist/esm/gantt/tests/gantt-react.js +47 -47
  26. package/dist/esm/gantt/tests/gantt-row-reordering.js +58 -58
  27. package/dist/esm/gantt/tests/gantt.js +59 -59
  28. package/dist/esm/treelist/tests/treelist-aggregate-react.js +20 -20
  29. package/dist/esm/treelist/tests/treelist-aggregates.js +34 -34
  30. package/dist/esm/treelist/tests/treelist-react.js +15 -15
  31. package/dist/esm/treelist/tests/treelist-row-reordering.js +15 -15
  32. package/dist/esm/treelist/tests/treelist.js +16 -16
  33. package/dist/types/button/templates/icon-button.d.ts +1 -2
  34. package/dist/types/button/templates/icon-text-button.d.ts +1 -2
  35. package/dist/types/button/templates/text-button.d.ts +1 -2
  36. package/package.json +2 -2
  37. package/src/button/templates/icon-button.tsx +2 -2
  38. package/src/button/templates/icon-text-button.tsx +2 -2
  39. package/src/button/templates/text-button.tsx +2 -2
  40. package/src/button/tests/button-clear.tsx +13 -92
  41. package/src/button/tests/button-flat.tsx +13 -92
  42. package/src/button/tests/button-link.tsx +13 -92
  43. package/src/button/tests/button-outline.tsx +13 -92
  44. package/src/button/tests/button-rtl.tsx +37 -38
  45. package/src/button/tests/button-size.tsx +13 -86
  46. package/src/button/tests/button-solid.tsx +13 -91
  47. package/src/button/tests/button.tsx +37 -40
  48. package/src/gantt/tests/gantt-react.tsx +54 -46
  49. package/src/gantt/tests/gantt-row-reordering.tsx +23 -23
  50. package/src/gantt/tests/gantt.tsx +45 -23
  51. package/src/treelist/tests/treelist-aggregate-react.tsx +31 -10
  52. package/src/treelist/tests/treelist-aggregates.tsx +41 -20
  53. package/src/treelist/tests/treelist-react.tsx +15 -15
  54. package/src/treelist/tests/treelist-row-reordering.tsx +5 -5
  55. package/src/treelist/tests/treelist.tsx +32 -6
package/src/button/tests/button-link.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { Button } from '../../button';
1
+ import { Button, TextButton } from '../../button';
2
2
 
3
3
 
4
4
  const styles = `
@@ -11,7 +11,6 @@ export default () => (
11
11
  <>
12
12
  <style>{styles}</style>
13
13
  <div id="test-area" className="k-d-grid">
14
-
15
14
  <span></span>
16
15
  <span>Normal</span>
17
16
  <span>Hover</span>
@@ -19,96 +18,18 @@ export default () => (
19
18
  <span>Active</span>
20
19
  <span>Selected</span>
21
20
  <span>Disabled</span>
22
-
23
- <span>base</span>
24
- <span><Button fillMode="link">Normal</Button></span>
25
- <span><Button fillMode="link" hover>Hover</Button></span>
26
- <span><Button fillMode="link" focus>Focus</Button></span>
27
- <span><Button fillMode="link" active>Active</Button></span>
28
- <span><Button fillMode="link" selected>Selected</Button></span>
29
- <span><Button fillMode="link" disabled>Disabled</Button></span>
30
-
31
- <span>primary</span>
32
- <span><Button fillMode="link" themeColor="primary">Normal</Button></span>
33
- <span><Button fillMode="link" themeColor="primary" hover >Hover</Button></span>
34
- <span><Button fillMode="link" themeColor="primary" focus>Focus</Button></span>
35
- <span><Button fillMode="link" themeColor="primary" active>Active</Button></span>
36
- <span><Button fillMode="link" themeColor="primary" selected >Selected</Button></span>
37
- <span><Button fillMode="link" themeColor="primary" disabled>Disabled</Button></span>
38
-
39
- <span>secondary</span>
40
- <span><Button fillMode="link" themeColor="secondary">Normal</Button></span>
41
- <span><Button fillMode="link" themeColor="secondary" hover>Hover</Button></span>
42
- <span><Button fillMode="link" themeColor="secondary" focus>Focus</Button></span>
43
- <span><Button fillMode="link" themeColor="secondary" active>Active</Button></span>
44
- <span><Button fillMode="link" themeColor="secondary" selected>Selected</Button></span>
45
- <span><Button fillMode="link" themeColor="secondary" disabled>Disabled</Button></span>
46
-
47
- <span>tertiary</span>
48
- <span><Button fillMode="link" themeColor="tertiary">Normal</Button></span>
49
- <span><Button fillMode="link" themeColor="tertiary" hover>Hover</Button></span>
50
- <span><Button fillMode="link" themeColor="tertiary" focus>Focus</Button></span>
51
- <span><Button fillMode="link" themeColor="tertiary" active>Active</Button></span>
52
- <span><Button fillMode="link" themeColor="tertiary" selected>Selected</Button></span>
53
- <span><Button fillMode="link" themeColor="tertiary" disabled>Disabled</Button></span>
54
-
55
- <span>info</span>
56
- <span><Button fillMode="link" themeColor="info">Normal</Button></span>
57
- <span><Button fillMode="link" themeColor="info" hover>Hover</Button></span>
58
- <span><Button fillMode="link" themeColor="info" focus>Focus</Button></span>
59
- <span><Button fillMode="link" themeColor="info" active>Active</Button></span>
60
- <span><Button fillMode="link" themeColor="info" selected>Selected</Button></span>
61
- <span><Button fillMode="link" themeColor="info" disabled>Disabled</Button></span>
62
-
63
- <span>success</span>
64
- <span><Button fillMode="link" themeColor="success">Normal</Button></span>
65
- <span><Button fillMode="link" themeColor="success" hover>Hover</Button></span>
66
- <span><Button fillMode="link" themeColor="success" focus>Focus</Button></span>
67
- <span><Button fillMode="link" themeColor="success" active>Active</Button></span>
68
- <span><Button fillMode="link" themeColor="success" selected>Selected</Button></span>
69
- <span><Button fillMode="link" themeColor="success" disabled>Disabled</Button></span>
70
-
71
- <span>warning</span>
72
- <span><Button fillMode="link" themeColor="warning">Normal</Button></span>
73
- <span><Button fillMode="link" themeColor="warning" hover>Hover</Button></span>
74
- <span><Button fillMode="link" themeColor="warning" focus>Focus</Button></span>
75
- <span><Button fillMode="link" themeColor="warning" active>Active</Button></span>
76
- <span><Button fillMode="link" themeColor="warning" selected>Selected</Button></span>
77
- <span><Button fillMode="link" themeColor="warning" disabled>Disabled</Button></span>
78
-
79
- <span>error</span>
80
- <span><Button fillMode="link" themeColor="error">Normal</Button></span>
81
- <span><Button fillMode="link" themeColor="error" hover>Hover</Button></span>
82
- <span><Button fillMode="link" themeColor="error" focus>Focus</Button></span>
83
- <span><Button fillMode="link" themeColor="error" active>Active</Button></span>
84
- <span><Button fillMode="link" themeColor="error" selected>Selected</Button></span>
85
- <span><Button fillMode="link" themeColor="error" disabled>Disabled</Button></span>
86
-
87
- <span>dark</span>
88
- <span><Button fillMode="link" themeColor="dark">Normal</Button></span>
89
- <span><Button fillMode="link" themeColor="dark" hover>Hover</Button></span>
90
- <span><Button fillMode="link" themeColor="dark" focus>Focus</Button></span>
91
- <span><Button fillMode="link" themeColor="dark" active>Active</Button></span>
92
- <span><Button fillMode="link" themeColor="dark" selected>Selected</Button></span>
93
- <span><Button fillMode="link" themeColor="dark" disabled>Disabled</Button></span>
94
-
95
- <span>light</span>
96
- <span><Button fillMode="link" themeColor="light">Normal</Button></span>
97
- <span><Button fillMode="link" themeColor="light" hover>Hover</Button></span>
98
- <span><Button fillMode="link" themeColor="light" focus>Focus</Button></span>
99
- <span><Button fillMode="link" themeColor="light" active>Active</Button></span>
100
- <span><Button fillMode="link" themeColor="light" selected>Selected</Button></span>
101
- <span><Button fillMode="link" themeColor="light" disabled>Disabled</Button></span>
102
-
103
- <span>inverse</span>
104
- <span><Button fillMode="link" themeColor="inverse">Normal</Button></span>
105
- <span><Button fillMode="link" themeColor="inverse" hover>Hover</Button></span>
106
- <span><Button fillMode="link" themeColor="inverse" focus>Focus</Button></span>
107
- <span><Button fillMode="link" themeColor="inverse" active>Active</Button></span>
108
- <span><Button fillMode="link" themeColor="inverse" selected>Selected</Button></span>
109
- <span><Button fillMode="link" themeColor="inverse" disabled>Disabled</Button></span>
110
-
21
+ {[ ...Button.options.themeColor ].map((themeColor) => (
22
+ <>
23
+ <span>{themeColor}</span>
24
+ {[ 'normal' , ...Button.states ].map((state) => (
25
+ <>
26
+ <span>
27
+ <TextButton fillMode="link" themeColor={themeColor} {...{ [state]: true }}>{state}</TextButton>
28
+ </span>
29
+ </>
30
+ ))}
31
+ </>
32
+ ))}
111
33
  </div>
112
-
113
34
  </>
114
35
  );
package/src/button/tests/button-outline.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { Button } from '../../button';
1
+ import { Button, TextButton } from '../../button';
2
2
 
3
3
  const styles = `
4
4
  #test-area {
@@ -10,7 +10,6 @@ export default () => (
10
10
  <>
11
11
  <style>{styles}</style>
12
12
  <div id="test-area" className="k-d-grid">
13
-
14
13
  <span></span>
15
14
  <span>Normal</span>
16
15
  <span>Hover</span>
@@ -18,96 +17,18 @@ export default () => (
18
17
  <span>Active</span>
19
18
  <span>Selected</span>
20
19
  <span>Disabled</span>
21
-
22
- <span>base</span>
23
- <span><Button fillMode="outline">Normal</Button></span>
24
- <span><Button fillMode="outline" hover>Hover</Button></span>
25
- <span><Button fillMode="outline" focus>Focus</Button></span>
26
- <span><Button fillMode="outline" active>Active</Button></span>
27
- <span><Button fillMode="outline" selected>Selected</Button></span>
28
- <span><Button fillMode="outline" disabled>Disabled</Button></span>
29
-
30
- <span>primary</span>
31
- <span><Button fillMode="outline" themeColor="primary">Normal</Button></span>
32
- <span><Button fillMode="outline" themeColor="primary" hover >Hover</Button></span>
33
- <span><Button fillMode="outline" themeColor="primary" focus>Focus</Button></span>
34
- <span><Button fillMode="outline" themeColor="primary" active>Active</Button></span>
35
- <span><Button fillMode="outline" themeColor="primary" selected >Selected</Button></span>
36
- <span><Button fillMode="outline" themeColor="primary" disabled>Disabled</Button></span>
37
-
38
- <span>secondary</span>
39
- <span><Button fillMode="outline" themeColor="secondary">Normal</Button></span>
40
- <span><Button fillMode="outline" themeColor="secondary" hover>Hover</Button></span>
41
- <span><Button fillMode="outline" themeColor="secondary" focus>Focus</Button></span>
42
- <span><Button fillMode="outline" themeColor="secondary" active>Active</Button></span>
43
- <span><Button fillMode="outline" themeColor="secondary" selected>Selected</Button></span>
44
- <span><Button fillMode="outline" themeColor="secondary" disabled>Disabled</Button></span>
45
-
46
- <span>tertiary</span>
47
- <span><Button fillMode="outline" themeColor="tertiary">Normal</Button></span>
48
- <span><Button fillMode="outline" themeColor="tertiary" hover>Hover</Button></span>
49
- <span><Button fillMode="outline" themeColor="tertiary" focus>Focus</Button></span>
50
- <span><Button fillMode="outline" themeColor="tertiary" active>Active</Button></span>
51
- <span><Button fillMode="outline" themeColor="tertiary" selected>Selected</Button></span>
52
- <span><Button fillMode="outline" themeColor="tertiary" disabled>Disabled</Button></span>
53
-
54
- <span>info</span>
55
- <span><Button fillMode="outline" themeColor="info">Normal</Button></span>
56
- <span><Button fillMode="outline" themeColor="info" hover>Hover</Button></span>
57
- <span><Button fillMode="outline" themeColor="info" focus>Focus</Button></span>
58
- <span><Button fillMode="outline" themeColor="info" active>Active</Button></span>
59
- <span><Button fillMode="outline" themeColor="info" selected>Selected</Button></span>
60
- <span><Button fillMode="outline" themeColor="info" disabled>Disabled</Button></span>
61
-
62
- <span>success</span>
63
- <span><Button fillMode="outline" themeColor="success">Normal</Button></span>
64
- <span><Button fillMode="outline" themeColor="success" hover>Hover</Button></span>
65
- <span><Button fillMode="outline" themeColor="success" focus>Focus</Button></span>
66
- <span><Button fillMode="outline" themeColor="success" active>Active</Button></span>
67
- <span><Button fillMode="outline" themeColor="success" selected>Selected</Button></span>
68
- <span><Button fillMode="outline" themeColor="success" disabled>Disabled</Button></span>
69
-
70
- <span>warning</span>
71
- <span><Button fillMode="outline" themeColor="warning">Normal</Button></span>
72
- <span><Button fillMode="outline" themeColor="warning" hover>Hover</Button></span>
73
- <span><Button fillMode="outline" themeColor="warning" focus>Focus</Button></span>
74
- <span><Button fillMode="outline" themeColor="warning" active>Active</Button></span>
75
- <span><Button fillMode="outline" themeColor="warning" selected>Selected</Button></span>
76
- <span><Button fillMode="outline" themeColor="warning" disabled>Disabled</Button></span>
77
-
78
- <span>error</span>
79
- <span><Button fillMode="outline" themeColor="error">Normal</Button></span>
80
- <span><Button fillMode="outline" themeColor="error" hover>Hover</Button></span>
81
- <span><Button fillMode="outline" themeColor="error" focus>Focus</Button></span>
82
- <span><Button fillMode="outline" themeColor="error" active>Active</Button></span>
83
- <span><Button fillMode="outline" themeColor="error" selected>Selected</Button></span>
84
- <span><Button fillMode="outline" themeColor="error" disabled>Disabled</Button></span>
85
-
86
- <span>dark</span>
87
- <span><Button fillMode="outline" themeColor="dark">Normal</Button></span>
88
- <span><Button fillMode="outline" themeColor="dark" hover>Hover</Button></span>
89
- <span><Button fillMode="outline" themeColor="dark" focus>Focus</Button></span>
90
- <span><Button fillMode="outline" themeColor="dark" active>Active</Button></span>
91
- <span><Button fillMode="outline" themeColor="dark" selected>Selected</Button></span>
92
- <span><Button fillMode="outline" themeColor="dark" disabled>Disabled</Button></span>
93
-
94
- <span>light</span>
95
- <span><Button fillMode="outline" themeColor="light">Normal</Button></span>
96
- <span><Button fillMode="outline" themeColor="light" hover>Hover</Button></span>
97
- <span><Button fillMode="outline" themeColor="light" focus>Focus</Button></span>
98
- <span><Button fillMode="outline" themeColor="light" active>Active</Button></span>
99
- <span><Button fillMode="outline" themeColor="light" selected>Selected</Button></span>
100
- <span><Button fillMode="outline" themeColor="light" disabled>Disabled</Button></span>
101
-
102
- <span>inverse</span>
103
- <span><Button fillMode="outline" themeColor="inverse">Normal</Button></span>
104
- <span><Button fillMode="outline" themeColor="inverse" hover>Hover</Button></span>
105
- <span><Button fillMode="outline" themeColor="inverse" focus>Focus</Button></span>
106
- <span><Button fillMode="outline" themeColor="inverse" active>Active</Button></span>
107
- <span><Button fillMode="outline" themeColor="inverse" selected>Selected</Button></span>
108
- <span><Button fillMode="outline" themeColor="inverse" disabled>Disabled</Button></span>
109
-
20
+ {[ ...Button.options.themeColor ].map((themeColor) => (
21
+ <>
22
+ <span>{themeColor}</span>
23
+ {[ 'normal' , ...Button.states ].map((state) => (
24
+ <>
25
+ <span>
26
+ <TextButton fillMode="outline" themeColor={themeColor} {...{ [state]: true }}>{state}</TextButton>
27
+ </span>
28
+ </>
29
+ ))}
30
+ </>
31
+ ))}
110
32
  </div>
111
-
112
33
  </>
113
34
  );
package/src/button/tests/button-rtl.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { Button } from '../../button';
1
+ import { IconButton, IconTextButton, TextButton } from '../../button';
2
2
 
3
3
  const styles = `
4
4
  #test-area {
@@ -20,53 +20,52 @@ export default () => (
20
20
  <span>Disabled</span>
21
21
 
22
22
  <span>base</span>
23
- <span dir="rtl"><Button>Normal</Button></span>
24
- <span dir="rtl"><Button hover={true}>Hover</Button></span>
25
- <span dir="rtl"><Button focus={true}>Focus</Button></span>
26
- <span dir="rtl"><Button active={true}>Active</Button></span>
27
- <span dir="rtl"><Button selected={true}>Selected</Button></span>
28
- <span dir="rtl"><Button disabled={true}>Disabled</Button></span>
23
+ <span dir="rtl"><TextButton>Normal</TextButton></span>
24
+ <span dir="rtl"><TextButton hover={true}>Hover</TextButton></span>
25
+ <span dir="rtl"><TextButton focus={true}>Focus</TextButton></span>
26
+ <span dir="rtl"><TextButton active={true}>Active</TextButton></span>
27
+ <span dir="rtl"><TextButton selected={true}>Selected</TextButton></span>
28
+ <span dir="rtl"><TextButton disabled={true}>Disabled</TextButton></span>
29
29
 
30
30
  <span>^ text + icon</span>
31
- <span dir="rtl"><Button icon="folder">Normal</Button></span>
32
- <span dir="rtl"><Button icon="folder" hover={true}>Hover</Button></span>
33
- <span dir="rtl"><Button icon="folder" focus={true}>Focus</Button></span>
34
- <span dir="rtl"><Button icon="folder" active={true}>Active</Button></span>
35
- <span dir="rtl"><Button icon="folder" selected={true}>Selected</Button></span>
36
- <span dir="rtl"><Button icon="folder" disabled={true}>Disabled</Button></span>
31
+ <span dir="rtl"><IconTextButton>Normal</IconTextButton></span>
32
+ <span dir="rtl"><IconTextButton hover={true}>Hover</IconTextButton></span>
33
+ <span dir="rtl"><IconTextButton focus={true}>Focus</IconTextButton></span>
34
+ <span dir="rtl"><IconTextButton active={true}>Active</IconTextButton></span>
35
+ <span dir="rtl"><IconTextButton selected={true}>Selected</IconTextButton></span>
36
+ <span dir="rtl"><IconTextButton disabled={true}>Disabled</IconTextButton></span>
37
37
 
38
38
  <span>^ icon</span>
39
- <span dir="rtl"><Button icon="folder"></Button></span>
40
- <span dir="rtl"><Button icon="folder" hover></Button></span>
41
- <span dir="rtl"><Button icon="folder" focus={true}></Button></span>
42
- <span dir="rtl"><Button icon="folder" active={true}></Button></span>
43
- <span dir="rtl"><Button icon="folder" selected={true}></Button></span>
44
- <span dir="rtl"><Button icon="folder" disabled={true}></Button></span>
39
+ <span dir="rtl"><IconButton></IconButton></span>
40
+ <span dir="rtl"><IconButton hover></IconButton></span>
41
+ <span dir="rtl"><IconButton focus={true}></IconButton></span>
42
+ <span dir="rtl"><IconButton active={true}></IconButton></span>
43
+ <span dir="rtl"><IconButton selected={true}></IconButton></span>
44
+ <span dir="rtl"><IconButton disabled={true}></IconButton></span>
45
45
 
46
46
  <span>primary</span>
47
- <span dir="rtl"><Button themeColor="primary">Normal</Button></span>
48
- <span dir="rtl"><Button themeColor="primary" hover={true}>Hover</Button></span>
49
- <span dir="rtl"><Button themeColor="primary" focus={true}>Focus</Button></span>
50
- <span dir="rtl"><Button themeColor="primary" active={true}>Active</Button></span>
51
- <span dir="rtl"><Button themeColor="primary" selected={true}>Selected</Button></span>
52
- <span dir="rtl"><Button themeColor="primary" disabled={true}>Disabled</Button></span>
47
+ <span dir="rtl"><TextButton themeColor="primary">Normal</TextButton></span>
48
+ <span dir="rtl"><TextButton themeColor="primary" hover={true}>Hover</TextButton></span>
49
+ <span dir="rtl"><TextButton themeColor="primary" focus={true}>Focus</TextButton></span>
50
+ <span dir="rtl"><TextButton themeColor="primary" active={true}>Active</TextButton></span>
51
+ <span dir="rtl"><TextButton themeColor="primary" selected={true}>Selected</TextButton></span>
52
+ <span dir="rtl"><TextButton themeColor="primary" disabled={true}>Disabled</TextButton></span>
53
53
 
54
54
  <span>^ text + icon</span>
55
- <span dir="rtl"><Button themeColor="primary" icon="folder">Normal</Button></span>
56
- <span dir="rtl"><Button themeColor="primary" icon="folder" hover={true}>Hover</Button></span>
57
- <span dir="rtl"><Button themeColor="primary" icon="folder" focus={true}>Focus</Button></span>
58
- <span dir="rtl"><Button themeColor="primary" icon="folder" active={true}>Active</Button></span>
59
- <span dir="rtl"><Button themeColor="primary" icon="folder" selected={true}>Selected</Button></span>
60
- <span dir="rtl"><Button themeColor="primary" icon="folder" disabled={true}>Disabled</Button></span>
55
+ <span dir="rtl"><IconTextButton themeColor="primary">Normal</IconTextButton></span>
56
+ <span dir="rtl"><IconTextButton themeColor="primary" hover={true}>Hover</IconTextButton></span>
57
+ <span dir="rtl"><IconTextButton themeColor="primary" focus={true}>Focus</IconTextButton></span>
58
+ <span dir="rtl"><IconTextButton themeColor="primary" active={true}>Active</IconTextButton></span>
59
+ <span dir="rtl"><IconTextButton themeColor="primary" selected={true}>Selected</IconTextButton></span>
60
+ <span dir="rtl"><IconTextButton themeColor="primary" disabled={true}>Disabled</IconTextButton></span>
61
61
 
62
62
  <span>^ icon</span>
63
- <span dir="rtl"><Button themeColor="primary" icon="folder"></Button></span>
64
- <span dir="rtl"><Button themeColor="primary" icon="folder" hover={true}></Button></span>
65
- <span dir="rtl"><Button themeColor="primary" icon="folder" focus={true}></Button></span>
66
- <span dir="rtl"><Button themeColor="primary" icon="folder" active={true}></Button></span>
67
- <span dir="rtl"><Button themeColor="primary" icon="folder" selected={true}></Button></span>
68
- <span dir="rtl"><Button themeColor="primary" icon="folder" disabled={true}></Button></span>
63
+ <span dir="rtl"><IconButton themeColor="primary"></IconButton></span>
64
+ <span dir="rtl"><IconButton themeColor="primary" hover></IconButton></span>
65
+ <span dir="rtl"><IconButton themeColor="primary" focus={true}></IconButton></span>
66
+ <span dir="rtl"><IconButton themeColor="primary" active={true}></IconButton></span>
67
+ <span dir="rtl"><IconButton themeColor="primary" selected={true}></IconButton></span>
68
+ <span dir="rtl"><IconButton themeColor="primary" disabled={true}></IconButton></span>
69
69
  </div>
70
-
71
70
  </>
72
71
  );
package/src/button/tests/button-size.tsx CHANGED
@@ -1,3 +1,4 @@
1
+ import { Button } from '../button.spec';
1
2
  import { TextButton } from '../templates/text-button';
2
3
  import { IconTextButton } from '../templates/icon-text-button';
3
4
  import { IconButton } from '../templates/icon-button';
@@ -23,92 +24,18 @@ export default () => (
23
24
  <span>small</span>
24
25
  <span>medium</span>
25
26
  <span>large</span>
26
-
27
- <span>null</span>
28
- <section>
29
- <TextButton size="small" rounded={null}></TextButton>
30
- <IconTextButton size="small" rounded={null} ></IconTextButton>
31
- <IconButton size="small" rounded={null} ></IconButton>
32
- </section>
33
- <section>
34
- <TextButton size="medium" rounded={null}></TextButton>
35
- <IconTextButton size="medium" rounded={null} ></IconTextButton>
36
- <IconButton size="medium" rounded={null} ></IconButton>
37
- </section>
38
- <section>
39
- <TextButton size="large" rounded={null}></TextButton>
40
- <IconTextButton size="large" rounded={null} ></IconTextButton>
41
- <IconButton size="large" rounded={null} ></IconButton>
42
- </section>
43
-
44
- <span>small</span>
45
- <section>
46
- <TextButton size="small" rounded="small"></TextButton>
47
- <IconTextButton size="small" rounded="small" ></IconTextButton>
48
- <IconButton size="small" rounded="small" ></IconButton>
49
- </section>
50
- <section>
51
- <TextButton size="medium" rounded="small"></TextButton>
52
- <IconTextButton size="medium" rounded="small" ></IconTextButton>
53
- <IconButton size="medium" rounded="small" ></IconButton>
54
- </section>
55
- <section>
56
- <TextButton size="large" rounded="small"></TextButton>
57
- <IconTextButton size="large" rounded="small" ></IconTextButton>
58
- <IconButton size="large" rounded="small" ></IconButton>
59
- </section>
60
-
61
- <span>medium</span>
62
- <section>
63
- <TextButton size="small" rounded="medium"></TextButton>
64
- <IconTextButton size="small" rounded="medium" ></IconTextButton>
65
- <IconButton size="small" rounded="medium" ></IconButton>
66
- </section>
67
- <section>
68
- <TextButton size="medium" rounded="medium"></TextButton>
69
- <IconTextButton size="medium" rounded="medium" ></IconTextButton>
70
- <IconButton size="medium" rounded="medium" ></IconButton>
71
- </section>
72
- <section>
73
- <TextButton size="large" rounded="medium"></TextButton>
74
- <IconTextButton size="large" rounded="medium" ></IconTextButton>
75
- <IconButton size="large" rounded="medium" ></IconButton>
76
- </section>
77
-
78
- <span>large</span>
79
- <section>
80
- <TextButton size="small" rounded="large"></TextButton>
81
- <IconTextButton size="small" rounded="large" ></IconTextButton>
82
- <IconButton size="small" rounded="large" ></IconButton>
83
- </section>
84
- <section>
85
- <TextButton size="medium" rounded="large"></TextButton>
86
- <IconTextButton size="medium" rounded="large" ></IconTextButton>
87
- <IconButton size="medium" rounded="large" ></IconButton>
88
- </section>
89
- <section>
90
- <TextButton size="large" rounded="large"></TextButton>
91
- <IconTextButton size="large" rounded="large" ></IconTextButton>
92
- <IconButton size="large" rounded="large" ></IconButton>
93
- </section>
94
-
95
- <span>full</span>
96
- <section>
97
- <TextButton size="small" rounded="full"></TextButton>
98
- <IconTextButton size="small" rounded="full" ></IconTextButton>
99
- <IconButton size="small" rounded="full" ></IconButton>
100
- </section>
101
- <section>
102
- <TextButton size="medium" rounded="full"></TextButton>
103
- <IconTextButton size="medium" rounded="full" ></IconTextButton>
104
- <IconButton size="medium" rounded="full" ></IconButton>
105
- </section>
106
- <section>
107
- <TextButton size="large" rounded="full"></TextButton>
108
- <IconTextButton size="large" rounded="full" ></IconTextButton>
109
- <IconButton size="large" rounded="full" ></IconButton>
110
- </section>
111
-
27
+ {[ null,...Button.options.rounded ].map((roundness) => (
28
+ <>
29
+ <span>{roundness || 'null'}</span>
30
+ {Button.options.size.map((size) => (
31
+ <section>
32
+ <TextButton size={size} rounded={roundness}></TextButton>
33
+ <IconTextButton size={size} rounded={roundness} ></IconTextButton>
34
+ <IconButton size={size} rounded={roundness} ></IconButton>
35
+ </section>
36
+ ))}
37
+ </>
38
+ ))}
112
39
  </div>
113
40
 
114
41
  </>
package/src/button/tests/button-solid.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { Button } from '../../button';
1
+ import { Button, TextButton } from '../../button';
2
2
 
3
3
 
4
4
  const styles = `
@@ -11,7 +11,6 @@ export default () => (
11
11
  <>
12
12
  <style>{styles}</style>
13
13
  <div id="test-area" className="k-d-grid">
14
-
15
14
  <span></span>
16
15
  <span>Normal</span>
17
16
  <span>Hover</span>
@@ -19,95 +18,18 @@ export default () => (
19
18
  <span>Active</span>
20
19
  <span>Selected</span>
21
20
  <span>Disabled</span>
22
-
23
- <span>base</span>
24
- <span><Button>Normal</Button></span>
25
- <span><Button hover>Hover</Button></span>
26
- <span><Button focus>Focus</Button></span>
27
- <span><Button active>Active</Button></span>
28
- <span><Button selected>Selected</Button></span>
29
- <span><Button disabled>Disabled</Button></span>
30
-
31
- <span>primary</span>
32
- <span><Button themeColor="primary">Normal</Button></span>
33
- <span><Button themeColor="primary" hover>Hover</Button></span>
34
- <span><Button themeColor="primary" focus>Focus</Button></span>
35
- <span><Button themeColor="primary" active>Active</Button></span>
36
- <span><Button themeColor="primary" selected>Selected</Button></span>
37
- <span><Button themeColor="primary" disabled>Disabled</Button></span>
38
-
39
- <span>secondary</span>
40
- <span><Button themeColor="secondary">Normal</Button></span>
41
- <span><Button themeColor="secondary" hover>Hover</Button></span>
42
- <span><Button themeColor="secondary" focus>Focus</Button></span>
43
- <span><Button themeColor="secondary" active>Active</Button></span>
44
- <span><Button themeColor="secondary" selected>Selected</Button></span>
45
- <span><Button themeColor="secondary" disabled>Disabled</Button></span>
46
-
47
- <span>tertiary</span>
48
- <span><Button themeColor="tertiary">Normal</Button></span>
49
- <span><Button themeColor="tertiary" hover>Hover</Button></span>
50
- <span><Button themeColor="tertiary" focus>Focus</Button></span>
51
- <span><Button themeColor="tertiary" active>Active</Button></span>
52
- <span><Button themeColor="tertiary" selected>Selected</Button></span>
53
- <span><Button themeColor="tertiary" disabled>Disabled</Button></span>
54
-
55
- <span>info</span>
56
- <span><Button themeColor="info">Normal</Button></span>
57
- <span><Button themeColor="info" hover>Hover</Button></span>
58
- <span><Button themeColor="info" focus>Focus</Button></span>
59
- <span><Button themeColor="info" active>Active</Button></span>
60
- <span><Button themeColor="info" selected>Selected</Button></span>
61
- <span><Button themeColor="info" disabled>Disabled</Button></span>
62
-
63
- <span>success</span>
64
- <span><Button themeColor="success">Normal</Button></span>
65
- <span><Button themeColor="success" hover>Hover</Button></span>
66
- <span><Button themeColor="success" focus>Focus</Button></span>
67
- <span><Button themeColor="success" active>Active</Button></span>
68
- <span><Button themeColor="success" selected>Selected</Button></span>
69
- <span><Button themeColor="success" disabled>Disabled</Button></span>
70
-
71
- <span>warning</span>
72
- <span><Button themeColor="warning">Normal</Button></span>
73
- <span><Button themeColor="warning" hover>Hover</Button></span>
74
- <span><Button themeColor="warning" focus>Focus</Button></span>
75
- <span><Button themeColor="warning" active>Active</Button></span>
76
- <span><Button themeColor="warning" selected>Selected</Button></span>
77
- <span><Button themeColor="warning" disabled>Disabled</Button></span>
78
-
79
- <span>error</span>
80
- <span><Button themeColor="error">Normal</Button></span>
81
- <span><Button themeColor="error" hover>Hover</Button></span>
82
- <span><Button themeColor="error" focus>Focus</Button></span>
83
- <span><Button themeColor="error" active>Active</Button></span>
84
- <span><Button themeColor="error" selected>Selected</Button></span>
85
- <span><Button themeColor="error" disabled>Disabled</Button></span>
86
-
87
- <span>dark</span>
88
- <span><Button themeColor="dark">Normal</Button></span>
89
- <span><Button themeColor="dark" hover>Hover</Button></span>
90
- <span><Button themeColor="dark" focus>Focus</Button></span>
91
- <span><Button themeColor="dark" active>Active</Button></span>
92
- <span><Button themeColor="dark" selected>Selected</Button></span>
93
- <span><Button themeColor="dark" disabled>Disabled</Button></span>
94
-
95
- <span>light</span>
96
- <span><Button themeColor="light">Normal</Button></span>
97
- <span><Button themeColor="light" hover>Hover</Button></span>
98
- <span><Button themeColor="light" focus>Focus</Button></span>
99
- <span><Button themeColor="light" active>Active</Button></span>
100
- <span><Button themeColor="light" selected>Selected</Button></span>
101
- <span><Button themeColor="light" disabled>Disabled</Button></span>
102
-
103
- <span>inverse</span>
104
- <span><Button themeColor="inverse">Normal</Button></span>
105
- <span><Button themeColor="inverse" hover>Hover</Button></span>
106
- <span><Button themeColor="inverse" focus>Focus</Button></span>
107
- <span><Button themeColor="inverse" active>Active</Button></span>
108
- <span><Button themeColor="inverse" selected>Selected</Button></span>
109
- <span><Button themeColor="inverse" disabled>Disabled</Button></span>
110
-
21
+ {[ ...Button.options.themeColor ].map((themeColor) => (
22
+ <>
23
+ <span>{themeColor}</span>
24
+ {[ 'normal' , ...Button.states ].map((state) => (
25
+ <>
26
+ <span>
27
+ <TextButton fillMode="solid" themeColor={themeColor} {...{ [state]: true }}>{state}</TextButton>
28
+ </span>
29
+ </>
30
+ ))}
31
+ </>
32
+ ))}
111
33
  </div>
112
34
 
113
35
  </>