Skip to content

Commit

Permalink
feat(button): update button styles (#946)
Browse files Browse the repository at this point in the history 
* feat(button): update button styles
BREAKING CHANGE: button type prop update
  • Loading branch information
@huskylengcb
huskylengcb authored Apr 22, 2021
1 parent 6ffeb87 commit 3052cfa
Show file tree
Hide file tree
Showing 24 changed files with 151 additions and 150 deletions.
2 changes: 1 addition & 1 deletion .yarnrc
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
version-git-tag false
version-commit-hooks false
version-commit-hooks false
4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,8 @@
"watch": "gio-rewire lib compile --watch"
},
"peerDependencies": {
"@gio-design/tokens": ">=21.4.2",
"@gio-design/icons": ">=21.4.0",
"@gio-design/tokens": ">=21.4.1",
"react": ">=16.8.0",
"react-dom": ">=16.8.0"
},
Expand Down Expand Up @@ -74,8 +74,8 @@
"@babel/preset-typescript": "^7.12.7",
"@commitlint/cli": "^11.0.0",
"@commitlint/config-conventional": "^12.0.1",
"@gio-design/tokens": "^21.4.2",
"@gio-design/icons": "^21.4.0",
"@gio-design/tokens": "^21.4.1",
"@storybook/addon-actions": "^6.2.3",
"@storybook/addon-controls": "^6.2.3",
"@storybook/addon-docs": "^6.2.3",
Expand Down
4 changes: 2 additions & 2 deletions src/components/button/Button.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,9 @@ import Button from '.';

> 用于与主按钮配对，以明确有两个选项；或者用于多个无主次之分的操作时。
辅助按钮 assist
链接按钮 link

> 当页面有许多高频率使用的操作时，将其用作默认按钮。如：看板页面。
> 适用于列表内添加多个内容时，如「事件分析」中「添加事件」、「fliter」中「添加过滤条件」等。
文本按钮 text

Expand Down
2 changes: 2 additions & 0 deletions src/components/button/Button.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,8 @@ export const Default = Template.bind({});
export const IconButton = IconTemplate.bind({});
export const TextButton = Template.bind({});
export const BlockButton = Template.bind({});


Default.args = {
style: {
margin: '0 20px 0 0',
Expand Down
56 changes: 28 additions & 28 deletions src/components/button/__tests__/__snapshots__/button.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4761,15 +4761,15 @@ initialize {
"namespace": "http://www.w3.org/1999/xhtml",
"next": Object {
"attribs": Object {
"class": "gio-btn gio-btn-assist gio-btn-middle",
"class": "gio-btn gio-btn-text gio-btn-middle",
"type": "button",
},
"children": Array [
Object {
"attribs": Object {},
"children": Array [
Object {
"data": "辅助按钮",
"data": "文本按钮",
"next": null,
"parent": [Circular],
"prev": null,
Expand All @@ -4790,15 +4790,15 @@ initialize {
"namespace": "http://www.w3.org/1999/xhtml",
"next": Object {
"attribs": Object {
"class": "gio-btn gio-btn-text gio-btn-small gio-btn-background-ghost",
"class": "gio-btn gio-btn-link gio-btn-small gio-btn-background-ghost",
"type": "button",
},
"children": Array [
Object {
"attribs": Object {},
"children": Array [
Object {
"data": "深色背景",
"data": "链接按钮",
"next": null,
"parent": [Circular],
"prev": null,
Expand Down Expand Up @@ -5002,15 +5002,15 @@ initialize {
"namespace": "http://www.w3.org/1999/xhtml",
"next": Object {
"attribs": Object {
"class": "gio-btn gio-btn-assist gio-btn-middle",
"class": "gio-btn gio-btn-text gio-btn-middle",
"type": "button",
},
"children": Array [
Object {
"attribs": Object {},
"children": Array [
Object {
"data": "辅助按钮",
"data": "文本按钮",
"next": null,
"parent": [Circular],
"prev": null,
Expand All @@ -5031,15 +5031,15 @@ initialize {
"namespace": "http://www.w3.org/1999/xhtml",
"next": Object {
"attribs": Object {
"class": "gio-btn gio-btn-text gio-btn-small gio-btn-background-ghost",
"class": "gio-btn gio-btn-link gio-btn-small gio-btn-background-ghost",
"type": "button",
},
"children": Array [
Object {
"attribs": Object {},
"children": Array [
Object {
"data": "深色背景",
"data": "链接按钮",
"next": null,
"parent": [Circular],
"prev": null,
Expand Down Expand Up @@ -5242,15 +5242,15 @@ initialize {
"namespace": "http://www.w3.org/1999/xhtml",
"next": Object {
"attribs": Object {
"class": "gio-btn gio-btn-assist gio-btn-middle",
"class": "gio-btn gio-btn-text gio-btn-middle",
"type": "button",
},
"children": Array [
Object {
"attribs": Object {},
"children": Array [
Object {
"data": "辅助按钮",
"data": "文本按钮",
"next": null,
"parent": [Circular],
"prev": null,
Expand All @@ -5271,15 +5271,15 @@ initialize {
"namespace": "http://www.w3.org/1999/xhtml",
"next": Object {
"attribs": Object {
"class": "gio-btn gio-btn-text gio-btn-small gio-btn-background-ghost",
"class": "gio-btn gio-btn-link gio-btn-small gio-btn-background-ghost",
"type": "button",
},
"children": Array [
Object {
"attribs": Object {},
"children": Array [
Object {
"data": "深色背景",
"data": "链接按钮",
"next": null,
"parent": [Circular],
"prev": null,
Expand Down Expand Up @@ -5504,15 +5504,15 @@ initialize {
"namespace": "http://www.w3.org/1999/xhtml",
"next": Object {
"attribs": Object {
"class": "gio-btn gio-btn-assist gio-btn-middle",
"class": "gio-btn gio-btn-text gio-btn-middle",
"type": "button",
},
"children": Array [
Object {
"attribs": Object {},
"children": Array [
Object {
"data": "辅助按钮",
"data": "文本按钮",
"next": null,
"parent": [Circular],
"prev": null,
Expand All @@ -5533,15 +5533,15 @@ initialize {
"namespace": "http://www.w3.org/1999/xhtml",
"next": Object {
"attribs": Object {
"class": "gio-btn gio-btn-text gio-btn-small gio-btn-background-ghost",
"class": "gio-btn gio-btn-link gio-btn-small gio-btn-background-ghost",
"type": "button",
},
"children": Array [
Object {
"attribs": Object {},
"children": Array [
Object {
"data": "深色背景",
"data": "链接按钮",
"next": null,
"parent": [Circular],
"prev": null,
Expand Down Expand Up @@ -5745,15 +5745,15 @@ initialize {
},
Object {
"attribs": Object {
"class": "gio-btn gio-btn-assist gio-btn-middle",
"class": "gio-btn gio-btn-text gio-btn-middle",
"type": "button",
},
"children": Array [
Object {
"attribs": Object {},
"children": Array [
Object {
"data": "辅助按钮",
"data": "文本按钮",
"next": null,
"parent": [Circular],
"prev": null,
Expand All @@ -5774,15 +5774,15 @@ initialize {
"namespace": "http://www.w3.org/1999/xhtml",
"next": Object {
"attribs": Object {
"class": "gio-btn gio-btn-text gio-btn-small gio-btn-background-ghost",
"class": "gio-btn gio-btn-link gio-btn-small gio-btn-background-ghost",
"type": "button",
},
"children": Array [
Object {
"attribs": Object {},
"children": Array [
Object {
"data": "深色背景",
"data": "链接按钮",
"next": null,
"parent": [Circular],
"prev": null,
Expand Down Expand Up @@ -6015,15 +6015,15 @@ initialize {
},
Object {
"attribs": Object {
"class": "gio-btn gio-btn-text gio-btn-small gio-btn-background-ghost",
"class": "gio-btn gio-btn-link gio-btn-small gio-btn-background-ghost",
"type": "button",
},
"children": Array [
Object {
"attribs": Object {},
"children": Array [
Object {
"data": "深色背景",
"data": "链接按钮",
"next": null,
"parent": [Circular],
"prev": null,
Expand Down Expand Up @@ -6087,15 +6087,15 @@ initialize {
"parent": [Circular],
"prev": Object {
"attribs": Object {
"class": "gio-btn gio-btn-assist gio-btn-middle",
"class": "gio-btn gio-btn-text gio-btn-middle",
"type": "button",
},
"children": Array [
Object {
"attribs": Object {},
"children": Array [
Object {
"data": "辅助按钮",
"data": "文本按钮",
"next": null,
"parent": [Circular],
"prev": null,
Expand Down Expand Up @@ -6316,15 +6316,15 @@ initialize {
"parent": [Circular],
"prev": Object {
"attribs": Object {
"class": "gio-btn gio-btn-text gio-btn-small gio-btn-background-ghost",
"class": "gio-btn gio-btn-link gio-btn-small gio-btn-background-ghost",
"type": "button",
},
"children": Array [
Object {
"attribs": Object {},
"children": Array [
Object {
"data": "深色背景",
"data": "链接按钮",
"next": null,
"parent": [Circular],
"prev": null,
Expand All @@ -6347,15 +6347,15 @@ initialize {
"parent": [Circular],
"prev": Object {
"attribs": Object {
"class": "gio-btn gio-btn-assist gio-btn-middle",
"class": "gio-btn gio-btn-text gio-btn-middle",
"type": "button",
},
"children": Array [
Object {
"attribs": Object {},
"children": Array [
Object {
"data": "辅助按钮",
"data": "文本按钮",
"next": null,
"parent": [Circular],
"prev": null,
Expand Down
8 changes: 4 additions & 4 deletions src/components/button/__tests__/button.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,11 +54,11 @@ describe('Testing button', () => {
<Button type="secondary" size="large">
次要按钮
</Button>
<Button type="assist" size="middle">
辅助按钮
<Button type="text" size="middle">
文本按钮
</Button>
<Button type="text" size="small" ghost>
深色背景
<Button type="link" size="small" ghost>
链接按钮
</Button>
<Button block type="primary">
块按钮
Expand Down
4 changes: 2 additions & 2 deletions src/components/button/interfaces.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { SizeType } from '../config-provider/SizeContext';

export type ButtonType = 'primary' | 'secondary' | 'assist' | 'text';
export type ButtonType = 'primary' | 'secondary' | 'link' | 'text';
export type ButtonHTMLType = 'submit' | 'button' | 'reset';

export interface BaseButtonProps {
/**
设置按钮类型，可选值为 `primary` `secondary` `assist` `text` 或者不设
设置按钮类型，可选值为 `primary` `secondary` `link` `text` 或者不设
*/
type?: ButtonType;
/**
Expand Down
17 changes: 4 additions & 13 deletions src/components/button/style/index.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,6 @@
@btn-square-size-mini: @size-field-mini;

// for compatible
// @btn-assist-color: @text-color-base;
// @btn-assist-bg: none;
// @btn-assist-border: none;

// Button styles
// -----------------------------
Expand All @@ -37,14 +34,14 @@
.btn-secondary;
}

&-assist {
.btn-assist;
}

&-text {
.btn-text;
}

&-link {
.btn-link;
}

&::before {
position: absolute;
top: -1px;
Expand Down Expand Up @@ -102,12 +99,6 @@
vertical-align: bottom !important;
}
}
&.@{btn-prefix-cls}-assist {
padding: 8px !important;
&.@{btn-prefix-cls}-mini {
padding: 5px !important;
}
}
}

&:focus > span,
Expand Down
Loading

1 comment on commit 3052cfa

@vercel
Copy link

@vercel vercel bot commented on 3052cfa Apr 22, 2021

Choose a reason for hiding this comment

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

Successfully deployed to the following URLs:

Please sign in to comment.