Skip to content

feat(button): btnStyle 更名为 variant #103

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Dec 27, 2021
Merged

feat(button): btnStyle 更名为 variant #103

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 14 additions & 14 deletions packages/devui-vue/devui/button/__tests__/button.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@ import { mount } from '@vue/test-utils';
import Button from '../src/button';

describe('d-button', () => {
it('btnStyle', () => {
it('variant', () => {
const wrapper = mount(Button, {
props: { btnStyle: 'danger' },
props: { variant: 'danger' },
});
expect(wrapper.find('.devui-btn').classes()).toContain('devui-btn-danger');
});
Expand Down Expand Up @@ -36,17 +36,17 @@ describe('d-button', () => {
});

// 目前还不支持 loading
// it('loading', async () => {
// const handleClick = jest.fn();
// const wrapper = mount(Button, {
// props: {
// showLoading: true,
// btnClick: handleClick
// },
// });
// await wrapper.trigger('click');
// expect(handleClick).not.toBeCalled();
// });
it('loading', async () => {
const handleClick = jest.fn();
const wrapper = mount(Button, {
props: {
showLoading: true,
btnClick: handleClick
},
});
await wrapper.trigger('click');
expect(handleClick).not.toBeCalled();
});

it('disabled', async () => {
const handleClick = jest.fn();
Expand All @@ -64,7 +64,7 @@ describe('d-button', () => {
it('slot', () => {
const btnText = 'vue3 devui';
const wrapper = mount(Button, {
slots: {
slots: {
default: btnText
}
});
Expand Down
6 changes: 3 additions & 3 deletions packages/devui-vue/devui/button/src/button-types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { ExtractPropTypes, PropType } from 'vue';

export type IButtonType = 'button' | 'submit' | 'reset';
export type IButtonStyle = 'common' | 'primary' | 'text' | 'text-dark' | 'danger' | 'success' | 'warning';
export type IButtonVariant = 'common' | 'primary' | 'text' | 'text-dark' | 'danger' | 'success' | 'warning';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

建议：common -> secondary，并将其secondary设置为默认值

export type IButtonPosition = 'left' | 'right' | 'default';
export type IButtonSize = 'lg' | 'md' | 'sm' | 'xs';

Expand All @@ -10,8 +10,8 @@ export const buttonProps = {
type: String as PropType<IButtonType>,
default: 'button'
},
btnStyle: {
type: String as PropType<IButtonStyle>,
variant: {
type: String as PropType<IButtonVariant>,
default: 'primary'
},
size: {
Expand Down
6 changes: 3 additions & 3 deletions packages/devui-vue/devui/button/src/button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,10 @@ export default defineComponent({
const hasContent = computed(() => ctx.slots.default);

const btnClass = computed(() => {
const { btnStyle, size, position, bordered, icon } = props;
const origin = `devui-btn devui-btn-${btnStyle} devui-btn-${size} devui-btn-${position}`;
const { variant, size, position, bordered, icon } = props;
const origin = `devui-btn devui-btn-${variant} devui-btn-${size} devui-btn-${position}`;
const borderedClass = bordered ? 'bordered' : '';
const btnIcon = !!icon && !hasContent.value && btnStyle !== 'primary' ? 'd-btn-icon' : '';
const btnIcon = !!icon && !hasContent.value && variant !== 'primary' ? 'd-btn-icon' : '';
const btnIconWrap = !!icon ? 'd-btn-icon-wrap' : '';
return `${origin} ${borderedClass} ${btnIcon} ${btnIconWrap}`;
});
Expand Down
6 changes: 3 additions & 3 deletions packages/devui-vue/devui/gantt/src/gantt-tools/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ export default defineComponent({
style={{ position: isFullScreen ? 'fixed' : 'absolute' }}
>
<d-button
btnStyle="common"
variant="common"
onClick={() => actionHandle('today')}
class="tool"
>
Expand All @@ -77,7 +77,7 @@ export default defineComponent({
></d-select>
</div>
<d-button
btnStyle="common"
variant="common"
class={[
'tool',
'minus',
Expand All @@ -89,7 +89,7 @@ export default defineComponent({
<d-icon name="minus"></d-icon>
</d-button>
<d-button
btnStyle="common"
variant="common"
class={[
'tool',
'add',
Expand Down
4 changes: 2 additions & 2 deletions packages/devui-vue/devui/modal/src/dialog-types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import type { PropType, ExtractPropTypes } from 'vue'
import { IButtonStyle } from '../../button/src/button'
import { IButtonVariant } from '../../button'

export interface ButtonOptions {
btnStyle: IButtonStyle
variant: IButtonVariant
text: string
disabled: boolean
handler: ($event: Event) => void
Expand Down
6 changes: 3 additions & 3 deletions packages/devui-vue/devui/modal/src/dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,12 +65,12 @@ export default defineComponent({
// 处理按钮
const buttonsRef = computed(() => {
return props.buttons.map((buttonProps, index) => {
const { btnStyle, disabled, handler, text } = buttonProps;
const { variant, disabled, handler, text } = buttonProps;
return (
<Button
key={index}
style={{ display: 'inline-block', margin: '0 5px' }}
btnStyle={btnStyle}
variant={variant}
disabled={disabled}
onClick={handler}
>
Expand Down Expand Up @@ -118,7 +118,7 @@ export default defineComponent({
<Button
class="btn-close"
icon="close"
btnStyle="text-dark"
variant="text-dark"
onClick={closeModal}
/>
</div>
Expand Down
2 changes: 1 addition & 1 deletion packages/devui-vue/devui/time-picker/src/components/time-popup/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ export default defineComponent({
}
</div>
<div onClick={subDataFun}>
<Button btnStyle="common">确定</Button>
<Button variant="common">确定</Button>
</div>

</div>
Expand Down
18 changes: 9 additions & 9 deletions packages/devui-vue/devui/tooltip/__tests__/tooltip.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,15 @@ const globalOption = {
}
}
const defaultslot = {
default: '<d-button btnStyle="common">tooltip</d-button>'
default: '<d-button variant="common">tooltip</d-button>'
}

describe('tooltip', () => {
beforeEach(() => {
jest.useFakeTimers();
})
describe('basic', () => {
it('should be create', async() => {
it('should be create', async () => {
const wrapper = mount(Tooltip, {
props: {
content: 'content'
Expand All @@ -42,7 +42,7 @@ describe('tooltip', () => {
tooltipElement = wrapper.element.querySelector('.tooltip') as HTMLElement;
expect(tooltipElement.style.opacity).toBe('0');
})
it('position should be left', async() => {
it('position should be left', async () => {
const wrapper = mount(Tooltip, {
props: {
content: 'content',
Expand All @@ -59,7 +59,7 @@ describe('tooltip', () => {
console.log(tooltipArrowElement.style);
expect(tooltipArrowElement.style.borderLeft).toBe('5px solid rgb(70, 77, 110)');
})
it('position should be top', async() => {
it('position should be top', async () => {
const wrapper = mount(Tooltip, {
props: {
content: 'content',
Expand All @@ -76,7 +76,7 @@ describe('tooltip', () => {
console.log(tooltipArrowElement.style);
expect(tooltipArrowElement.style.borderTop).toBe('5px solid rgb(70, 77, 110)');
})
it('position should be right', async() => {
it('position should be right', async () => {
const wrapper = mount(Tooltip, {
props: {
content: 'content',
Expand All @@ -93,7 +93,7 @@ describe('tooltip', () => {
console.log(tooltipArrowElement.style);
expect(tooltipArrowElement.style.borderRight).toBe('5px solid rgb(70, 77, 110)');
})
it('position should be bottom', async() => {
it('position should be bottom', async () => {
const wrapper = mount(Tooltip, {
props: {
content: 'content',
Expand All @@ -112,7 +112,7 @@ describe('tooltip', () => {
})
})
describe('delay time', () => {
it('test mouseEnterDelay', async() => {
it('test mouseEnterDelay', async () => {
const wrapper = mount(Tooltip, {
props: {
content: 'content',
Expand All @@ -132,7 +132,7 @@ describe('tooltip', () => {
tooltipElement = wrapper.element.querySelector('.tooltip') as HTMLElement;
expect(tooltipElement.style.opacity).toBe('1');
})
it('test mouseLeaveDelay', async() => {
it('test mouseLeaveDelay', async () => {
const wrapper = mount(Tooltip, {
props: {
content: 'content',
Expand All @@ -157,7 +157,7 @@ describe('tooltip', () => {
tooltipElement = wrapper.element.querySelector('.tooltip') as HTMLElement;
expect(tooltipElement.style.opacity).toBe('0');
})

})

})
2 changes: 1 addition & 1 deletion packages/devui-vue/devui/upload/src/single-upload.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -268,7 +268,7 @@ export default defineComponent({
{!autoUpload && !withoutBtn && (
<d-button
style='marginLeft: 8px'
btnStyle='common'
variant='common'
onClick={fileUpload}
disabled={disabled || fileUploaders[0]?.status === UploadStatus.uploading}
>
Expand Down
2 changes: 1 addition & 1 deletion packages/devui-vue/devui/upload/src/upload.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -345,7 +345,7 @@ export default defineComponent({
{!autoUpload && !withoutBtn && (
<d-button
style='marginLeft: 8px'
btnStyle='common'
variant='common'
disabled={disabled}
onClick={fileUpload}
>
Expand Down
66 changes: 33 additions & 33 deletions packages/devui-vue/docs/components/button/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@

```vue
<template>
<d-button btnStyle="common" style="margin-right: 8px">Common</d-button>
<d-button btnStyle="common" :disabled="true">Disabled</d-button>
<d-button variant="common" style="margin-right: 8px">Common</d-button>
<d-button variant="common" :disabled="true">Disabled</d-button>
</template>
```
:::
Expand All @@ -34,26 +34,26 @@
:::demo
```vue
<template>
<d-button btnStyle="primary" bsPosition="left">Left</d-button>
<d-button btnStyle="common" bsPosition="right">Right</d-button>
<d-button variant="primary" bsPosition="left">Left</d-button>
<d-button variant="common" bsPosition="right">Right</d-button>
</template>
```
:::



### 按钮风格
### 按钮形态
用于给按钮增加不同的使用场景。
:::demo
```vue
<template>
<div class="flex flex-col space-y-xs">
<d-button btnStyle="primary" type="submit">主要按钮</d-button>
<d-button btnStyle="common" type="submit">通用按钮</d-button>
<d-button btnStyle="text" type="submit">文本按钮</d-button>
<d-button btnStyle="text-dark" type="submit">文本（暗色）按钮</d-button>
<d-button btnStyle="success" type="submit">成功按钮</d-button>
<d-button btnStyle="warning" type="submit">警告按钮</d-button>
<d-button variant="primary" type="submit">主要按钮</d-button>
<d-button variant="common" type="submit">通用按钮</d-button>
<d-button variant="text" type="submit">文本按钮</d-button>
<d-button variant="text-dark" type="submit">文本（暗色）按钮</d-button>
<d-button variant="success" type="submit">成功按钮</d-button>
<d-button variant="warning" type="submit">警告按钮</d-button>
</div>
</template>
```
Expand All @@ -63,9 +63,9 @@
:::demo
```vue
<template>
<d-button btnStyle="text" style="margin-right: 20px">Text</d-button>
<d-button btnStyle="text-dark" style="margin-right: 20px">Text dark</d-button>
<d-button btnStyle="text" :disabled="true">Disabled</d-button>
<d-button variant="text" style="margin-right: 20px">Text</d-button>
<d-button variant="text-dark" style="margin-right: 20px">Text dark</d-button>
<d-button variant="text" :disabled="true">Disabled</d-button>
</template>
```
:::
Expand Down Expand Up @@ -108,8 +108,8 @@
:::demo
```vue
<template>
<d-button btnStyle="primary" :bordered="true" :autofocus="true" style="margin-right: 8px"> Confirm </d-button>
<d-button btnStyle="common"> Cancel </d-button>
<d-button variant="primary" :bordered="true" :autofocus="true" style="margin-right: 8px"> Confirm </d-button>
<d-button variant="common"> Cancel </d-button>
</template>
```
:::
Expand All @@ -120,37 +120,37 @@
```vue
<template>
<div class="mb-l">
<d-button icon="add" btnStyle="primary"> New </d-button>
<d-button icon="filter" btnStyle="common"> Filter </d-button>
<d-button icon="add" variant="primary"> New </d-button>
<d-button icon="filter" variant="common"> Filter </d-button>
</div>
<div class="mb-l">
<d-button icon="add" btnStyle="primary" :disabled="true"> New(disabled) </d-button>
<d-button icon="filter" btnStyle="common" :disabled="true"> Filter(disabled) </d-button>
<d-button icon="add" variant="primary" :disabled="true"> New(disabled) </d-button>
<d-button icon="filter" variant="common" :disabled="true"> Filter(disabled) </d-button>
</div>
<div class="mb-l">
<d-button icon="connect" btnStyle="text-dark" style="margin-right: 4px"> Link </d-button>
<d-button icon="run" btnStyle="text-dark"> Run </d-button>
<d-button icon="connect" variant="text-dark" style="margin-right: 4px"> Link </d-button>
<d-button icon="run" variant="text-dark"> Run </d-button>
</div>
<div class="mb-l">
<d-button class="mr-xs" icon="connect" btnStyle="text-dark" style="margin-right: 4px" :disabled="true"> Link(disabled) </d-button>
<d-button class="mr-xs" icon="run" btnStyle="text-dark" :disabled="true"> Run(disabled) </d-button>
<d-button class="mr-xs" icon="connect" variant="text-dark" style="margin-right: 4px" :disabled="true"> Link(disabled) </d-button>
<d-button class="mr-xs" icon="run" variant="text-dark" :disabled="true"> Run(disabled) </d-button>
</div>
<div class="mb-l">
<d-button class="mr-xs" icon="add" btnStyle="text-dark" title="add"></d-button>
<d-button class="mr-xs" icon="delete" btnStyle="text-dark" title="delete"></d-button>
<d-button class="mr-xs" icon="add" variant="text-dark" title="add"></d-button>
<d-button class="mr-xs" icon="delete" variant="text-dark" title="delete"></d-button>
</div>
<div class="mb-l">
<d-button icon="add" btnStyle="text-dark" :disabled="true" title="add"></d-button>
<d-button icon="delete" btnStyle="text-dark" :disabled="true" title="delete"></d-button>
<d-button icon="add" variant="text-dark" :disabled="true" title="add"></d-button>
<d-button icon="delete" variant="text-dark" :disabled="true" title="delete"></d-button>
</div>
<div class="mb-l">
<d-button class="mr-xs" btnStyle="common" class="mr-xs" bsSize="xs">
<d-button class="mr-xs" variant="common" class="mr-xs" bsSize="xs">
Click me
<span class="icon-chevron-down"></span>
</d-button>
</div>
<div class="mb-l">
<d-button class="mr-xs" btnStyle="text-dark">
<d-button class="mr-xs" variant="text-dark">
Click me
<span class="icon-chevron-down"></span>
</d-button>
Expand All @@ -174,7 +174,7 @@ d-button 参数
| 参数 | 类型 | 默认 | 说明 |
| :-------: | :---------------: | :-------: | :------------------------------- |
| type | `IButtonType` | 'button' | 可选，按钮类型 |
| btnStyle | `IButtonStyle` | 'primary' | 可选，按钮风格 |
| variant | `IButtonVariant` | 'primary' | 可选，按钮的形态 |
| position | `IButtonPosition` | 'default' | 可选，按钮位置 |
| size | `IButtonSize` | 'md' | 可选，按钮大小 |
| bordered | `boolean` | false | 可选，是否有边框 |
Expand All @@ -195,9 +195,9 @@ IButtonType
type IButtonType = 'button' | 'submit' | 'reset';
```

IButtonStyle
IButtonVariant
``` typescript
type IButtonStyle = 'common' | 'primary' | 'text' | 'text-dark' | 'danger' | 'success' | 'warning';
type IButtonVariant = 'common' | 'primary' | 'text' | 'text-dark' | 'danger' | 'success' | 'warning';
```

IButtonPosition
Expand Down
Loading