@westpac/ui 0.20.0 → 0.21.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.
- package/CHANGELOG.md +12 -0
- package/dist/component-type.json +1 -1
- package/dist/components/input-group/input-group.component.js +1 -1
- package/dist/components/input-group/input-group.styles.d.ts +74 -4
- package/dist/components/input-group/input-group.styles.js +37 -8
- package/dist/components/popover/popover.component.d.ts +1 -1
- package/dist/components/popover/popover.component.js +8 -4
- package/dist/components/popover/popover.styles.d.ts +18 -2
- package/dist/components/popover/popover.styles.js +10 -2
- package/dist/components/popover/popover.types.d.ts +5 -1
- package/dist/css/westpac-ui.css +10 -0
- package/dist/css/westpac-ui.min.css +10 -0
- package/package.json +3 -3
- package/src/components/input-group/input-group.component.tsx +1 -1
- package/src/components/input-group/input-group.styles.ts +16 -8
- package/src/components/popover/popover.component.tsx +6 -2
- package/src/components/popover/popover.styles.ts +9 -1
- package/src/components/popover/popover.types.ts +5 -1
|
@@ -109,7 +109,7 @@ export function InputGroup({ label , hideLabel , size ='medium' , hint , errorMe
|
|
|
109
109
|
after: !!after,
|
|
110
110
|
afterInset,
|
|
111
111
|
beforeInset,
|
|
112
|
-
width:
|
|
112
|
+
width: width
|
|
113
113
|
});
|
|
114
114
|
return React.createElement(Tag, _extends({
|
|
115
115
|
className: styles.base({
|
|
@@ -16,8 +16,43 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
|
|
|
16
16
|
false: string;
|
|
17
17
|
};
|
|
18
18
|
width: {
|
|
19
|
-
|
|
20
|
-
|
|
19
|
+
full: string;
|
|
20
|
+
1: {
|
|
21
|
+
input: string;
|
|
22
|
+
};
|
|
23
|
+
2: {
|
|
24
|
+
input: string;
|
|
25
|
+
};
|
|
26
|
+
3: {
|
|
27
|
+
input: string;
|
|
28
|
+
};
|
|
29
|
+
4: {
|
|
30
|
+
input: string;
|
|
31
|
+
};
|
|
32
|
+
5: {
|
|
33
|
+
input: string;
|
|
34
|
+
};
|
|
35
|
+
6: {
|
|
36
|
+
input: string;
|
|
37
|
+
};
|
|
38
|
+
7: {
|
|
39
|
+
input: string;
|
|
40
|
+
};
|
|
41
|
+
8: {
|
|
42
|
+
input: string;
|
|
43
|
+
};
|
|
44
|
+
9: {
|
|
45
|
+
input: string;
|
|
46
|
+
};
|
|
47
|
+
10: {
|
|
48
|
+
input: string;
|
|
49
|
+
};
|
|
50
|
+
20: {
|
|
51
|
+
input: string;
|
|
52
|
+
};
|
|
53
|
+
30: {
|
|
54
|
+
input: string;
|
|
55
|
+
};
|
|
21
56
|
};
|
|
22
57
|
}, {
|
|
23
58
|
base: string;
|
|
@@ -42,8 +77,43 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
|
|
|
42
77
|
false: string;
|
|
43
78
|
};
|
|
44
79
|
width: {
|
|
45
|
-
|
|
46
|
-
|
|
80
|
+
full: string;
|
|
81
|
+
1: {
|
|
82
|
+
input: string;
|
|
83
|
+
};
|
|
84
|
+
2: {
|
|
85
|
+
input: string;
|
|
86
|
+
};
|
|
87
|
+
3: {
|
|
88
|
+
input: string;
|
|
89
|
+
};
|
|
90
|
+
4: {
|
|
91
|
+
input: string;
|
|
92
|
+
};
|
|
93
|
+
5: {
|
|
94
|
+
input: string;
|
|
95
|
+
};
|
|
96
|
+
6: {
|
|
97
|
+
input: string;
|
|
98
|
+
};
|
|
99
|
+
7: {
|
|
100
|
+
input: string;
|
|
101
|
+
};
|
|
102
|
+
8: {
|
|
103
|
+
input: string;
|
|
104
|
+
};
|
|
105
|
+
9: {
|
|
106
|
+
input: string;
|
|
107
|
+
};
|
|
108
|
+
10: {
|
|
109
|
+
input: string;
|
|
110
|
+
};
|
|
111
|
+
20: {
|
|
112
|
+
input: string;
|
|
113
|
+
};
|
|
114
|
+
30: {
|
|
115
|
+
input: string;
|
|
116
|
+
};
|
|
47
117
|
};
|
|
48
118
|
}, {
|
|
49
119
|
base: string;
|
|
@@ -22,8 +22,43 @@ export const styles = tv({
|
|
|
22
22
|
false: ''
|
|
23
23
|
},
|
|
24
24
|
width: {
|
|
25
|
-
|
|
26
|
-
|
|
25
|
+
full: '',
|
|
26
|
+
1: {
|
|
27
|
+
input: 'inline-flex'
|
|
28
|
+
},
|
|
29
|
+
2: {
|
|
30
|
+
input: 'inline-flex'
|
|
31
|
+
},
|
|
32
|
+
3: {
|
|
33
|
+
input: 'inline-flex'
|
|
34
|
+
},
|
|
35
|
+
4: {
|
|
36
|
+
input: 'inline-flex'
|
|
37
|
+
},
|
|
38
|
+
5: {
|
|
39
|
+
input: 'inline-flex'
|
|
40
|
+
},
|
|
41
|
+
6: {
|
|
42
|
+
input: 'inline-flex'
|
|
43
|
+
},
|
|
44
|
+
7: {
|
|
45
|
+
input: 'inline-flex'
|
|
46
|
+
},
|
|
47
|
+
8: {
|
|
48
|
+
input: 'inline-flex'
|
|
49
|
+
},
|
|
50
|
+
9: {
|
|
51
|
+
input: 'inline-flex'
|
|
52
|
+
},
|
|
53
|
+
10: {
|
|
54
|
+
input: 'inline-flex'
|
|
55
|
+
},
|
|
56
|
+
20: {
|
|
57
|
+
input: 'inline-flex'
|
|
58
|
+
},
|
|
59
|
+
30: {
|
|
60
|
+
input: 'inline-flex'
|
|
61
|
+
}
|
|
27
62
|
}
|
|
28
63
|
},
|
|
29
64
|
compoundVariants: [
|
|
@@ -54,12 +89,6 @@ export const styles = tv({
|
|
|
54
89
|
className: {
|
|
55
90
|
base: 'input-group-inset-before'
|
|
56
91
|
}
|
|
57
|
-
},
|
|
58
|
-
{
|
|
59
|
-
width: true,
|
|
60
|
-
className: {
|
|
61
|
-
input: 'inline-flex'
|
|
62
|
-
}
|
|
63
92
|
}
|
|
64
93
|
]
|
|
65
94
|
}, {
|
|
@@ -3,4 +3,4 @@ import { type PopoverProps } from './popover.types.js';
|
|
|
3
3
|
* TODO: Revisit this component when react-aria has updated usePopover, see: https://github.com/adobe/react-spectrum/discussions/5341
|
|
4
4
|
* This version does not currently use react-aria as it blocked so functionality that was needed to match GEL 3.0
|
|
5
5
|
*/
|
|
6
|
-
export declare function Popover({ children, className, headingTag, content, heading, onClick, placement, look, soft, open, icon, }: PopoverProps): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export declare function Popover({ children, className, headingTag, content, heading, onClick, placement, look, soft, open, linkStyling, size, icon, }: PopoverProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -4,10 +4,12 @@ import { useOverlayTriggerState } from 'react-stately';
|
|
|
4
4
|
import { Button } from '../button/index.js';
|
|
5
5
|
import { Panel } from './components/panel/panel.component.js';
|
|
6
6
|
import { styles as popoverStyles } from './popover.styles.js';
|
|
7
|
-
export function Popover({ children , className , headingTag , content , heading , onClick =()=>undefined , placement , look , soft =false , open =false , icon }) {
|
|
7
|
+
export function Popover({ children , className , headingTag , content , heading , onClick =()=>undefined , placement , look , soft =false , open =false , linkStyling =false , size ='medium' , icon }) {
|
|
8
8
|
const state = useOverlayTriggerState({});
|
|
9
9
|
const panelId = useId();
|
|
10
|
-
const styles = popoverStyles({
|
|
10
|
+
const styles = popoverStyles({
|
|
11
|
+
linkStyling
|
|
12
|
+
});
|
|
11
13
|
const ref = useRef(null);
|
|
12
14
|
const handleClick = useCallback(()=>{
|
|
13
15
|
onClick();
|
|
@@ -41,13 +43,15 @@ export function Popover({ children , className , headingTag , content , heading
|
|
|
41
43
|
className
|
|
42
44
|
})
|
|
43
45
|
}, React.createElement(Button, {
|
|
44
|
-
look: icon && !children ? 'link' : look,
|
|
46
|
+
look: icon && !children || linkStyling ? 'link' : look,
|
|
45
47
|
iconAfter: icon,
|
|
46
48
|
soft: soft,
|
|
47
49
|
"aria-expanded": state.isOpen,
|
|
48
50
|
"aria-controls": panelId,
|
|
49
51
|
onClick: handleClick,
|
|
50
|
-
ref: ref
|
|
52
|
+
ref: ref,
|
|
53
|
+
size: size,
|
|
54
|
+
className: styles.button()
|
|
51
55
|
}, children), state.isOpen && React.createElement(Panel, {
|
|
52
56
|
placement: placement,
|
|
53
57
|
heading: heading ? heading : '',
|
|
@@ -1,7 +1,23 @@
|
|
|
1
|
-
export declare const styles: import("tailwind-variants").TVReturnType<{
|
|
1
|
+
export declare const styles: import("tailwind-variants").TVReturnType<{
|
|
2
|
+
linkStyling: {
|
|
3
|
+
true: {
|
|
4
|
+
button: string;
|
|
5
|
+
};
|
|
6
|
+
false: {};
|
|
7
|
+
};
|
|
8
|
+
}, {
|
|
2
9
|
base: string;
|
|
10
|
+
button: string;
|
|
3
11
|
}, undefined, {
|
|
4
12
|
responsiveVariants: string[];
|
|
5
|
-
}, {
|
|
13
|
+
}, {
|
|
14
|
+
linkStyling: {
|
|
15
|
+
true: {
|
|
16
|
+
button: string;
|
|
17
|
+
};
|
|
18
|
+
false: {};
|
|
19
|
+
};
|
|
20
|
+
}, {
|
|
6
21
|
base: string;
|
|
22
|
+
button: string;
|
|
7
23
|
}>;
|
|
@@ -1,9 +1,17 @@
|
|
|
1
1
|
import { tv } from 'tailwind-variants';
|
|
2
2
|
export const styles = tv({
|
|
3
3
|
slots: {
|
|
4
|
-
base: 'relative inline-block'
|
|
4
|
+
base: 'relative inline-block',
|
|
5
|
+
button: ''
|
|
5
6
|
},
|
|
6
|
-
variants: {
|
|
7
|
+
variants: {
|
|
8
|
+
linkStyling: {
|
|
9
|
+
true: {
|
|
10
|
+
button: 'p-0'
|
|
11
|
+
},
|
|
12
|
+
false: {}
|
|
13
|
+
}
|
|
14
|
+
}
|
|
7
15
|
}, {
|
|
8
16
|
responsiveVariants: [
|
|
9
17
|
'xsl',
|
|
@@ -23,6 +23,10 @@ export type PopoverProps = {
|
|
|
23
23
|
* Use an icon as the button
|
|
24
24
|
*/
|
|
25
25
|
icon?: (props: IconProps) => JSX.Element;
|
|
26
|
+
/**
|
|
27
|
+
* Removes padding from trigger button and sets look to link to be able to look inline, use size prop to match font size
|
|
28
|
+
*/
|
|
29
|
+
linkStyling?: boolean;
|
|
26
30
|
/**
|
|
27
31
|
* A function for the onClick event
|
|
28
32
|
*/
|
|
@@ -36,4 +40,4 @@ export type PopoverProps = {
|
|
|
36
40
|
* @default top
|
|
37
41
|
*/
|
|
38
42
|
placement?: 'top' | 'bottom';
|
|
39
|
-
} & HTMLAttributes<Element> & Pick<ButtonProps, 'look' | 'soft'>;
|
|
43
|
+
} & HTMLAttributes<Element> & Pick<ButtonProps, 'look' | 'soft' | 'size'>;
|
package/dist/css/westpac-ui.css
CHANGED
|
@@ -7122,6 +7122,8 @@ video {
|
|
|
7122
7122
|
}.xsl\:bg-white {
|
|
7123
7123
|
--tw-bg-opacity: 1;
|
|
7124
7124
|
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
|
7125
|
+
}.xsl\:p-0 {
|
|
7126
|
+
padding: 0rem;
|
|
7125
7127
|
}.xsl\:p-2 {
|
|
7126
7128
|
padding: 0.75rem;
|
|
7127
7129
|
}.xsl\:p-3 {
|
|
@@ -8174,6 +8176,8 @@ video {
|
|
|
8174
8176
|
}.sm\:bg-white {
|
|
8175
8177
|
--tw-bg-opacity: 1;
|
|
8176
8178
|
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
|
8179
|
+
}.sm\:p-0 {
|
|
8180
|
+
padding: 0rem;
|
|
8177
8181
|
}.sm\:p-2 {
|
|
8178
8182
|
padding: 0.75rem;
|
|
8179
8183
|
}.sm\:p-3 {
|
|
@@ -9245,6 +9249,8 @@ video {
|
|
|
9245
9249
|
}.md\:bg-white {
|
|
9246
9250
|
--tw-bg-opacity: 1;
|
|
9247
9251
|
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
|
9252
|
+
}.md\:p-0 {
|
|
9253
|
+
padding: 0rem;
|
|
9248
9254
|
}.md\:p-2 {
|
|
9249
9255
|
padding: 0.75rem;
|
|
9250
9256
|
}.md\:p-3 {
|
|
@@ -10309,6 +10315,8 @@ video {
|
|
|
10309
10315
|
}.lg\:bg-white {
|
|
10310
10316
|
--tw-bg-opacity: 1;
|
|
10311
10317
|
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
|
10318
|
+
}.lg\:p-0 {
|
|
10319
|
+
padding: 0rem;
|
|
10312
10320
|
}.lg\:p-2 {
|
|
10313
10321
|
padding: 0.75rem;
|
|
10314
10322
|
}.lg\:p-3 {
|
|
@@ -11338,6 +11346,8 @@ video {
|
|
|
11338
11346
|
}.xl\:bg-white {
|
|
11339
11347
|
--tw-bg-opacity: 1;
|
|
11340
11348
|
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
|
11349
|
+
}.xl\:p-0 {
|
|
11350
|
+
padding: 0rem;
|
|
11341
11351
|
}.xl\:p-2 {
|
|
11342
11352
|
padding: 0.75rem;
|
|
11343
11353
|
}.xl\:p-3 {
|
|
@@ -7122,6 +7122,8 @@ video {
|
|
|
7122
7122
|
}.xsl\:bg-white {
|
|
7123
7123
|
--tw-bg-opacity: 1;
|
|
7124
7124
|
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
|
7125
|
+
}.xsl\:p-0 {
|
|
7126
|
+
padding: 0rem;
|
|
7125
7127
|
}.xsl\:p-2 {
|
|
7126
7128
|
padding: 0.75rem;
|
|
7127
7129
|
}.xsl\:p-3 {
|
|
@@ -8174,6 +8176,8 @@ video {
|
|
|
8174
8176
|
}.sm\:bg-white {
|
|
8175
8177
|
--tw-bg-opacity: 1;
|
|
8176
8178
|
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
|
8179
|
+
}.sm\:p-0 {
|
|
8180
|
+
padding: 0rem;
|
|
8177
8181
|
}.sm\:p-2 {
|
|
8178
8182
|
padding: 0.75rem;
|
|
8179
8183
|
}.sm\:p-3 {
|
|
@@ -9245,6 +9249,8 @@ video {
|
|
|
9245
9249
|
}.md\:bg-white {
|
|
9246
9250
|
--tw-bg-opacity: 1;
|
|
9247
9251
|
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
|
9252
|
+
}.md\:p-0 {
|
|
9253
|
+
padding: 0rem;
|
|
9248
9254
|
}.md\:p-2 {
|
|
9249
9255
|
padding: 0.75rem;
|
|
9250
9256
|
}.md\:p-3 {
|
|
@@ -10309,6 +10315,8 @@ video {
|
|
|
10309
10315
|
}.lg\:bg-white {
|
|
10310
10316
|
--tw-bg-opacity: 1;
|
|
10311
10317
|
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
|
10318
|
+
}.lg\:p-0 {
|
|
10319
|
+
padding: 0rem;
|
|
10312
10320
|
}.lg\:p-2 {
|
|
10313
10321
|
padding: 0.75rem;
|
|
10314
10322
|
}.lg\:p-3 {
|
|
@@ -11338,6 +11346,8 @@ video {
|
|
|
11338
11346
|
}.xl\:bg-white {
|
|
11339
11347
|
--tw-bg-opacity: 1;
|
|
11340
11348
|
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
|
11349
|
+
}.xl\:p-0 {
|
|
11350
|
+
padding: 0rem;
|
|
11341
11351
|
}.xl\:p-2 {
|
|
11342
11352
|
padding: 0.75rem;
|
|
11343
11353
|
}.xl\:p-3 {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@westpac/ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.21.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"type": "module",
|
|
@@ -255,9 +255,9 @@
|
|
|
255
255
|
"typescript": "^5.1.6",
|
|
256
256
|
"vite": "^4.3.9",
|
|
257
257
|
"vitest": "^0.30.1",
|
|
258
|
-
"@westpac/eslint-config": "~0.2.1",
|
|
259
258
|
"@westpac/test-config": "~0.0.0",
|
|
260
|
-
"@westpac/ts-config": "~0.0.0"
|
|
259
|
+
"@westpac/ts-config": "~0.0.0",
|
|
260
|
+
"@westpac/eslint-config": "~0.2.1"
|
|
261
261
|
},
|
|
262
262
|
"dependencies": {
|
|
263
263
|
"@duetds/date-picker": "~1.4.0",
|
|
@@ -23,9 +23,23 @@ export const styles = tv(
|
|
|
23
23
|
true: '',
|
|
24
24
|
false: '',
|
|
25
25
|
},
|
|
26
|
+
// Has to be done this as doing it with compoundVariants with array was not working
|
|
26
27
|
width: {
|
|
27
|
-
|
|
28
|
-
|
|
28
|
+
full: '',
|
|
29
|
+
// Below ignored because tailwind was showing a transform error when using a const
|
|
30
|
+
// eslint-disable-next-line sonarjs/no-duplicate-string
|
|
31
|
+
1: { input: 'inline-flex' },
|
|
32
|
+
2: { input: 'inline-flex' },
|
|
33
|
+
3: { input: 'inline-flex' },
|
|
34
|
+
4: { input: 'inline-flex' },
|
|
35
|
+
5: { input: 'inline-flex' },
|
|
36
|
+
6: { input: 'inline-flex' },
|
|
37
|
+
7: { input: 'inline-flex' },
|
|
38
|
+
8: { input: 'inline-flex' },
|
|
39
|
+
9: { input: 'inline-flex' },
|
|
40
|
+
10: { input: 'inline-flex' },
|
|
41
|
+
20: { input: 'inline-flex' },
|
|
42
|
+
30: { input: 'inline-flex' },
|
|
29
43
|
},
|
|
30
44
|
},
|
|
31
45
|
compoundVariants: [
|
|
@@ -49,12 +63,6 @@ export const styles = tv(
|
|
|
49
63
|
beforeInset: true,
|
|
50
64
|
className: { base: 'input-group-inset-before' },
|
|
51
65
|
},
|
|
52
|
-
{
|
|
53
|
-
width: true,
|
|
54
|
-
className: {
|
|
55
|
-
input: 'inline-flex',
|
|
56
|
-
},
|
|
57
|
-
},
|
|
58
66
|
],
|
|
59
67
|
},
|
|
60
68
|
{ responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
|
|
@@ -25,11 +25,13 @@ export function Popover({
|
|
|
25
25
|
look,
|
|
26
26
|
soft = false,
|
|
27
27
|
open = false,
|
|
28
|
+
linkStyling = false,
|
|
29
|
+
size = 'medium',
|
|
28
30
|
icon,
|
|
29
31
|
}: PopoverProps) {
|
|
30
32
|
const state = useOverlayTriggerState({});
|
|
31
33
|
const panelId = useId();
|
|
32
|
-
const styles = popoverStyles({});
|
|
34
|
+
const styles = popoverStyles({ linkStyling });
|
|
33
35
|
const ref = useRef<HTMLButtonElement & HTMLAnchorElement & HTMLSpanElement & HTMLDivElement>(null);
|
|
34
36
|
|
|
35
37
|
const handleClick = useCallback(() => {
|
|
@@ -57,13 +59,15 @@ export function Popover({
|
|
|
57
59
|
return (
|
|
58
60
|
<div className={styles.base({ className })}>
|
|
59
61
|
<Button
|
|
60
|
-
look={icon && !children ? 'link' : look}
|
|
62
|
+
look={(icon && !children) || linkStyling ? 'link' : look}
|
|
61
63
|
iconAfter={icon}
|
|
62
64
|
soft={soft}
|
|
63
65
|
aria-expanded={state.isOpen}
|
|
64
66
|
aria-controls={panelId}
|
|
65
67
|
onClick={handleClick}
|
|
66
68
|
ref={ref}
|
|
69
|
+
size={size}
|
|
70
|
+
className={styles.button()}
|
|
67
71
|
>
|
|
68
72
|
{children}
|
|
69
73
|
</Button>
|
|
@@ -4,8 +4,16 @@ export const styles = tv(
|
|
|
4
4
|
{
|
|
5
5
|
slots: {
|
|
6
6
|
base: 'relative inline-block',
|
|
7
|
+
button: '',
|
|
8
|
+
},
|
|
9
|
+
variants: {
|
|
10
|
+
linkStyling: {
|
|
11
|
+
true: {
|
|
12
|
+
button: 'p-0',
|
|
13
|
+
},
|
|
14
|
+
false: {},
|
|
15
|
+
},
|
|
7
16
|
},
|
|
8
|
-
variants: {},
|
|
9
17
|
},
|
|
10
18
|
{ responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
|
|
11
19
|
);
|
|
@@ -25,6 +25,10 @@ export type PopoverProps = {
|
|
|
25
25
|
* Use an icon as the button
|
|
26
26
|
*/
|
|
27
27
|
icon?: (props: IconProps) => JSX.Element;
|
|
28
|
+
/**
|
|
29
|
+
* Removes padding from trigger button and sets look to link to be able to look inline, use size prop to match font size
|
|
30
|
+
*/
|
|
31
|
+
linkStyling?: boolean;
|
|
28
32
|
/**
|
|
29
33
|
* A function for the onClick event
|
|
30
34
|
*/
|
|
@@ -39,4 +43,4 @@ export type PopoverProps = {
|
|
|
39
43
|
*/
|
|
40
44
|
placement?: 'top' | 'bottom';
|
|
41
45
|
} & HTMLAttributes<Element> &
|
|
42
|
-
Pick<ButtonProps, 'look' | 'soft'>;
|
|
46
|
+
Pick<ButtonProps, 'look' | 'soft' | 'size'>;
|