@progress/kendo-themes-html 11.2.0-dev.2 → 11.2.0-dev.3
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.
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-themes-html",
|
|
3
3
|
"description": "A collection of HTML helpers used for developing Kendo UI themes",
|
|
4
|
-
"version": "11.2.0-dev.
|
|
4
|
+
"version": "11.2.0-dev.3",
|
|
5
5
|
"author": "Progress",
|
|
6
6
|
"license": "Apache-2.0",
|
|
7
7
|
"keywords": [
|
|
@@ -57,5 +57,5 @@
|
|
|
57
57
|
"react": "^19.0.0",
|
|
58
58
|
"react-dom": "^19.0.0"
|
|
59
59
|
},
|
|
60
|
-
"gitHead": "
|
|
60
|
+
"gitHead": "95216cf9cd78a4decf243407437fc887729423f7"
|
|
61
61
|
}
|
|
@@ -3,9 +3,8 @@ import { SplitButton } from '../../split-button';
|
|
|
3
3
|
import { MenuButton } from '../../menu-button';
|
|
4
4
|
import { DropdownList } from '../../dropdownlist';
|
|
5
5
|
import { Combobox } from '../../combobox';
|
|
6
|
-
import { ToolbarNormal
|
|
6
|
+
import { ToolbarNormal } from '../../toolbar';
|
|
7
7
|
import { ButtonGroup } from '../../button-group';
|
|
8
|
-
import { Badge } from '../../badge';
|
|
9
8
|
|
|
10
9
|
export default () =>(
|
|
11
10
|
<>
|
|
@@ -86,25 +85,6 @@ export default () =>(
|
|
|
86
85
|
</div>
|
|
87
86
|
</ToolbarNormal>
|
|
88
87
|
</section>
|
|
89
|
-
|
|
90
|
-
<span>Button with Badge in Scrollable Toolbar</span>
|
|
91
|
-
<section>
|
|
92
|
-
<ToolbarScrollable children={[
|
|
93
|
-
<div className="k-badge-container">
|
|
94
|
-
<Button icon="filter">Filter</Button>
|
|
95
|
-
<Badge position="edge" rounded="full" align="top-end" size="medium" cutoutBorder></Badge>
|
|
96
|
-
</div>,
|
|
97
|
-
<div className="k-badge-container">
|
|
98
|
-
<Button icon="arrows-swap">Sort</Button>
|
|
99
|
-
<Badge position="edge" rounded="full" align="top-end" size="medium" cutoutBorder></Badge>
|
|
100
|
-
</div>,
|
|
101
|
-
<div className="k-badge-container">
|
|
102
|
-
<Button icon="group">Group</Button>
|
|
103
|
-
<Badge position="edge" rounded="full" align="top-end" size="medium" cutoutBorder></Badge>
|
|
104
|
-
</div>
|
|
105
|
-
]}/>
|
|
106
|
-
</section>
|
|
107
|
-
|
|
108
88
|
</div>
|
|
109
89
|
</>
|
|
110
90
|
);
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { Button } from '../../button';
|
|
2
|
+
import { ToolbarScrollable } from '..';
|
|
3
|
+
import { ButtonGroup } from '../../button-group';
|
|
4
|
+
import { Badge } from '../../badge';
|
|
5
|
+
import { Textbox } from '../../textbox';
|
|
6
|
+
|
|
7
|
+
import { ToolbarSeparator, Toolbar } from '..';
|
|
8
|
+
|
|
9
|
+
const style = `
|
|
10
|
+
#test-area {
|
|
11
|
+
max-width: 1240px;
|
|
12
|
+
}
|
|
13
|
+
`;
|
|
14
|
+
|
|
15
|
+
export default () =>(
|
|
16
|
+
<>
|
|
17
|
+
<style>{style}</style>
|
|
18
|
+
<div id="test-area" className="k-d-grid">
|
|
19
|
+
<span>Focused Buttons and Buttons with Badge in Scrollable Toolbar</span>
|
|
20
|
+
|
|
21
|
+
{ Toolbar.options.size.map((size) => (
|
|
22
|
+
<>
|
|
23
|
+
<span className="k-colspan-all k-col-span-full">{size}</span>
|
|
24
|
+
<section className="k-colspan-all k-col-span-full">
|
|
25
|
+
<ToolbarScrollable size={size}>
|
|
26
|
+
<Button size={size} icon="bold" focus></Button>
|
|
27
|
+
<Button size={size} focus>Button</Button>
|
|
28
|
+
<ToolbarSeparator></ToolbarSeparator>
|
|
29
|
+
<ButtonGroup>
|
|
30
|
+
<Button className="k-group-start" size={size} icon="align-left">Left</Button>
|
|
31
|
+
<Button focus size={size} icon="align-center">Center</Button>
|
|
32
|
+
<Button className="k-group-end" size={size} icon="align-right">Right</Button>
|
|
33
|
+
</ButtonGroup>
|
|
34
|
+
<ToolbarSeparator></ToolbarSeparator>
|
|
35
|
+
<Button size={size} themeColor="primary">Primary</Button>
|
|
36
|
+
<Button size={size} themeColor="primary" focus>Focus</Button>
|
|
37
|
+
<ToolbarSeparator></ToolbarSeparator>
|
|
38
|
+
<div className="k-badge-container">
|
|
39
|
+
<Button icon="filter" size={size}>Filter</Button>
|
|
40
|
+
<Badge position="edge" rounded="full" align="top-end" size={size} cutoutBorder></Badge>
|
|
41
|
+
</div>
|
|
42
|
+
<ToolbarSeparator></ToolbarSeparator>
|
|
43
|
+
<Textbox placeholder="placeholder..." size={size} focus />
|
|
44
|
+
</ToolbarScrollable>
|
|
45
|
+
</section>
|
|
46
|
+
</>
|
|
47
|
+
))}
|
|
48
|
+
|
|
49
|
+
</div>
|
|
50
|
+
</>
|
|
51
|
+
);
|