@progress/kendo-themes-html 14.5.1-dev.2 → 14.5.1-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.
Files changed (46) hide show
  1. package/dist/cjs/agent-response/agent-step.js +1 -1
  2. package/dist/cjs/agent-response/chain-of-thought.spec.js +1 -1
  3. package/dist/cjs/agent-response/reasoning.spec.js +1 -1
  4. package/dist/cjs/agent-response/templates/chain-of-thought-expanded.js +1 -1
  5. package/dist/cjs/agent-response/templates/chain-of-thought-normal.js +1 -1
  6. package/dist/cjs/agent-response/templates/reasoning-expanded.js +1 -1
  7. package/dist/cjs/agent-response/templates/reasoning-normal.js +1 -1
  8. package/dist/cjs/agent-response/templates/tool-call-expanded.js +1 -1
  9. package/dist/cjs/agent-response/templates/tool-call-normal.js +1 -1
  10. package/dist/cjs/agent-response/thought.spec.js +1 -1
  11. package/dist/cjs/agent-response/tool-call.spec.js +1 -1
  12. package/dist/cjs/badge/badge.spec.js +1 -1
  13. package/dist/cjs/badge/demos/badge.js +1 -1
  14. package/dist/cjs/badge/templates/badge-normal.js +1 -1
  15. package/dist/cjs/badge/templates/badge-positioned.js +1 -0
  16. package/dist/cjs/badge/templates/icon-badge.js +1 -1
  17. package/dist/cjs/index.js +8 -8
  18. package/dist/esm/agent-response/agent-step.mjs +1 -1
  19. package/dist/esm/agent-response/chain-of-thought.spec.mjs +1 -1
  20. package/dist/esm/agent-response/reasoning.spec.mjs +1 -1
  21. package/dist/esm/agent-response/templates/chain-of-thought-expanded.mjs +1 -1
  22. package/dist/esm/agent-response/templates/chain-of-thought-normal.mjs +1 -1
  23. package/dist/esm/agent-response/templates/reasoning-expanded.mjs +1 -1
  24. package/dist/esm/agent-response/templates/reasoning-normal.mjs +1 -1
  25. package/dist/esm/agent-response/templates/tool-call-expanded.mjs +1 -1
  26. package/dist/esm/agent-response/templates/tool-call-normal.mjs +1 -1
  27. package/dist/esm/agent-response/thought.spec.mjs +1 -1
  28. package/dist/esm/agent-response/tool-call.spec.mjs +1 -1
  29. package/dist/esm/badge/badge.spec.mjs +1 -1
  30. package/dist/esm/badge/demos/badge.mjs +1 -1
  31. package/dist/esm/badge/templates/badge-normal.mjs +1 -1
  32. package/dist/esm/badge/templates/badge-positioned.mjs +1 -0
  33. package/dist/esm/badge/templates/icon-badge.mjs +1 -1
  34. package/dist/esm/index.mjs +8 -8
  35. package/dist/types/badge/index.d.ts +1 -0
  36. package/dist/types/badge/templates/badge-normal.d.ts +3 -1
  37. package/dist/types/badge/templates/badge-positioned.d.ts +6 -0
  38. package/package.json +1 -1
  39. package/src/badge/badge.spec.tsx +4 -2
  40. package/src/badge/index.ts +1 -0
  41. package/src/badge/templates/badge-normal.tsx +4 -2
  42. package/src/badge/templates/badge-positioned.tsx +8 -0
  43. package/src/badge/tests/badge-cutout-border.tsx +11 -11
  44. package/src/badge/tests/badge-position-outline.tsx +25 -25
  45. package/src/badge/tests/badge-position-solid.tsx +25 -25
  46. package/src/badge/tests/badge-position.tsx +25 -25
package/dist/types/badge/index.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  export * from './badge.spec';
2
2
  export * from './templates/badge-normal';
3
+ export * from './templates/badge-positioned';
3
4
  export * from './templates/icon-badge';
4
5
  export * from './demos/badge';
package/dist/types/badge/templates/badge-normal.d.ts CHANGED
@@ -1 +1,3 @@
1
- export declare const BadgeNormal: (props: any) => import("react/jsx-runtime").JSX.Element;
1
+ import { KendoBadgeProps } from "../badge.spec";
2
+ export type BadgeNormalProps = Omit<KendoBadgeProps, 'position' | 'align'> & React.HTMLAttributes<HTMLSpanElement>;
3
+ export declare const BadgeNormal: (props: BadgeNormalProps) => import("react/jsx-runtime").JSX.Element;
package/dist/types/badge/templates/badge-positioned.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import { KendoBadgeProps } from "../badge.spec";
2
+ export type BadgePositionedProps = Omit<KendoBadgeProps, 'position' | 'align'> & {
3
+ position: NonNullable<KendoBadgeProps['position']>;
4
+ align: NonNullable<KendoBadgeProps['align']>;
5
+ } & React.HTMLAttributes<HTMLSpanElement>;
6
+ export declare const BadgePositioned: (props: BadgePositionedProps) => import("react/jsx-runtime").JSX.Element;
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": "14.5.1-dev.2",
4
+ "version": "14.5.1-dev.3",
5
5
  "author": "Progress",
6
6
  "license": "Apache-2.0",
7
7
  "keywords": [
package/src/badge/badge.spec.tsx CHANGED
@@ -39,6 +39,8 @@ export type KendoBadgeProps = KendoBadgeOptions & {
39
39
 
40
40
  const defaultOptions = {
41
41
  cutoutBorder: false,
42
+ position: null,
43
+ align: null,
42
44
  };
43
45
 
44
46
  /**
@@ -56,8 +58,8 @@ export const Badge: KendoComponent<KendoBadgeProps & React.HTMLAttributes<HTMLSp
56
58
  themeColor,
57
59
  cutoutBorder = defaultOptions.cutoutBorder,
58
60
  rounded,
59
- position,
60
- align,
61
+ position = defaultOptions.position,
62
+ align = defaultOptions.align,
61
63
  ...other
62
64
  } = props;
63
65
 
package/src/badge/index.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  export * from './badge.spec';
2
2
  export * from './templates/badge-normal';
3
+ export * from './templates/badge-positioned';
3
4
  export * from './templates/icon-badge';
4
5
  export * from './demos/badge';
package/src/badge/templates/badge-normal.tsx CHANGED
@@ -1,3 +1,5 @@
1
- import { Badge } from "..";
1
+ import { Badge, KendoBadgeProps } from "../badge.spec";
2
2
 
3
- export const BadgeNormal = (props) => <Badge {...props}/>;
3
+ export type BadgeNormalProps = Omit<KendoBadgeProps, 'position' | 'align'> & React.HTMLAttributes<HTMLSpanElement>;
4
+
5
+ export const BadgeNormal = (props: BadgeNormalProps) => <Badge {...props} />;
package/src/badge/templates/badge-positioned.tsx ADDED
@@ -0,0 +1,8 @@
1
+ import { Badge, KendoBadgeProps } from "../badge.spec";
2
+
3
+ export type BadgePositionedProps = Omit<KendoBadgeProps, 'position' | 'align'> & {
4
+ position: NonNullable<KendoBadgeProps['position']>;
5
+ align: NonNullable<KendoBadgeProps['align']>;
6
+ } & React.HTMLAttributes<HTMLSpanElement>;
7
+
8
+ export const BadgePositioned = (props: BadgePositionedProps) => <Badge {...props} />;
package/src/badge/tests/badge-cutout-border.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { Badge, BadgeNormal } from '..';
1
+ import { Badge, BadgeNormal, BadgePositioned } from '..';
2
2
 
3
3
 
4
4
  const styles = `
@@ -53,36 +53,36 @@ export default () =>(
53
53
 
54
54
  <span>inside</span>
55
55
  <div className="k-badge-container">
56
- <BadgeNormal fillMode={fillMode} rounded="none" position="inside" align="top-start" cutoutBorder>Rect</BadgeNormal>
56
+ <BadgePositioned fillMode={fillMode} rounded="none" position="inside" align="top-start" cutoutBorder>Rect</BadgePositioned>
57
57
  </div>
58
58
  <div className="k-badge-container">
59
- <BadgeNormal fillMode={fillMode} rounded="medium" position="inside" align="top-start" cutoutBorder>Round</BadgeNormal>
59
+ <BadgePositioned fillMode={fillMode} rounded="medium" position="inside" align="top-start" cutoutBorder>Round</BadgePositioned>
60
60
  </div>
61
61
  <div className="k-badge-container">
62
- <BadgeNormal fillMode={fillMode} rounded="full" position="inside" align="top-start" cutoutBorder>Pill</BadgeNormal>
62
+ <BadgePositioned fillMode={fillMode} rounded="full" position="inside" align="top-start" cutoutBorder>Pill</BadgePositioned>
63
63
  </div>
64
64
  <div className="k-badge-container">
65
- <BadgeNormal fillMode={fillMode} rounded="full" position="inside" align="top-start" cutoutBorder>1</BadgeNormal>
65
+ <BadgePositioned fillMode={fillMode} rounded="full" position="inside" align="top-start" cutoutBorder>1</BadgePositioned>
66
66
  </div>
67
67
  <div className="k-badge-container">
68
- <BadgeNormal fillMode={fillMode} rounded="full" position="inside" align="top-start" cutoutBorder></BadgeNormal>
68
+ <BadgePositioned fillMode={fillMode} rounded="full" position="inside" align="top-start" cutoutBorder></BadgePositioned>
69
69
  </div>
70
70
 
71
71
  <span>edge</span>
72
72
  <div className="k-badge-container">
73
- <BadgeNormal fillMode={fillMode} rounded="none" position="edge" align="top-start" cutoutBorder>Rect</BadgeNormal>
73
+ <BadgePositioned fillMode={fillMode} rounded="none" position="edge" align="top-start" cutoutBorder>Rect</BadgePositioned>
74
74
  </div>
75
75
  <div className="k-badge-container">
76
- <BadgeNormal fillMode={fillMode} rounded="medium" position="edge" align="top-start" cutoutBorder>Round</BadgeNormal>
76
+ <BadgePositioned fillMode={fillMode} rounded="medium" position="edge" align="top-start" cutoutBorder>Round</BadgePositioned>
77
77
  </div>
78
78
  <div className="k-badge-container">
79
- <BadgeNormal fillMode={fillMode} rounded="full" position="edge" align="top-start" cutoutBorder>Pill</BadgeNormal>
79
+ <BadgePositioned fillMode={fillMode} rounded="full" position="edge" align="top-start" cutoutBorder>Pill</BadgePositioned>
80
80
  </div>
81
81
  <div className="k-badge-container">
82
- <BadgeNormal fillMode={fillMode} rounded="full" position="edge" align="top-start" cutoutBorder>1</BadgeNormal>
82
+ <BadgePositioned fillMode={fillMode} rounded="full" position="edge" align="top-start" cutoutBorder>1</BadgePositioned>
83
83
  </div>
84
84
  <div className="k-badge-container">
85
- <BadgeNormal fillMode={fillMode} rounded="full" position="edge" align="top-start" cutoutBorder></BadgeNormal>
85
+ <BadgePositioned fillMode={fillMode} rounded="full" position="edge" align="top-start" cutoutBorder></BadgePositioned>
86
86
  </div>
87
87
  </>
88
88
  ))}
package/src/badge/tests/badge-position-outline.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { BadgeNormal } from '..';
1
+ import { BadgeNormal, BadgePositioned } from '..';
2
2
 
3
3
 
4
4
  const styles = `
@@ -72,31 +72,31 @@ export default () =>(
72
72
 
73
73
  <span>Inside</span>
74
74
  <div className="k-badge-container">
75
- <BadgeNormal fillMode="outline" rounded="medium" position="inside" align="top-start">Rect</BadgeNormal>
75
+ <BadgePositioned fillMode="outline" rounded="medium" position="inside" align="top-start">Rect</BadgePositioned>
76
76
  </div>
77
77
  <div className="k-badge-container">
78
- <BadgeNormal fillMode="outline" rounded="medium" position="inside" align="top-end">Rect</BadgeNormal>
78
+ <BadgePositioned fillMode="outline" rounded="medium" position="inside" align="top-end">Rect</BadgePositioned>
79
79
  </div>
80
80
  <div className="k-badge-container">
81
- <BadgeNormal fillMode="outline" rounded="medium" position="inside" align="bottom-start">Rect</BadgeNormal>
81
+ <BadgePositioned fillMode="outline" rounded="medium" position="inside" align="bottom-start">Rect</BadgePositioned>
82
82
  </div>
83
83
  <div className="k-badge-container">
84
- <BadgeNormal fillMode="outline" rounded="medium" position="inside" align="bottom-end">Rect</BadgeNormal>
84
+ <BadgePositioned fillMode="outline" rounded="medium" position="inside" align="bottom-end">Rect</BadgePositioned>
85
85
  </div>
86
86
  <span></span>
87
87
 
88
88
  <span>Edge</span>
89
89
  <div className="k-badge-container">
90
- <BadgeNormal fillMode="outline" rounded="medium" position="edge" align="top-start">Rect</BadgeNormal>
90
+ <BadgePositioned fillMode="outline" rounded="medium" position="edge" align="top-start">Rect</BadgePositioned>
91
91
  </div>
92
92
  <div className="k-badge-container">
93
- <BadgeNormal fillMode="outline" rounded="medium" position="edge" align="top-end">Rect</BadgeNormal>
93
+ <BadgePositioned fillMode="outline" rounded="medium" position="edge" align="top-end">Rect</BadgePositioned>
94
94
  </div>
95
95
  <div className="k-badge-container">
96
- <BadgeNormal fillMode="outline" rounded="medium" position="edge" align="bottom-start">Rect</BadgeNormal>
96
+ <BadgePositioned fillMode="outline" rounded="medium" position="edge" align="bottom-start">Rect</BadgePositioned>
97
97
  </div>
98
98
  <div className="k-badge-container">
99
- <BadgeNormal fillMode="outline" rounded="medium" position="edge" align="bottom-end">Rect</BadgeNormal>
99
+ <BadgePositioned fillMode="outline" rounded="medium" position="edge" align="bottom-end">Rect</BadgePositioned>
100
100
  </div>
101
101
  <span></span>
102
102
 
@@ -104,16 +104,16 @@ export default () =>(
104
104
 
105
105
  <span>Outside</span>
106
106
  <div className="k-badge-container">
107
- <BadgeNormal fillMode="outline" rounded="medium" position="outside" align="top-start">Rect</BadgeNormal>
107
+ <BadgePositioned fillMode="outline" rounded="medium" position="outside" align="top-start">Rect</BadgePositioned>
108
108
  </div>
109
109
  <div className="k-badge-container">
110
- <BadgeNormal fillMode="outline" rounded="medium" position="outside" align="top-end">Rect</BadgeNormal>
110
+ <BadgePositioned fillMode="outline" rounded="medium" position="outside" align="top-end">Rect</BadgePositioned>
111
111
  </div>
112
112
  <div className="k-badge-container">
113
- <BadgeNormal fillMode="outline" rounded="medium" position="outside" align="bottom-start">Rect</BadgeNormal>
113
+ <BadgePositioned fillMode="outline" rounded="medium" position="outside" align="bottom-start">Rect</BadgePositioned>
114
114
  </div>
115
115
  <div className="k-badge-container">
116
- <BadgeNormal fillMode="outline" rounded="medium" position="outside" align="bottom-end">Rect</BadgeNormal>
116
+ <BadgePositioned fillMode="outline" rounded="medium" position="outside" align="bottom-end">Rect</BadgePositioned>
117
117
  </div>
118
118
  <span></span>
119
119
 
@@ -121,31 +121,31 @@ export default () =>(
121
121
 
122
122
  <span>Inside RTL</span>
123
123
  <div className="k-badge-container k-rtl">
124
- <BadgeNormal fillMode="outline" rounded="medium" position="inside" align="top-start">Rect</BadgeNormal>
124
+ <BadgePositioned fillMode="outline" rounded="medium" position="inside" align="top-start">Rect</BadgePositioned>
125
125
  </div>
126
126
  <div className="k-badge-container k-rtl">
127
- <BadgeNormal fillMode="outline" rounded="medium" position="inside" align="top-end">Rect</BadgeNormal>
127
+ <BadgePositioned fillMode="outline" rounded="medium" position="inside" align="top-end">Rect</BadgePositioned>
128
128
  </div>
129
129
  <div className="k-badge-container k-rtl">
130
- <BadgeNormal fillMode="outline" rounded="medium" position="inside" align="bottom-start">Rect</BadgeNormal>
130
+ <BadgePositioned fillMode="outline" rounded="medium" position="inside" align="bottom-start">Rect</BadgePositioned>
131
131
  </div>
132
132
  <div className="k-badge-container k-rtl">
133
- <BadgeNormal fillMode="outline" rounded="medium" position="inside" align="bottom-end">Rect</BadgeNormal>
133
+ <BadgePositioned fillMode="outline" rounded="medium" position="inside" align="bottom-end">Rect</BadgePositioned>
134
134
  </div>
135
135
  <span></span>
136
136
 
137
137
  <span>Edge RTL</span>
138
138
  <div className="k-badge-container k-rtl">
139
- <BadgeNormal fillMode="outline" rounded="medium" position="edge" align="top-start">Rect</BadgeNormal>
139
+ <BadgePositioned fillMode="outline" rounded="medium" position="edge" align="top-start">Rect</BadgePositioned>
140
140
  </div>
141
141
  <div className="k-badge-container k-rtl">
142
- <BadgeNormal fillMode="outline" rounded="medium" position="edge" align="top-end">Rect</BadgeNormal>
142
+ <BadgePositioned fillMode="outline" rounded="medium" position="edge" align="top-end">Rect</BadgePositioned>
143
143
  </div>
144
144
  <div className="k-badge-container k-rtl">
145
- <BadgeNormal fillMode="outline" rounded="medium" position="edge" align="bottom-start">Rect</BadgeNormal>
145
+ <BadgePositioned fillMode="outline" rounded="medium" position="edge" align="bottom-start">Rect</BadgePositioned>
146
146
  </div>
147
147
  <div className="k-badge-container k-rtl">
148
- <BadgeNormal fillMode="outline" rounded="medium" position="edge" align="bottom-end">Rect</BadgeNormal>
148
+ <BadgePositioned fillMode="outline" rounded="medium" position="edge" align="bottom-end">Rect</BadgePositioned>
149
149
  </div>
150
150
  <span></span>
151
151
 
@@ -153,16 +153,16 @@ export default () =>(
153
153
 
154
154
  <span>Outside RTL</span>
155
155
  <div className="k-badge-container k-rtl">
156
- <BadgeNormal fillMode="outline" rounded="medium" position="outside" align="top-start">Rect</BadgeNormal>
156
+ <BadgePositioned fillMode="outline" rounded="medium" position="outside" align="top-start">Rect</BadgePositioned>
157
157
  </div>
158
158
  <div className="k-badge-container k-rtl">
159
- <BadgeNormal fillMode="outline" rounded="medium" position="outside" align="top-end">Rect</BadgeNormal>
159
+ <BadgePositioned fillMode="outline" rounded="medium" position="outside" align="top-end">Rect</BadgePositioned>
160
160
  </div>
161
161
  <div className="k-badge-container k-rtl">
162
- <BadgeNormal fillMode="outline" rounded="medium" position="outside" align="bottom-start">Rect</BadgeNormal>
162
+ <BadgePositioned fillMode="outline" rounded="medium" position="outside" align="bottom-start">Rect</BadgePositioned>
163
163
  </div>
164
164
  <div className="k-badge-container k-rtl">
165
- <BadgeNormal fillMode="outline" rounded="medium" position="outside" align="bottom-end">Rect</BadgeNormal>
165
+ <BadgePositioned fillMode="outline" rounded="medium" position="outside" align="bottom-end">Rect</BadgePositioned>
166
166
  </div>
167
167
  <span></span>
168
168
 
package/src/badge/tests/badge-position-solid.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { BadgeNormal } from '..';
1
+ import { BadgeNormal, BadgePositioned } from '..';
2
2
 
3
3
 
4
4
  const styles = `
@@ -72,31 +72,31 @@ export default () =>(
72
72
 
73
73
  <span>Inside</span>
74
74
  <div className="k-badge-container">
75
- <BadgeNormal fillMode="solid" rounded="medium" position="inside" align="top-start">Rect</BadgeNormal>
75
+ <BadgePositioned fillMode="solid" rounded="medium" position="inside" align="top-start">Rect</BadgePositioned>
76
76
  </div>
77
77
  <div className="k-badge-container">
78
- <BadgeNormal fillMode="solid" rounded="medium" position="inside" align="top-end">Rect</BadgeNormal>
78
+ <BadgePositioned fillMode="solid" rounded="medium" position="inside" align="top-end">Rect</BadgePositioned>
79
79
  </div>
80
80
  <div className="k-badge-container">
81
- <BadgeNormal fillMode="solid" rounded="medium" position="inside" align="bottom-start">Rect</BadgeNormal>
81
+ <BadgePositioned fillMode="solid" rounded="medium" position="inside" align="bottom-start">Rect</BadgePositioned>
82
82
  </div>
83
83
  <div className="k-badge-container">
84
- <BadgeNormal fillMode="solid" rounded="medium" position="inside" align="bottom-end">Rect</BadgeNormal>
84
+ <BadgePositioned fillMode="solid" rounded="medium" position="inside" align="bottom-end">Rect</BadgePositioned>
85
85
  </div>
86
86
  <span></span>
87
87
 
88
88
  <span>Edge</span>
89
89
  <div className="k-badge-container">
90
- <BadgeNormal fillMode="solid" rounded="medium" position="edge" align="top-start">Rect</BadgeNormal>
90
+ <BadgePositioned fillMode="solid" rounded="medium" position="edge" align="top-start">Rect</BadgePositioned>
91
91
  </div>
92
92
  <div className="k-badge-container">
93
- <BadgeNormal fillMode="solid" rounded="medium" position="edge" align="top-end">Rect</BadgeNormal>
93
+ <BadgePositioned fillMode="solid" rounded="medium" position="edge" align="top-end">Rect</BadgePositioned>
94
94
  </div>
95
95
  <div className="k-badge-container">
96
- <BadgeNormal fillMode="solid" rounded="medium" position="edge" align="bottom-start">Rect</BadgeNormal>
96
+ <BadgePositioned fillMode="solid" rounded="medium" position="edge" align="bottom-start">Rect</BadgePositioned>
97
97
  </div>
98
98
  <div className="k-badge-container">
99
- <BadgeNormal fillMode="solid" rounded="medium" position="edge" align="bottom-end">Rect</BadgeNormal>
99
+ <BadgePositioned fillMode="solid" rounded="medium" position="edge" align="bottom-end">Rect</BadgePositioned>
100
100
  </div>
101
101
  <span></span>
102
102
 
@@ -104,16 +104,16 @@ export default () =>(
104
104
 
105
105
  <span>Outside</span>
106
106
  <div className="k-badge-container">
107
- <BadgeNormal fillMode="solid" rounded="medium" position="outside" align="top-start">Rect</BadgeNormal>
107
+ <BadgePositioned fillMode="solid" rounded="medium" position="outside" align="top-start">Rect</BadgePositioned>
108
108
  </div>
109
109
  <div className="k-badge-container">
110
- <BadgeNormal fillMode="solid" rounded="medium" position="outside" align="top-end">Rect</BadgeNormal>
110
+ <BadgePositioned fillMode="solid" rounded="medium" position="outside" align="top-end">Rect</BadgePositioned>
111
111
  </div>
112
112
  <div className="k-badge-container">
113
- <BadgeNormal fillMode="solid" rounded="medium" position="outside" align="bottom-start">Rect</BadgeNormal>
113
+ <BadgePositioned fillMode="solid" rounded="medium" position="outside" align="bottom-start">Rect</BadgePositioned>
114
114
  </div>
115
115
  <div className="k-badge-container">
116
- <BadgeNormal fillMode="solid" rounded="medium" position="outside" align="bottom-end">Rect</BadgeNormal>
116
+ <BadgePositioned fillMode="solid" rounded="medium" position="outside" align="bottom-end">Rect</BadgePositioned>
117
117
  </div>
118
118
  <span></span>
119
119
 
@@ -121,31 +121,31 @@ export default () =>(
121
121
 
122
122
  <span>Inside RTL</span>
123
123
  <div className="k-badge-container k-rtl">
124
- <BadgeNormal fillMode="solid" rounded="medium" position="inside" align="top-start">Rect</BadgeNormal>
124
+ <BadgePositioned fillMode="solid" rounded="medium" position="inside" align="top-start">Rect</BadgePositioned>
125
125
  </div>
126
126
  <div className="k-badge-container k-rtl">
127
- <BadgeNormal fillMode="solid" rounded="medium" position="inside" align="top-end">Rect</BadgeNormal>
127
+ <BadgePositioned fillMode="solid" rounded="medium" position="inside" align="top-end">Rect</BadgePositioned>
128
128
  </div>
129
129
  <div className="k-badge-container k-rtl">
130
- <BadgeNormal fillMode="solid" rounded="medium" position="inside" align="bottom-start">Rect</BadgeNormal>
130
+ <BadgePositioned fillMode="solid" rounded="medium" position="inside" align="bottom-start">Rect</BadgePositioned>
131
131
  </div>
132
132
  <div className="k-badge-container k-rtl">
133
- <BadgeNormal fillMode="solid" rounded="medium" position="inside" align="bottom-end">Rect</BadgeNormal>
133
+ <BadgePositioned fillMode="solid" rounded="medium" position="inside" align="bottom-end">Rect</BadgePositioned>
134
134
  </div>
135
135
  <span></span>
136
136
 
137
137
  <span>Edge RTL</span>
138
138
  <div className="k-badge-container k-rtl">
139
- <BadgeNormal fillMode="solid" rounded="medium" position="edge" align="top-start">Rect</BadgeNormal>
139
+ <BadgePositioned fillMode="solid" rounded="medium" position="edge" align="top-start">Rect</BadgePositioned>
140
140
  </div>
141
141
  <div className="k-badge-container k-rtl">
142
- <BadgeNormal fillMode="solid" rounded="medium" position="edge" align="top-end">Rect</BadgeNormal>
142
+ <BadgePositioned fillMode="solid" rounded="medium" position="edge" align="top-end">Rect</BadgePositioned>
143
143
  </div>
144
144
  <div className="k-badge-container k-rtl">
145
- <BadgeNormal fillMode="solid" rounded="medium" position="edge" align="bottom-start">Rect</BadgeNormal>
145
+ <BadgePositioned fillMode="solid" rounded="medium" position="edge" align="bottom-start">Rect</BadgePositioned>
146
146
  </div>
147
147
  <div className="k-badge-container k-rtl">
148
- <BadgeNormal fillMode="solid" rounded="medium" position="edge" align="bottom-end">Rect</BadgeNormal>
148
+ <BadgePositioned fillMode="solid" rounded="medium" position="edge" align="bottom-end">Rect</BadgePositioned>
149
149
  </div>
150
150
  <span></span>
151
151
 
@@ -153,16 +153,16 @@ export default () =>(
153
153
 
154
154
  <span>Outside RTL</span>
155
155
  <div className="k-badge-container k-rtl">
156
- <BadgeNormal fillMode="solid" rounded="medium" position="outside" align="top-start">Rect</BadgeNormal>
156
+ <BadgePositioned fillMode="solid" rounded="medium" position="outside" align="top-start">Rect</BadgePositioned>
157
157
  </div>
158
158
  <div className="k-badge-container k-rtl">
159
- <BadgeNormal fillMode="solid" rounded="medium" position="outside" align="top-end">Rect</BadgeNormal>
159
+ <BadgePositioned fillMode="solid" rounded="medium" position="outside" align="top-end">Rect</BadgePositioned>
160
160
  </div>
161
161
  <div className="k-badge-container k-rtl">
162
- <BadgeNormal fillMode="solid" rounded="medium" position="outside" align="bottom-start">Rect</BadgeNormal>
162
+ <BadgePositioned fillMode="solid" rounded="medium" position="outside" align="bottom-start">Rect</BadgePositioned>
163
163
  </div>
164
164
  <div className="k-badge-container k-rtl">
165
- <BadgeNormal fillMode="solid" rounded="medium" position="outside" align="bottom-end">Rect</BadgeNormal>
165
+ <BadgePositioned fillMode="solid" rounded="medium" position="outside" align="bottom-end">Rect</BadgePositioned>
166
166
  </div>
167
167
  <span></span>
168
168
 
package/src/badge/tests/badge-position.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { BadgeNormal } from '..';
1
+ import { BadgeNormal, BadgePositioned } from '..';
2
2
 
3
3
 
4
4
  const styles = `
@@ -72,31 +72,31 @@ export default () =>(
72
72
 
73
73
  <span>Inside</span>
74
74
  <div className="k-badge-container">
75
- <BadgeNormal rounded="medium" position="inside" align="top-start">Rect</BadgeNormal>
75
+ <BadgePositioned rounded="medium" position="inside" align="top-start">Rect</BadgePositioned>
76
76
  </div>
77
77
  <div className="k-badge-container">
78
- <BadgeNormal rounded="medium" position="inside" align="top-end">Rect</BadgeNormal>
78
+ <BadgePositioned rounded="medium" position="inside" align="top-end">Rect</BadgePositioned>
79
79
  </div>
80
80
  <div className="k-badge-container">
81
- <BadgeNormal rounded="medium" position="inside" align="bottom-start">Rect</BadgeNormal>
81
+ <BadgePositioned rounded="medium" position="inside" align="bottom-start">Rect</BadgePositioned>
82
82
  </div>
83
83
  <div className="k-badge-container">
84
- <BadgeNormal rounded="medium" position="inside" align="bottom-end">Rect</BadgeNormal>
84
+ <BadgePositioned rounded="medium" position="inside" align="bottom-end">Rect</BadgePositioned>
85
85
  </div>
86
86
  <span></span>
87
87
 
88
88
  <span>Edge</span>
89
89
  <div className="k-badge-container">
90
- <BadgeNormal rounded="medium" position="edge" align="top-start">Rect</BadgeNormal>
90
+ <BadgePositioned rounded="medium" position="edge" align="top-start">Rect</BadgePositioned>
91
91
  </div>
92
92
  <div className="k-badge-container">
93
- <BadgeNormal rounded="medium" position="edge" align="top-end">Rect</BadgeNormal>
93
+ <BadgePositioned rounded="medium" position="edge" align="top-end">Rect</BadgePositioned>
94
94
  </div>
95
95
  <div className="k-badge-container">
96
- <BadgeNormal rounded="medium" position="edge" align="bottom-start">Rect</BadgeNormal>
96
+ <BadgePositioned rounded="medium" position="edge" align="bottom-start">Rect</BadgePositioned>
97
97
  </div>
98
98
  <div className="k-badge-container">
99
- <BadgeNormal rounded="medium" position="edge" align="bottom-end">Rect</BadgeNormal>
99
+ <BadgePositioned rounded="medium" position="edge" align="bottom-end">Rect</BadgePositioned>
100
100
  </div>
101
101
  <span></span>
102
102
 
@@ -104,16 +104,16 @@ export default () =>(
104
104
 
105
105
  <span>Outside</span>
106
106
  <div className="k-badge-container">
107
- <BadgeNormal rounded="medium" position="outside" align="top-start">Rect</BadgeNormal>
107
+ <BadgePositioned rounded="medium" position="outside" align="top-start">Rect</BadgePositioned>
108
108
  </div>
109
109
  <div className="k-badge-container">
110
- <BadgeNormal rounded="medium" position="outside" align="top-end">Rect</BadgeNormal>
110
+ <BadgePositioned rounded="medium" position="outside" align="top-end">Rect</BadgePositioned>
111
111
  </div>
112
112
  <div className="k-badge-container">
113
- <BadgeNormal rounded="medium" position="outside" align="bottom-start">Rect</BadgeNormal>
113
+ <BadgePositioned rounded="medium" position="outside" align="bottom-start">Rect</BadgePositioned>
114
114
  </div>
115
115
  <div className="k-badge-container">
116
- <BadgeNormal rounded="medium" position="outside" align="bottom-end">Rect</BadgeNormal>
116
+ <BadgePositioned rounded="medium" position="outside" align="bottom-end">Rect</BadgePositioned>
117
117
  </div>
118
118
  <span></span>
119
119
 
@@ -121,31 +121,31 @@ export default () =>(
121
121
 
122
122
  <span>Inside RTL</span>
123
123
  <div className="k-badge-container k-rtl">
124
- <BadgeNormal rounded="medium" position="inside" align="top-start">Rect</BadgeNormal>
124
+ <BadgePositioned rounded="medium" position="inside" align="top-start">Rect</BadgePositioned>
125
125
  </div>
126
126
  <div className="k-badge-container k-rtl">
127
- <BadgeNormal rounded="medium" position="inside" align="top-end">Rect</BadgeNormal>
127
+ <BadgePositioned rounded="medium" position="inside" align="top-end">Rect</BadgePositioned>
128
128
  </div>
129
129
  <div className="k-badge-container k-rtl">
130
- <BadgeNormal rounded="medium" position="inside" align="bottom-start">Rect</BadgeNormal>
130
+ <BadgePositioned rounded="medium" position="inside" align="bottom-start">Rect</BadgePositioned>
131
131
  </div>
132
132
  <div className="k-badge-container k-rtl">
133
- <BadgeNormal rounded="medium" position="inside" align="bottom-end">Rect</BadgeNormal>
133
+ <BadgePositioned rounded="medium" position="inside" align="bottom-end">Rect</BadgePositioned>
134
134
  </div>
135
135
  <span></span>
136
136
 
137
137
  <span>Edge RTL</span>
138
138
  <div className="k-badge-container k-rtl">
139
- <BadgeNormal rounded="medium" position="edge" align="top-start">Rect</BadgeNormal>
139
+ <BadgePositioned rounded="medium" position="edge" align="top-start">Rect</BadgePositioned>
140
140
  </div>
141
141
  <div className="k-badge-container k-rtl">
142
- <BadgeNormal rounded="medium" position="edge" align="top-end">Rect</BadgeNormal>
142
+ <BadgePositioned rounded="medium" position="edge" align="top-end">Rect</BadgePositioned>
143
143
  </div>
144
144
  <div className="k-badge-container k-rtl">
145
- <BadgeNormal rounded="medium" position="edge" align="bottom-start">Rect</BadgeNormal>
145
+ <BadgePositioned rounded="medium" position="edge" align="bottom-start">Rect</BadgePositioned>
146
146
  </div>
147
147
  <div className="k-badge-container k-rtl">
148
- <BadgeNormal rounded="medium" position="edge" align="bottom-end">Rect</BadgeNormal>
148
+ <BadgePositioned rounded="medium" position="edge" align="bottom-end">Rect</BadgePositioned>
149
149
  </div>
150
150
  <span></span>
151
151
 
@@ -153,16 +153,16 @@ export default () =>(
153
153
 
154
154
  <span>Outside RTL</span>
155
155
  <div className="k-badge-container k-rtl">
156
- <BadgeNormal rounded="medium" position="outside" align="top-start">Rect</BadgeNormal>
156
+ <BadgePositioned rounded="medium" position="outside" align="top-start">Rect</BadgePositioned>
157
157
  </div>
158
158
  <div className="k-badge-container k-rtl">
159
- <BadgeNormal rounded="medium" position="outside" align="top-end">Rect</BadgeNormal>
159
+ <BadgePositioned rounded="medium" position="outside" align="top-end">Rect</BadgePositioned>
160
160
  </div>
161
161
  <div className="k-badge-container k-rtl">
162
- <BadgeNormal rounded="medium" position="outside" align="bottom-start">Rect</BadgeNormal>
162
+ <BadgePositioned rounded="medium" position="outside" align="bottom-start">Rect</BadgePositioned>
163
163
  </div>
164
164
  <div className="k-badge-container k-rtl">
165
- <BadgeNormal rounded="medium" position="outside" align="bottom-end">Rect</BadgeNormal>
165
+ <BadgePositioned rounded="medium" position="outside" align="bottom-end">Rect</BadgePositioned>
166
166
  </div>
167
167
  <span></span>
168
168