From 6e51fbdbefcb9e4771814006fc9b7034271c7589 Mon Sep 17 00:00:00 2001 From: liuzaijiang <530604689@qq.com> Date: Tue, 1 Mar 2022 20:10:38 +0800 Subject: [PATCH] feat(comp: button): add xs and lg sizes --- .../button/__tests__/buttonGroup.spec.ts | 6 +- packages/components/button/docs/Index.zh.md | 29 ++++- packages/components/button/src/Button.tsx | 4 +- packages/components/button/src/types.ts | 6 +- packages/components/button/style/index.less | 13 ++- packages/components/button/style/mixin.less | 107 ++++++++++++------ .../button/style/themes/default.variable.less | 31 ++++- .../components/config/src/defaultConfig.ts | 3 + packages/components/config/src/types.ts | 6 + .../components/pagination/docs/Index.zh.md | 2 +- .../style/themes/default.variable.less | 2 +- packages/components/style/variable/index.less | 1 + packages/components/style/variable/width.less | 5 + 13 files changed, 158 insertions(+), 57 deletions(-) create mode 100644 packages/components/style/variable/width.less diff --git a/packages/components/button/__tests__/buttonGroup.spec.ts b/packages/components/button/__tests__/buttonGroup.spec.ts index f2d07b09d..603bc8c68 100644 --- a/packages/components/button/__tests__/buttonGroup.spec.ts +++ b/packages/components/button/__tests__/buttonGroup.spec.ts @@ -41,12 +41,12 @@ describe('ButtonGroup', () => { const wrapper = mount(TestComponent) expect(wrapper.findAll('.ix-button-lg').length).toBe(1) - expect(wrapper.findAll('.ix-button-sm').length).toBe(0) + expect(wrapper.findAll('.ix-button-md').length).toBe(3) - await wrapper.setProps({ size: 'sm' }) + await wrapper.setProps({ size: 'xl' }) expect(wrapper.findAll('.ix-button-lg').length).toBe(1) - expect(wrapper.findAll('.ix-button-sm').length).toBe(3) + expect(wrapper.findAll('.ix-button-xl').length).toBe(3) }) test('shape work', async () => { diff --git a/packages/components/button/docs/Index.zh.md b/packages/components/button/docs/Index.zh.md index cbaab6801..17b02b823 100644 --- a/packages/components/button/docs/Index.zh.md +++ b/packages/components/button/docs/Index.zh.md @@ -45,15 +45,26 @@ subtitle: 按钮 | `@button-zindex` | `@zindex-l1-1` | - | - | | `@button-font-weight` | `@font-weight-md` | - | - | | `@button-line-height` | `@line-height-base` | - | - | -| `@button-height-sm` | `@height-sm` | - | - | +| `@button-height-xs` | `@height-sm` | - | - | +| `@button-height-sm` | `@height-md` | - | - | | `@button-height-md` | `@height-md` | - | - | | `@button-height-lg` | `@height-lg` | - | - | -| `@button-font-size-sm` | `@font-size-md` | - | - | +| `@button-height-xl` | `@height-xl` | - | - | +| `@button-min-width-xs` | `@width-xs` | - | - | +| `@button-min-width-sm` | `@width-sm` | - | - | +| `@button-min-width-md` | `@width-md` | - | - | +| `@button-min-width-lg` | `@width-lg` | - | - | +| `@button-min-width-xl` | `@width-xl` | - | - | +| `@button-font-size-xs` | `@font-size-xs` | - | - | +| `@button-font-size-sm` | `@font-size-sm` | - | - | | `@button-font-size-md` | `@font-size-md` | - | - | -| `@button-font-size-lg` | `@font-size-lg` | - | - | -| `@button-padding-sm` | `@spacing-sm` | - | - | -| `@button-padding-md` | `@spacing-md` | - | - | -| `@button-padding-lg` | `@spacing-lg` | - | - | +| `@button-font-size-lg` | `@font-size-md` | - | - | +| `@button-font-size-xl` | `@font-size-lg` | - | - | +| `@button-padding-xs` | `@spacing-sm` | - | - | +| `@button-padding-sm` | `@spacing-md` | - | - | +| `@button-padding-md` | `@spacing-lg` | - | - | +| `@button-padding-lg` | `@spacing-xl` | - | - | +| `@button-padding-xl` | `@spacing-2xl` | - | - | | `@button-icon-margin-left` | `@spacing-xs` | - | - | | `@button-border-style` | `@border-style` | - | - | | `@button-border-size` | `@border-width-sm` | - | - | @@ -65,6 +76,9 @@ subtitle: 按钮 | `@button-primary` | `@color-white` | - | - | | `@button-primary-background-color` | `@color-primary` | - | - | | `@button-primary-border-color` | `@color-primary` | - | - | +| `@button-primary-loading-color` | `@color-white` | - | - | +| `@button-primary-loading-background-color` | `@color-primary-l10` | - | - | +| `@button-primary-loading-border` | `@color-primary-l10` | - | - | | `@button-primary-text-shadow` | `0 -1px 0 rgba(0, 0, 0, 0.15)` | - | - | | `@button-primary-box-shadow` | `0 2px 0 rgba(0, 0, 0, 0.045)` | - | - | | `@button-default-color` | `@text-color` | - | - | @@ -77,8 +91,11 @@ subtitle: 按钮 | `@button-danger-active-color` | `@color-error-d10` | - | - | | `@button-danger-active-border-color` | `@color-error-d10` | - | - | | `@button-danger-background-color` | `@color-error` | - | - | +| `@button-loading-color` | `@color-graphite` | - | - | | `@button-ghost-color` | `@background-color-component` | - | - | | `@button-ghost-background-color` | `transparent` | - | - | +| `@button-ghost-hover-background-color` | `rgba(255,255,255,0.20)` | - | - | +| `@button-ghost-disabled-background-color` | `rgba(255,255,255,0.40)` | - | - | | `@button-ghost-border-color` | `@background-color-component` | - | - | | `@button-link-color` | `@color-primary` | - | - | | `@button-link-hover-color` | `@color-primary-l10` | - | - | diff --git a/packages/components/button/src/Button.tsx b/packages/components/button/src/Button.tsx index 745e4f513..decaca45f 100644 --- a/packages/components/button/src/Button.tsx +++ b/packages/components/button/src/Button.tsx @@ -22,12 +22,12 @@ export default defineComponent({ setup(props, { slots }) { const common = useGlobalConfig('common') const mergedPrefixCls = computed(() => `${common.prefixCls}-button`) - + const config = useGlobalConfig('button') const groupProps = inject(buttonToken, {}) const formContext = inject(FORM_TOKEN, null) const mode = computed(() => props.mode ?? groupProps.mode ?? 'default') - const size = computed(() => props.size ?? groupProps.size ?? formContext?.size.value ?? 'md') + const size = computed(() => props.size ?? groupProps.size ?? formContext?.size.value ?? config.size) const classes = computed(() => { const { block, danger, disabled, ghost, loading, icon, shape = groupProps.shape } = props diff --git a/packages/components/button/src/types.ts b/packages/components/button/src/types.ts index c88038899..63397f19e 100644 --- a/packages/components/button/src/types.ts +++ b/packages/components/button/src/types.ts @@ -12,7 +12,7 @@ import { IxPropTypes } from '@idux/cdk/utils' export type ButtonMode = 'primary' | 'default' | 'dashed' | 'text' | 'link' export type ButtonShape = 'circle' | 'round' -export type ButtonSize = 'lg' | 'md' | 'sm' +export type ButtonSize = 'lg' | 'xl' | 'md' | 'sm' | 'xs' export type ButtonType = 'button' | 'submit' | 'reset' export const buttonProps = { @@ -21,7 +21,7 @@ export const buttonProps = { ghost: IxPropTypes.bool, disabled: IxPropTypes.bool, loading: IxPropTypes.bool, - size: IxPropTypes.oneOf(['lg', 'md', 'sm']), + size: IxPropTypes.oneOf(['lg', 'xl', 'md', 'sm', 'xs']), shape: IxPropTypes.oneOf(['circle', 'round']), block: IxPropTypes.bool, icon: IxPropTypes.string, @@ -37,7 +37,7 @@ export type ButtonInstance = InstanceType> export const buttonGroupProps = { mode: IxPropTypes.oneOf(['primary', 'default', 'dashed', 'text', 'link']), - size: IxPropTypes.oneOf(['lg', 'md', 'sm']), + size: IxPropTypes.oneOf(['lg', 'xl', 'md', 'sm', 'xs']), shape: IxPropTypes.oneOf(['circle', 'round']), } diff --git a/packages/components/button/style/index.less b/packages/components/button/style/index.less index 105582f85..1b2b9860e 100644 --- a/packages/components/button/style/index.less +++ b/packages/components/button/style/index.less @@ -58,6 +58,17 @@ &&-loading { position: relative; + &.@{button-prefix} { + background-color: @button-default-background-color; + color: @button-loading-color; + + &-primary { + background-color: @button-primary-loading-background-color; + border-color: @button-primary-loading-border; + color: @button-primary-loading-color; + } + } + &::before { display: block; } @@ -88,7 +99,7 @@ } &-icon-only { - .button-icon-only(@button-prefix;); + .button-icon-only(@button-prefix); } &::before { diff --git a/packages/components/button/style/mixin.less b/packages/components/button/style/mixin.less index be0dc63a4..3631507ed 100644 --- a/packages/components/button/style/mixin.less +++ b/packages/components/button/style/mixin.less @@ -1,13 +1,8 @@ @button-danger-border: color(~`colorPalette('@{button-danger-background-color}', 10) `); .button-size(@height; @font-size; @spacing-horizontal; @border-radius) { - @spacing-vertical: max( - (round(((@height - @font-size * @button-line-height) / 2) * 10) / 10) - @button-border-size, - 0 - ); - height: @height; - padding: @spacing-vertical @spacing-horizontal; + padding: 0 @spacing-horizontal; font-size: @font-size; border-radius: @border-radius; } @@ -32,16 +27,16 @@ text-shadow: @button-primary-text-shadow; box-shadow: @button-primary-box-shadow; + &:focus, &:hover { - & when (@theme = default) { - .button-color(@color; ~`colorPalette('@{background}', -10) `; ~`colorPalette('@{border}', -10)`); + & when not (@theme = dark) { + .button-color(@color; ~`colorPalette('@{background}', -10) `; ~`colorPalette('@{border}', -10)` ); } } - &:focus, &:active { - & when (@theme = default) { - .button-color(@color; ~`colorPalette('@{background}', 10) `; ~`colorPalette('@{border}', 10)`); + & when not (@theme = dark) { + .button-color(@color; ~`colorPalette('@{background}', 10) `; ~`colorPalette('@{border}', 10) `); } } @@ -51,16 +46,16 @@ .button-variant-other(@color; @background; @border) { .button-color(@color; @background; @border); + &:focus, &:hover { - & when (@theme = default) { - .button-color(~`colorPalette('@{button-primary-background-color}', -10) `; @background; @button-primary-background-color); + & when not (@theme = dark) { + .button-color(~`colorPalette('@{button-primary-background-color}', -10) `; @background; ~`colorPalette('@{button-primary-border-color}', -10)`); } } - &:focus, &:active { - & when (@theme = default) { - .button-color(~`colorPalette('@{button-primary-background-color}', 10) `; @background; ~`colorPalette('@{button-primary-background-color}', 20) `); + & when not (@theme = dark) { + .button-color(~`colorPalette('@{button-primary-background-color}', 10) `; @background; ~`colorPalette('@{button-primary-background-color}', 10) `); } } .button-disabled(); @@ -69,29 +64,29 @@ .button-variant-ghost(@color; @border: @color) { text-shadow: none; + &:focus, &:hover { & when (@border = transparent) { - & when (@theme = default) { + & when not (@theme = dark) { .button-color(~`colorPalette('@{color}', -10) `; transparent; transparent); } } & when not (@border = transparent) { - & when (@theme = default) { - .button-color(~`colorPalette('@{color}', -10) `; transparent; ~`colorPalette('@{border}', -10) `); + & when not (@theme = dark) { + .button-color(@button-ghost-color; @button-ghost-hover-background-color; @button-ghost-color); } } } - &:focus, &:active { & when (@border = transparent) { - & when (@theme = default) { + & when not (@theme = dark) { .button-color(~`colorPalette('@{color}', 10) `; transparent; transparent); } } & when not(@border = transparent) { - & when (@theme = default) { - .button-color(~`colorPalette('@{color}', 10) `; transparent; ~`colorPalette('@{border}', 10) `); + & when not (@theme = dark) { + .button-color(@button-text-color; @button-default-background-color; @button-ghost-color); } } } @@ -119,7 +114,10 @@ .button() { position: relative; - display: inline-block; + display: inline-flex; + flex-wrap: nowrap; + align-items: center; + justify-content: center; font-weight: @button-font-weight; white-space: nowrap; text-align: center; @@ -145,8 +143,20 @@ box-shadow: none; } + .@{icon-prefix} { + top: 0; + } + + &-xs { + .button-size(@button-height-xs; @button-font-size-xs; @button-padding-xs; @button-border-radius); + + min-width: @button-min-width-xs; + } + &-sm { .button-size(@button-height-sm; @button-font-size-sm; @button-padding-sm; @button-border-radius); + + min-width: @button-min-width-sm; } &-md { @@ -155,6 +165,14 @@ &-lg { .button-size(@button-height-lg; @button-font-size-lg; @button-padding-lg; @button-border-radius); + + min-width: @button-min-width-lg; + } + + &-xl { + .button-size(@button-height-xl; @button-font-size-xl; @button-padding-xl; @button-border-radius); + + min-width: @button-min-width-xl; } } @@ -183,6 +201,7 @@ .button-variant-other(@button-text-color, transparent, transparent); box-shadow: none; + min-width: 0; &:hover, &:focus { @@ -203,6 +222,8 @@ .button-variant-other(@button-link-color, transparent, transparent); box-shadow: none; + padding: 0; + min-width: 0; &:hover { background: @button-link-hover-background-color; @@ -219,13 +240,13 @@ .button-danger() { .button-color(@button-danger-color, @button-default-background-color, @button-danger-border-color); + &:focus, &:hover { & when (@theme = default) { .button-color(@button-danger-hover-color, @button-default-background-color, @button-danger-hover-border-color); } } - &:focus, &:active { & when (@theme = default) { .button-color(@button-danger-active-color, @button-default-background-color, @button-danger-active-border-color); @@ -242,14 +263,16 @@ .button-variant-other(@button-danger-color, transparent, transparent); box-shadow: none; + padding: 0; + &:focus, &:hover { & when (@theme = default) { .button-color(~`colorPalette('@{button-danger-color}', -10) `; @button-text-hover-background-color; transparent); } } - &:focus, + &:active { & when (@theme = default) { .button-color(~`colorPalette('@{button-danger-color}', 10) `; fadein(@button-text-hover-background-color, 1%); transparent); @@ -263,15 +286,15 @@ box-shadow: none; + &:focus, &:hover { & when (@theme = default) { .button-color(~`colorPalette('@{button-danger-color}', -10) `; transparent; transparent); } } - &:focus, &:active { - & when (@theme = dark) { + & when (@theme = default) { .button-color(~`colorPalette('@{button-danger-color}', 10) `; transparent; transparent); } } @@ -281,7 +304,7 @@ .button-ghost() { .button-color(@button-ghost-color; @button-ghost-background-color; @button-ghost-border-color); .button-variant-ghost(@button-primary-border-color); - .button-disabled(); + .button-disabled(@button-ghost-color, @button-ghost-disabled-background-color); } .button-ghost-primary() { @@ -297,17 +320,22 @@ } .button-round(@buttonPrefix) { + .button-size(@button-height-md; @button-font-size-md; @button-height-md / 2; @button-height-md); + &.@{buttonPrefix}-xs { + .button-size(@button-height-xs; @button-font-size-xs; @button-height-xs / 2; @button-height-xs); + } &.@{buttonPrefix}-sm { .button-size(@button-height-sm; @button-font-size-sm; @button-height-sm / 2; @button-height-sm); } - &.@{buttonPrefix}-md { .button-size(@button-height-md; @button-font-size-md; @button-height-md / 2; @button-height-md); } - &.@{buttonPrefix}-lg { .button-size(@button-height-lg; @button-font-size-lg; @button-height-lg / 2; @button-height-lg); } + &.@{buttonPrefix}-xl { + .button-size(@button-height-xl; @button-font-size-xl; @button-height-xl / 2; @button-height-xl); + } } .button-circle(@buttonPrefix) { @@ -329,18 +357,29 @@ } } -.button-icon-only(@buttonPrefix;) { +.button-icon-only(@buttonPrefix) { line-height: 1; + min-width: auto; + &.@{buttonPrefix}-xs { + font-size: @button-font-size-xs + 2; + width: @button-height-xs; + padding: 0; + } &.@{buttonPrefix}-sm { font-size: @button-font-size-sm + 2; + width: @button-height-sm; } - &.@{buttonPrefix}-md { font-size: @button-font-size-md + 2; + width: @button-height-md; } - &.@{buttonPrefix}-lg { font-size: @button-font-size-lg + 2; + width: @button-height-lg; + } + &.@{buttonPrefix}-xl { + font-size: @button-font-size-xl + 2; + width: @button-height-xl; } } diff --git a/packages/components/button/style/themes/default.variable.less b/packages/components/button/style/themes/default.variable.less index 307f9fa02..1073c4761 100644 --- a/packages/components/button/style/themes/default.variable.less +++ b/packages/components/button/style/themes/default.variable.less @@ -3,17 +3,29 @@ @button-line-height: @line-height-base; -@button-height-sm: @height-sm; +@button-height-xs: @height-sm; +@button-height-sm: @height-md; @button-height-md: @height-md; @button-height-lg: @height-lg; +@button-height-xl: @height-xl; -@button-font-size-sm: @font-size-md; +@button-min-width-xs: @width-xs; +@button-min-width-sm: @width-sm; +@button-min-width-md: @width-md; +@button-min-width-lg: @width-lg; +@button-min-width-xl: @width-xl; + +@button-font-size-xs: @font-size-xs; +@button-font-size-sm: @font-size-sm; @button-font-size-md: @font-size-md; -@button-font-size-lg: @font-size-lg; +@button-font-size-lg: @font-size-md; +@button-font-size-xl: @font-size-lg; -@button-padding-sm: @spacing-sm; -@button-padding-md: @spacing-md; -@button-padding-lg: @spacing-lg; +@button-padding-xs: @spacing-sm; +@button-padding-sm: @spacing-md; +@button-padding-md: @spacing-lg; +@button-padding-lg: @spacing-xl; +@button-padding-xl: @spacing-2xl; @button-icon-margin-left: @spacing-xs; @@ -30,6 +42,9 @@ @button-primary: @color-white; @button-primary-background-color: @color-primary; @button-primary-border-color: @color-primary; +@button-primary-loading-color: @color-white; +@button-primary-loading-background-color: @color-primary-l10; +@button-primary-loading-border: @color-primary-l10; @button-primary-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); @button-primary-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045); @@ -45,8 +60,12 @@ @button-danger-active-border-color: @color-error-d10; @button-danger-background-color: @color-error; +@button-loading-color: @color-graphite; + @button-ghost-color: @background-color-component; @button-ghost-background-color: transparent; +@button-ghost-hover-background-color: rgba(255,255,255,0.20); +@button-ghost-disabled-background-color: rgba(255,255,255,0.40); @button-ghost-border-color: @background-color-component; @button-link-color: @color-primary; diff --git a/packages/components/config/src/defaultConfig.ts b/packages/components/config/src/defaultConfig.ts index dac9f9461..5301a0b1b 100644 --- a/packages/components/config/src/defaultConfig.ts +++ b/packages/components/config/src/defaultConfig.ts @@ -44,6 +44,9 @@ export const defaultConfig: GlobalConfig = { dot: false, overflowCount: 99, }, + button: { + size: 'md', + }, card: { borderless: false, hoverable: false, diff --git a/packages/components/config/src/types.ts b/packages/components/config/src/types.ts index 4418c6971..41130a0f8 100644 --- a/packages/components/config/src/types.ts +++ b/packages/components/config/src/types.ts @@ -10,6 +10,7 @@ import type { PopperPlacement, PopperTrigger } from '@idux/cdk/popper' import type { PortalTargetType } from '@idux/cdk/portal' import type { AlertType } from '@idux/components/alert' import type { AvatarShape, AvatarSize } from '@idux/components/avatar' +import type { ButtonSize } from '@idux/components/button' import type { CardSize } from '@idux/components/card' import type { DotPlacement, DotTrigger } from '@idux/components/carousel' import type { DatePickerType } from '@idux/components/date-picker/src/types' @@ -41,6 +42,7 @@ export interface GlobalConfig { avatar: AvatarConfig backTop: BackTopConfig badge: BadgeConfig + button: ButtonConfig card: CardConfig carousel: CarouselConfig checkbox: CheckboxConfig @@ -121,6 +123,10 @@ export interface BadgeConfig { overflowCount: number | string } +export interface ButtonConfig { + size: ButtonSize +} + export interface CardConfig { size: CardSize borderless: boolean diff --git a/packages/components/pagination/docs/Index.zh.md b/packages/components/pagination/docs/Index.zh.md index 70ca8c43a..9a81897b6 100644 --- a/packages/components/pagination/docs/Index.zh.md +++ b/packages/components/pagination/docs/Index.zh.md @@ -60,7 +60,7 @@ export interface PaginationItemRenderOptions { | `@pagination-item-margin-right-sm` | `@spacing-xs` | - | - | | `@pagination-item-input-width-md` | `48px` | - | - | | `@pagination-item-input-width-sm` | `40px` | - | - | -| `@pagination-item-spacing-sm` | `20px` | - | - | +| `@pagination-item-spacing-sm` | `@height-sm` | - | - | | `@pagination-item-active-color` | `@button-primary` | - | - | | `@pagination-item-active-background-color` | `@button-primary-background-color` | - | - | | `@pagination-item-hover-background-color` | `tint(@button-primary-background-color, 90%)` | - | - | diff --git a/packages/components/pagination/style/themes/default.variable.less b/packages/components/pagination/style/themes/default.variable.less index d245dc1b7..53b1f2f69 100644 --- a/packages/components/pagination/style/themes/default.variable.less +++ b/packages/components/pagination/style/themes/default.variable.less @@ -9,7 +9,7 @@ @pagination-item-margin-right-sm: @spacing-xs; @pagination-item-input-width-md: 48px; @pagination-item-input-width-sm: 40px; -@pagination-item-spacing-sm: 20px; +@pagination-item-spacing-sm: @height-sm; @pagination-item-active-color: @button-primary; @pagination-item-active-background-color: @button-primary-background-color; @pagination-item-hover-background-color: tint(@button-primary-background-color, 90%); diff --git a/packages/components/style/variable/index.less b/packages/components/style/variable/index.less index 2fd8034f1..7c533fee3 100644 --- a/packages/components/style/variable/index.less +++ b/packages/components/style/variable/index.less @@ -3,6 +3,7 @@ @import './color/color.less'; @import './font.less'; @import './height.less'; +@import './width.less'; @import './prefix.less'; @import './shadow.less'; @import './spacing.less'; diff --git a/packages/components/style/variable/width.less b/packages/components/style/variable/width.less new file mode 100644 index 000000000..ecf6b464a --- /dev/null +++ b/packages/components/style/variable/width.less @@ -0,0 +1,5 @@ +@width-xs: 56px; +@width-sm: 64px; +@width-md: 72px; +@width-lg: 120px; +@width-xl: 160px;