Skip to content

Commit 569af2b

Browse files
haoziqaqhaoziqaq
committed
feat(button): add filled button mode with elevation support and update documentation
1 parent 45b5f60 commit 569af2b

13 files changed

Lines changed: 108 additions & 86 deletions

File tree

‎packages/varlet-ui/src/button/Button.vue‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
[!states.iconContainer && !states.text, n(`--${states.type}`)],
1313
[states.text, `${n('--text')} ${n(`--text-${states.type}`)}`],
1414
[states.iconContainer, n(`--icon-container-${states.type}`)],
15+
[states.filledDefault, n('--filled-default')],
1516
[round, n('--round')],
1617
[states.outline, n('--outline')],
1718
[loading || pending, n('--loading')],
@@ -52,7 +53,7 @@
5253
</template>
5354

5455
<script lang="ts">
55-
import { call, normalizeToArray } from '@varlet/shared'
56+
import { call, normalizeToArray, toNumber } from '@varlet/shared'
5657
import { computed, defineComponent, ref } from 'vue'
5758
import Hover from '../hover'
5859
import VarHoverOverlay, { useHoverOverlay } from '../hover-overlay'
@@ -64,6 +65,10 @@ import { useButtonGroup } from './provide'
6465
6566
const { name, n, classes } = createNamespace('button')
6667
68+
function isFilledElevation(elevation: boolean | number | string) {
69+
return elevation === false || toNumber(elevation) === 0
70+
}
71+
6772
export default defineComponent({
6873
name,
6974
components: {
@@ -88,10 +93,17 @@ export default defineComponent({
8893
textColor: props.textColor,
8994
outline: props.outline,
9095
iconContainer: props.tonal || props.iconContainer,
96+
filledDefault:
97+
(props.type == null || props.type === 'default') &&
98+
isFilledElevation(props.elevation) &&
99+
!props.text &&
100+
!props.outline &&
101+
!props.tonal &&
102+
!props.iconContainer,
91103
}
92104
}
93105
94-
const { type, size, color, textColor, mode } = buttonGroup
106+
const { type, size, color, textColor, mode, elevation } = buttonGroup
95107
96108
return {
97109
elevation: '',
@@ -102,6 +114,8 @@ export default defineComponent({
102114
text: mode.value === 'text' || mode.value === 'outline',
103115
outline: mode.value === 'outline',
104116
iconContainer: mode.value === 'tonal' || mode.value === 'icon-container',
117+
filledDefault:
118+
mode.value === 'normal' && (props.type ?? type.value) === 'default' && isFilledElevation(elevation.value),
105119
}
106120
})
107121

‎packages/varlet-ui/src/button/__tests__/index.spec.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -298,6 +298,30 @@ describe('test button component props', () => {
298298
expect(wrapper.find('.var-elevation--4').exists()).toBe(true)
299299
wrapper.unmount()
300300
})
301+
302+
test('default filled button', async () => {
303+
const wrapper = mount(VarButton, {
304+
props: {
305+
elevation: false,
306+
},
307+
})
308+
309+
expect(wrapper.find('button').classes()).toContain('var-button--filled-default')
310+
311+
await wrapper.setProps({ elevation: 0 })
312+
expect(wrapper.find('button').classes()).toContain('var-button--filled-default')
313+
314+
await wrapper.setProps({ elevation: '0' })
315+
expect(wrapper.find('button').classes()).toContain('var-button--filled-default')
316+
317+
await wrapper.setProps({ elevation: true })
318+
expect(wrapper.find('button').classes()).not.toContain('var-button--filled-default')
319+
320+
await wrapper.setProps({ elevation: false, type: 'primary' })
321+
expect(wrapper.find('button').classes()).not.toContain('var-button--filled-default')
322+
323+
wrapper.unmount()
324+
})
301325
})
302326

303327
describe('test button component events', () => {

‎packages/varlet-ui/src/button/button.less‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
--button-warning-text-color: var(--color-on-warning);
77
--button-info-text-color: var(--color-on-info);
88
--button-default-color: #f5f5f5;
9+
--button-default-filled-color: #f5f5f5;
910
--button-primary-color: var(--color-primary);
1011
--button-danger-color: var(--color-danger);
1112
--button-success-color: var(--color-success);
@@ -84,6 +85,10 @@
8485
background-color: var(--button-default-color);
8586
}
8687

88+
&--filled-default {
89+
background-color: var(--button-default-filled-color);
90+
}
91+
8792
&--primary {
8893
color: var(--button-primary-text-color);
8994
background-color: var(--button-primary-color);
@@ -110,7 +115,7 @@
110115
}
111116

112117
&--loading {
113-
cursor: default;
118+
cursor: wait;
114119
}
115120

116121
&--block {

‎packages/varlet-ui/src/button/docs/en-US.md‎

Lines changed: 18 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
Button component for triggering actions.
66

7-
### Theme Color Button
7+
### Elevated Button
88

99
```html
1010
<template>
@@ -19,7 +19,22 @@ Button component for triggering actions.
1919
</template>
2020
```
2121

22-
### Tonal Theme Color Button
22+
### Filled Button
23+
24+
```html
25+
<template>
26+
<var-space :size="[10, 10]">
27+
<var-button :elevation="false">Default Button</var-button>
28+
<var-button type="primary" :elevation="false">Primary Button</var-button>
29+
<var-button type="info" :elevation="false">Info Button</var-button>
30+
<var-button type="success" :elevation="false">Success Button</var-button>
31+
<var-button type="warning" :elevation="false">Warning Button</var-button>
32+
<var-button type="danger" :elevation="false">Danger Button</var-button>
33+
</var-space>
34+
</template>
35+
```
36+
37+
### Tonal Button
2338

2439
```html
2540
<template>
@@ -103,30 +118,6 @@ Button component for triggering actions.
103118
</template>
104119
```
105120

106-
### Round Button
107-
108-
```html
109-
<template>
110-
<var-space :size="[10, 10]">
111-
<var-button type="primary" round icon-container>
112-
<var-icon name="plus" />
113-
</var-button>
114-
<var-button type="info" round icon-container>
115-
<var-icon name="information" />
116-
</var-button>
117-
<var-button type="success" round icon-container>
118-
<var-icon name="check" />
119-
</var-button>
120-
<var-button type="warning" round icon-container>
121-
<var-icon name="warning" />
122-
</var-button>
123-
<var-button type="danger" round icon-container>
124-
<var-icon name="window-close" />
125-
</var-button>
126-
</var-space>
127-
</template>
128-
```
129-
130121
### Tonal Round Button
131122

132123
```html
@@ -412,6 +403,7 @@ Here are the CSS variables used by the component. Styles can be customized using
412403
| `--button-warning-text-color` | `var(--color-on-warning)` |
413404
| `--button-info-text-color` | `var(--color-on-info)` |
414405
| `--button-default-color` | `#f5f5f5` |
406+
| `--button-default-filled-color` | `#f5f5f5` |
415407
| `--button-primary-color` | `var(--color-primary)`|
416408
| `--button-danger-color` | `var(--color-danger)`|
417409
| `--button-success-color` | `var(--color-success)`|

‎packages/varlet-ui/src/button/docs/zh-CN.md‎

Lines changed: 18 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
按钮组件，用于触发操作。
66

7-
### 主题色按钮
7+
### Elevated 按钮
88

99
```html
1010
<template>
@@ -19,7 +19,22 @@
1919
</template>
2020
```
2121

22-
### Tonal 主题色按钮
22+
### Filled 按钮
23+
24+
```html
25+
<template>
26+
<var-space :size="[10, 10]">
27+
<var-button :elevation="false">默认按钮</var-button>
28+
<var-button type="primary" :elevation="false">主要按钮</var-button>
29+
<var-button type="info" :elevation="false">信息按钮</var-button>
30+
<var-button type="success" :elevation="false">成功按钮</var-button>
31+
<var-button type="warning" :elevation="false">警告按钮</var-button>
32+
<var-button type="danger" :elevation="false">危险按钮</var-button>
33+
</var-space>
34+
</template>
35+
```
36+
37+
### Tonal 按钮
2338

2439
```html
2540
<template>
@@ -118,30 +133,6 @@
118133
</template>
119134
```
120135

121-
### 圆形按钮
122-
123-
```html
124-
<template>
125-
<var-space :size="[10, 10]">
126-
<var-button type="primary" round icon-container>
127-
<var-icon name="plus" />
128-
</var-button>
129-
<var-button type="info" round icon-container>
130-
<var-icon name="information" />
131-
</var-button>
132-
<var-button type="success" round icon-container>
133-
<var-icon name="check" />
134-
</var-button>
135-
<var-button type="warning" round icon-container>
136-
<var-icon name="warning" />
137-
</var-button>
138-
<var-button type="danger" round icon-container>
139-
<var-icon name="window-close" />
140-
</var-button>
141-
</var-space>
142-
</template>
143-
```
144-
145136
### Tonal 圆形按钮
146137

147138
```html
@@ -430,6 +421,7 @@ function handleAutoLoadingClick() {
430421
| `--button-warning-text-color` | `var(--color-on-warning)` |
431422
| `--button-info-text-color` | `var(--color-on-info)` |
432423
| `--button-default-color` | `#f5f5f5` |
424+
| `--button-default-filled-color` | `#f5f5f5` |
433425
| `--button-primary-color` | `var(--color-primary)`|
434426
| `--button-danger-color` | `var(--color-danger)`|
435427
| `--button-success-color` | `var(--color-success)`|

‎packages/varlet-ui/src/button/example/index.vue‎

Lines changed: 12 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ function handleAutoLoadingClick() {
2222
</script>
2323

2424
<template>
25-
<app-type>{{ t('themeColorButton') }}</app-type>
25+
<app-type>{{ t('elevatedButton') }}</app-type>
2626
<var-space :size="['2.666vmin', '2.666vmin']">
2727
<var-button>{{ t('defaultButton') }}</var-button>
2828
<var-button type="primary">{{ t('primaryButton') }}</var-button>
@@ -32,7 +32,17 @@ function handleAutoLoadingClick() {
3232
<var-button type="danger">{{ t('dangerButton') }}</var-button>
3333
</var-space>
3434

35-
<app-type>{{ t('tonalThemeColorButton') }}</app-type>
35+
<app-type>{{ t('filledButton') }}</app-type>
36+
<var-space :size="['2.666vmin', '2.666vmin']">
37+
<var-button :elevation="false">{{ t('defaultButton') }}</var-button>
38+
<var-button type="primary" :elevation="false">{{ t('primaryButton') }}</var-button>
39+
<var-button type="info" :elevation="false">{{ t('infoButton') }}</var-button>
40+
<var-button type="success" :elevation="false">{{ t('successButton') }}</var-button>
41+
<var-button type="warning" :elevation="false">{{ t('warningButton') }}</var-button>
42+
<var-button type="danger" :elevation="false">{{ t('dangerButton') }}</var-button>
43+
</var-space>
44+
45+
<app-type>{{ t('tonalButton') }}</app-type>
3646
<var-space :size="['2.666vmin', '2.666vmin']">
3747
<var-button tonal>{{ t('defaultButton') }}</var-button>
3848
<var-button type="primary" tonal>{{ t('primaryButton') }}</var-button>
@@ -83,28 +93,6 @@ function handleAutoLoadingClick() {
8393
</var-button>
8494
</var-space>
8595

86-
<app-type>{{ t('roundButton') }}</app-type>
87-
<var-space :size="['2.666vmin', '2.666vmin']">
88-
<var-button round icon-container>
89-
<var-icon name="bookmark" />
90-
</var-button>
91-
<var-button type="primary" round icon-container>
92-
<var-icon name="plus" />
93-
</var-button>
94-
<var-button type="info" round icon-container>
95-
<var-icon name="information" />
96-
</var-button>
97-
<var-button type="success" round icon-container>
98-
<var-icon name="check" />
99-
</var-button>
100-
<var-button type="warning" round icon-container>
101-
<var-icon name="warning" />
102-
</var-button>
103-
<var-button type="danger" round icon-container>
104-
<var-icon name="window-close" />
105-
</var-button>
106-
</var-space>
107-
10896
<app-type>{{ t('tonalRoundButton') }}</app-type>
10997
<var-space :size="['2.666vmin', '2.666vmin']">
11098
<var-button round tonal>

‎packages/varlet-ui/src/button/example/locale/en-US.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
export default {
2-
themeColorButton: 'Theme Color Button',
3-
tonalThemeColorButton: 'Tonal Theme Color Button',
2+
elevatedButton: 'Elevated Button',
3+
filledButton: 'Filled Button',
4+
tonalButton: 'Tonal Button',
45
themeColorButtonGroup: 'Button Group Theme Color',
56
defaultButton: 'Default Button',
67
default: 'Default',
@@ -29,7 +30,6 @@ export default {
2930
backgroundTextColor: 'Background/Text Color',
3031
verticalButtonGroup: 'Vertical Button Group',
3132
linearGradientColor: 'LinearGradient Color',
32-
roundButton: 'Round Button',
3333
tonalRoundButton: 'Tonal Round Button',
3434
event: 'Events',
3535
click: 'Click',

‎packages/varlet-ui/src/button/example/locale/zh-CN.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
export default {
2-
themeColorButton: '主题色按钮',
3-
tonalThemeColorButton: 'Tonal 主题色按钮',
2+
elevatedButton: 'Elevated 按钮',
3+
filledButton: 'Filled 按钮',
4+
tonalButton: 'Tonal 按钮',
45
themeColorButtonGroup: '按钮组主题色',
56
defaultButton: '默认按钮',
67
primaryButton: '主要按钮',
@@ -27,7 +28,6 @@ export default {
2728
backgroundTextColor: '背景/文字',
2829
linearGradientColor: '使用渐变',
2930
verticalButtonGroup: '按钮组竖直排列',
30-
roundButton: '圆形按钮',
3131
tonalRoundButton: 'Tonal 圆形按钮',
3232
event: '注册事件',
3333
click: '点击',

‎packages/varlet-ui/src/themes/__tests__/__snapshots__/index.spec.js.snap‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,7 @@ exports[`dark theme 1`] = `
114114
"--button-danger-icon-container-color": "var(--color-danger-container)",
115115
"--button-danger-text-color": "var(--color-on-danger)",
116116
"--button-default-color": "#303030",
117+
"--button-default-filled-color": "#303030",
117118
"--button-default-icon-color": "#fff",
118119
"--button-default-icon-container-color": "#303030",
119120
"--button-default-text-color": "#fff",
@@ -1098,6 +1099,7 @@ exports[`md3Dark theme 1`] = `
10981099
"--button-danger-icon-container-color": "var(--color-danger-container)",
10991100
"--button-danger-text-color": "var(--color-on-danger)",
11001101
"--button-default-color": "#3B383E",
1102+
"--button-default-filled-color": "#3B383E",
11011103
"--button-default-icon-color": "var(--color-on-surface-variant)",
11021104
"--button-default-icon-container-color": "var(--color-surface-container-highest)",
11031105
"--button-default-text-color": "var(--color-primary)",
@@ -2068,6 +2070,7 @@ exports[`md3Light theme 1`] = `
20682070
"--button-danger-icon-container-color": "var(--color-danger-container)",
20692071
"--button-danger-text-color": "var(--color-on-danger)",
20702072
"--button-default-color": "var(--color-surface-container-low)",
2073+
"--button-default-filled-color": "var(--color-surface-container-high)",
20712074
"--button-default-icon-color": "var(--color-on-info-container)",
20722075
"--button-default-icon-container-color": "var(--color-surface-container-high)",
20732076
"--button-default-text-color": "var(--color-primary)",

‎packages/varlet-ui/src/themes/dark/button.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
export default {
22
'--button-default-color': '#303030',
3+
'--button-default-filled-color': '#303030',
34
'--button-default-text-color': '#fff',
45
'--button-default-icon-container-color': '#303030',
56
'--button-default-icon-color': '#fff',

0 commit comments

Comments
 (0)