From a4aad5a9c0a44578e8062a8acffe68d45e009654 Mon Sep 17 00:00:00 2001 From: JeremyWuuuuu <15975785+JeremyWuuuuu@users.noreply.github.com> Date: Thu, 5 May 2022 23:53:47 +0800 Subject: [PATCH] feat(components): [button] update text button (#7515) --- .../vitepress/components/vp-subnav.vue | 8 +- docs/en-US/component/button.md | 40 ++++--- docs/examples/button/text.vue | 47 +++++++- .../button/__tests__/button.test.tsx | 12 ++ packages/components/button/src/button.ts | 3 +- packages/components/button/src/button.vue | 3 + packages/theme-chalk/src/button.scss | 105 ++++++++++-------- packages/theme-chalk/src/mixins/_button.scss | 3 +- 8 files changed, 151 insertions(+), 70 deletions(-) diff --git a/docs/.vitepress/vitepress/components/vp-subnav.vue b/docs/.vitepress/vitepress/components/vp-subnav.vue index 26e6844f68..90214f9d43 100644 --- a/docs/.vitepress/vitepress/components/vp-subnav.vue +++ b/docs/.vitepress/vitepress/components/vp-subnav.vue @@ -12,13 +12,13 @@ const { shouldShow, scrollToTop } = useBackTop()
- {{ 'Back to top' }}{{ 'Back to top' }}
diff --git a/docs/en-US/component/button.md b/docs/en-US/component/button.md index ec8ff3bcb4..d7acaae93b 100644 --- a/docs/en-US/component/button.md +++ b/docs/en-US/component/button.md @@ -27,6 +27,16 @@ button/disabled ## Text Button +:::tip + +Text button has been upgraded with a new design since 2.2.0 , if you want to use the +previous version like button, you might want to check [Link](./link.md#basic) out. + +The API is also updated, because the `type` attribute also represents the button's style. So we have to make a new API +`text: boolean` for text button. + +::: + Buttons without border and background. :::demo @@ -99,20 +109,22 @@ button/custom ## Button Attributes -| Attribute | Description | Type | Accepted Values | Default | -| ----------------- | ----------------------------------------------------------- | ------------------ | -------------------------------------------------- | ------- | -| size | button size | string | large / default /small | — | -| type | button type | string | primary / success / warning / danger / info / text | — | -| plain | determine whether it's a plain button | boolean | — | false | -| round | determine whether it's a round button | boolean | — | false | -| circle | determine whether it's a circle button | boolean | — | false | -| loading | determine whether it's loading | boolean | — | false | -| loading-icon | customize loading icon component | string / Component | — | Loading | -| disabled | disable the button | boolean | — | false | -| icon | icon component | string / Component | — | — | -| autofocus | same as native button's `autofocus` | boolean | — | false | -| native-type | same as native button's `type` | string | button / submit / reset | button | -| auto-insert-space | automatically insert a space between two chinese characters | boolean | | — | +| Attribute | Description | Type | Accepted Values | Default | +| ----------------------------------- | --------------------------------------------------------------- | ------------------ | ------------------------------------------------------------- | ------- | +| size | button size | string | large / default /small | — | +| type | button type | string | primary / success / warning / danger / info / text | — | +| plain | determine whether it's a plain button | boolean | — | false | +| text | determine whether it's a text button | boolean | — | false | +| bg | determine whether the text button background color is always on | boolean | — | false | +| round | determine whether it's a round button | boolean | — | false | +| circle | determine whether it's a circle button | boolean | — | false | +| loading | determine whether it's loading | boolean | — | false | +| loading-icon | customize loading icon component | string / Component | — | Loading | +| disabled | disable the button | boolean | — | false | +| icon | icon component | string / Component | — | — | +| autofocus | same as native button's `autofocus` | boolean | — | false | +| native-type | same as native button's `type` | string | button / submit / reset | button | +| auto-insert-space | automatically insert a space between two chinese characters | boolean | | — | ## Button Slots diff --git a/docs/examples/button/text.vue b/docs/examples/button/text.vue index 41541b8b62..cf35a5b31a 100644 --- a/docs/examples/button/text.vue +++ b/docs/examples/button/text.vue @@ -1,4 +1,47 @@ + + diff --git a/packages/components/button/__tests__/button.test.tsx b/packages/components/button/__tests__/button.test.tsx index 24dbd69dbb..8cbe0076ce 100644 --- a/packages/components/button/__tests__/button.test.tsx +++ b/packages/components/button/__tests__/button.test.tsx @@ -60,6 +60,18 @@ describe('Button.vue', () => { expect(wrapper.classes()).toContain('is-circle') }) + it('text', async () => { + const wrapper = mount(Button, { + props: { text: true }, + }) + + expect(wrapper.classes()).toContain('is-text') + await wrapper.setProps({ + bg: true, + }) + expect(wrapper.classes()).toContain('is-has-bg') + }) + test('render text', () => { const wrapper = mount(Button, { slots: { diff --git a/packages/components/button/src/button.ts b/packages/components/button/src/button.ts index f91bb3a045..8535c2b45c 100644 --- a/packages/components/button/src/button.ts +++ b/packages/components/button/src/button.ts @@ -11,7 +11,6 @@ export const buttonTypes = [ 'warning', 'info', 'danger', - 'text', '', ] as const export const buttonNativeTypes = ['button', 'submit', 'reset'] as const @@ -39,6 +38,8 @@ export const buttonProps = buildProps({ default: () => Loading, }, plain: Boolean, + text: Boolean, + bg: Boolean, autofocus: Boolean, round: Boolean, circle: Boolean, diff --git a/packages/components/button/src/button.vue b/packages/components/button/src/button.vue index 6ea9200887..bb577b2c73 100644 --- a/packages/components/button/src/button.vue +++ b/packages/components/button/src/button.vue @@ -10,7 +10,10 @@ ns.is('plain', plain), ns.is('round', round), ns.is('circle', circle), + ns.is('text', text), + ns.is('has-bg', bg), ]" + :aria-disabled="_disabled || loading" :disabled="_disabled || loading" :autofocus="autofocus" :type="nativeType" diff --git a/packages/theme-chalk/src/button.scss b/packages/theme-chalk/src/button.scss index 03aef716d0..a08bbf4a82 100644 --- a/packages/theme-chalk/src/button.scss +++ b/packages/theme-chalk/src/button.scss @@ -30,11 +30,7 @@ $button-icon-span-gap: map.merge( height: map.get($input-height, 'default'); white-space: nowrap; cursor: pointer; - background-color: getCssVar('button', 'bg-color'); - border: getCssVar('border'); - border-color: getCssVar('button', 'border-color'); color: getCssVar('button', 'text-color'); - -webkit-appearance: none; text-align: center; box-sizing: border-box; outline: none; @@ -42,6 +38,28 @@ $button-icon-span-gap: map.merge( font-weight: getCssVar('button', 'font-weight'); user-select: none; vertical-align: middle; + -webkit-appearance: none; + + &:not(.is-text) { + background-color: getCssVar('button', 'bg-color'); + border: getCssVar('border'); + border-color: getCssVar('button', 'border-color'); + + &:hover, + &:focus { + color: getCssVar('button', 'hover', 'text-color'); + border-color: getCssVar('button', 'hover', 'border-color'); + background-color: getCssVar('button', 'hover', 'bg-color'); + outline: none; + } + + &:active { + color: getCssVar('button', 'active', 'text-color'); + border-color: getCssVar('button', 'active', 'border-color'); + background-color: getCssVar('button', 'active', 'bg-color'); + outline: none; + } + } > span { display: inline-flex; @@ -59,21 +77,6 @@ $button-icon-span-gap: map.merge( map.get($button-border-radius, 'default') ); - &:hover, - &:focus { - color: getCssVar('button', 'hover', 'text-color'); - border-color: getCssVar('button', 'hover', 'border-color'); - background-color: getCssVar('button', 'hover', 'bg-color'); - outline: none; - } - - &:active { - color: getCssVar('button', 'active', 'text-color'); - border-color: getCssVar('button', 'active', 'border-color'); - background-color: getCssVar('button', 'active', 'bg-color'); - outline: none; - } - &::-moz-focus-inner { border: 0; } @@ -93,11 +96,11 @@ $button-icon-span-gap: map.merge( ('color', 'primary') ); @include css-var-from-global( - ('button', 'hover-bg-color'), + ('button', 'hover', 'bg-color'), ('fill-color', 'blank') ); @include css-var-from-global( - ('button', 'hover-border-color'), + ('button', 'hover', 'border-color'), ('color', 'primary') ); } @@ -147,7 +150,39 @@ $button-icon-span-gap: map.merge( padding: map.get($button-padding-vertical, 'default') - $button-border-width; } - @include e(text) { + @include when(text) { + color: getCssVar('button', 'text-color'); + border: 0 solid transparent; + background-color: transparent; + + @include when(disabled) { + color: getCssVar('button', 'disabled', 'text-color'); + background-color: transparent !important; + } + + &:not(.is-disabled) { + &:hover, + &:focus { + background-color: getCssVar('fill-color', 'light'); + } + + &:active { + background-color: getCssVar('fill-color'); + } + + @include when(has-bg) { + background-color: getCssVar('fill-color', 'light'); + + &:hover { + background-color: getCssVar('fill-color'); + } + + &:active { + background-color: getCssVar('fill-color', 'dark'); + } + } + } + @include m(expand) { letter-spacing: 0.3em; margin-right: -0.3em; @@ -188,30 +223,4 @@ $button-icon-span-gap: map.merge( } } } - - @include m(text) { - border-color: transparent; - color: getCssVar('color', 'primary'); - background: transparent; - padding-left: 0; - padding-right: 0; - - &:hover, - &:focus { - color: getCssVar('color', 'primary', 'light-3'); - border-color: transparent; - background-color: transparent; - } - &:active { - color: getCssVar('color', 'primary', 'dark-2'); - border-color: transparent; - background-color: transparent; - } - - &.is-disabled, - &.is-disabled:hover, - &.is-disabled:focus { - border-color: transparent; - } - } } diff --git a/packages/theme-chalk/src/mixins/_button.scss b/packages/theme-chalk/src/mixins/_button.scss index ba4f817a0b..4088b214f9 100644 --- a/packages/theme-chalk/src/mixins/_button.scss +++ b/packages/theme-chalk/src/mixins/_button.scss @@ -130,7 +130,8 @@ } } - &.is-plain { + &.is-plain, + &.is-text { @include button-plain($type); } }