@progress/kendo-themes-html 14.6.1 → 14.7.0-dev.1
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.
|
@@ -15,7 +15,7 @@ export type KendoSegmentedControlButtonState = {
|
|
|
15
15
|
* @aria {role="button"} Each button must have the appropriate button role.
|
|
16
16
|
* @aria {aria-pressed="true"} Only the selected button within the group will have this attribute set to true.
|
|
17
17
|
* @aria {aria-disabled="true"} Indicates that the button is disabled and cannot be interacted with.
|
|
18
|
-
* @aria {tabindex} Roving tabindex: the
|
|
18
|
+
* @aria {tabindex} Roving tabindex: the focused button has tabindex="0"; all others have tabindex="-1".
|
|
19
19
|
* @ux {Selection} Clicking this button selects it and automatically deselects the others.
|
|
20
20
|
* @ux {Disabled state} When disabled, this segment cannot be activated.
|
|
21
21
|
*/
|
package/package.json
CHANGED
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import { Label } from '..';
|
|
2
|
+
import { TextboxNormal } from '../../textbox';
|
|
3
|
+
|
|
4
|
+
const styles = `
|
|
5
|
+
#test-area {
|
|
6
|
+
max-width: 600px;
|
|
7
|
+
}
|
|
8
|
+
`;
|
|
9
|
+
|
|
10
|
+
export default () =>(
|
|
11
|
+
<>
|
|
12
|
+
<style>{styles}</style>
|
|
13
|
+
<div id="test-area" className="k-d-grid k-grid-cols-2">
|
|
14
|
+
<span>Label</span>
|
|
15
|
+
<span>Label RTL</span>
|
|
16
|
+
<div>
|
|
17
|
+
<Label>Label</Label>
|
|
18
|
+
</div>
|
|
19
|
+
<div dir="rtl">
|
|
20
|
+
<Label>Label</Label>
|
|
21
|
+
</div>
|
|
22
|
+
|
|
23
|
+
<div>
|
|
24
|
+
<Label optional>Optional label</Label>
|
|
25
|
+
</div>
|
|
26
|
+
<div dir="rtl">
|
|
27
|
+
<Label optional>Optional label</Label>
|
|
28
|
+
</div>
|
|
29
|
+
|
|
30
|
+
<div>
|
|
31
|
+
<Label info="(field info)">Label with info</Label>
|
|
32
|
+
</div>
|
|
33
|
+
<div dir="rtl">
|
|
34
|
+
<Label info="(field info)">Label with info</Label>
|
|
35
|
+
</div>
|
|
36
|
+
{Label.states.map((state) => (
|
|
37
|
+
<>
|
|
38
|
+
<div>
|
|
39
|
+
<Label optional { ...{ [state]: true }}>Label {state}</Label>
|
|
40
|
+
</div>
|
|
41
|
+
<div dir="rtl">
|
|
42
|
+
<Label optional { ...{ [state]: true }}>Label {state}</Label>
|
|
43
|
+
</div>
|
|
44
|
+
</>
|
|
45
|
+
))}
|
|
46
|
+
<div className="label-field">
|
|
47
|
+
<Label optional>Label</Label>
|
|
48
|
+
<TextboxNormal placeholder="Placeholder" />
|
|
49
|
+
</div>
|
|
50
|
+
<div className="label-field" dir="rtl">
|
|
51
|
+
<Label optional>Label</Label>
|
|
52
|
+
<TextboxNormal placeholder="Placeholder" />
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
55
|
+
</>
|
|
56
|
+
);
|
|
@@ -31,7 +31,7 @@ const defaultOptions = {};
|
|
|
31
31
|
* @aria {role="button"} Each button must have the appropriate button role.
|
|
32
32
|
* @aria {aria-pressed="true"} Only the selected button within the group will have this attribute set to true.
|
|
33
33
|
* @aria {aria-disabled="true"} Indicates that the button is disabled and cannot be interacted with.
|
|
34
|
-
* @aria {tabindex} Roving tabindex: the
|
|
34
|
+
* @aria {tabindex} Roving tabindex: the focused button has tabindex="0"; all others have tabindex="-1".
|
|
35
35
|
* @ux {Selection} Clicking this button selects it and automatically deselects the others.
|
|
36
36
|
* @ux {Disabled state} When disabled, this segment cannot be activated.
|
|
37
37
|
*/
|