From 05fe6e65914978ffb32125819c92566b1c567e65 Mon Sep 17 00:00:00 2001 From: amedora <32722363+amedora@users.noreply.github.com> Date: Thu, 20 Jun 2019 13:02:10 +0900 Subject: [PATCH] Button: add compact size (#15895) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Button: add compact size * Docs: 極小 -> 极小 --- examples/docs/en-US/button.md | 6 ++++-- examples/docs/es/button.md | 6 ++++-- examples/docs/fr-FR/button.md | 6 ++++-- examples/docs/zh-CN/button.md | 6 ++++-- packages/theme-chalk/src/button.scss | 6 ++++++ packages/theme-chalk/src/common/var.scss | 9 +++++++++ 6 files changed, 31 insertions(+), 8 deletions(-) diff --git a/examples/docs/en-US/button.md b/examples/docs/en-US/button.md index 9c00fff0e..a3dbf849a 100644 --- a/examples/docs/en-US/button.md +++ b/examples/docs/en-US/button.md @@ -132,7 +132,7 @@ Click the button to load data, then the button displays a loading state. Besides default size, Button component provides three additional sizes for you to choose among different scenarios. -:::demo Use attribute `size` to set additional sizes with `medium`, `small` or `mini`. +:::demo Use attribute `size` to set additional sizes with `medium`, `small`, `mini` or `compact`. ```html @@ -140,12 +140,14 @@ Besides default size, Button component provides three additional sizes for you t Medium Small Mini + Compact Default Medium Small Mini + Compact ``` ::: @@ -153,7 +155,7 @@ Besides default size, Button component provides three additional sizes for you t ### Attributes | Attribute | Description | Type | Accepted values | Default | |---------- |-------- |---------- |------------- |-------- | -| size | button size | string | medium / small / mini | — | +| size | button size | string | medium / small / mini / compact | — | | 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 | diff --git a/examples/docs/es/button.md b/examples/docs/es/button.md index 3cc87a857..d62ae5805 100644 --- a/examples/docs/es/button.md +++ b/examples/docs/es/button.md @@ -132,7 +132,7 @@ Cuando se hace clic en un botón para descargar datos, el botón muestra un esta Además del tamaño por defecto, el componente Button provee tres tamaños adicionales para utilizar en diferentes escenarios. -:::demo Use el atributo `size` para setear tamaños adicionales con `medium`, `small` o `mini`. +:::demo Use el atributo `size` para setear tamaños adicionales con `medium`, `small`, `mini` o `compact`. ```html @@ -140,12 +140,14 @@ Además del tamaño por defecto, el componente Button provee tres tamaños adici Medium Small Mini + Compact Default Medium Small Mini + Compact ``` ::: @@ -153,7 +155,7 @@ Además del tamaño por defecto, el componente Button provee tres tamaños adici ### Atributos | Atributo | Descripción | Tipo | Valores aceptados | Por defecto | | ----------- | --------------------------------------------- | ------- | -------------------------------------------------- | ----------- | -| size | tamaño del botón | string | medium / small / mini | — | +| size | tamaño del botón | string | medium / small / mini / compact | — | | type | tipo de botón | string | primary / success / warning / danger / info / text | — | | plain | determinar si es o no un botón plano | boolean | — | false | | round | determinar si es o no un botón redondo | boolean | — | false | diff --git a/examples/docs/fr-FR/button.md b/examples/docs/fr-FR/button.md index 7ab86cb07..c01f42e37 100644 --- a/examples/docs/fr-FR/button.md +++ b/examples/docs/fr-FR/button.md @@ -132,7 +132,7 @@ Cliquez sur le bouton pour charger des données et il affichera un état de char En plus de la taille par défaut, le composant Button fournit trois tailles supplémentaires pour différents scénarios. -:::demo Utilisez l'attribut `size` pour choisir d'autres tailles parmi `medium`, `small` ou `mini`. +:::demo Utilisez l'attribut `size` pour choisir d'autres tailles parmi `medium`, `small`, `mini` ou `compact`. ```html @@ -140,12 +140,14 @@ En plus de la taille par défaut, le composant Button fournit trois tailles supp Medium Small Mini + Compact Défaut Medium Small Mini + Compact ``` ::: @@ -153,7 +155,7 @@ En plus de la taille par défaut, le composant Button fournit trois tailles supp ### Attributs | Attribut | Description | Type | Valeurs acceptées | Défaut | |---------- |-------- |---------- |------------- |-------- | -| size | Taille du bouton. | string | medium / small / mini | — | +| size | Taille du bouton. | string | medium / small / mini / compact | — | | type | Type du bouton. | string | primary / success / warning / danger / info / text | — | | plain | Détermine si le bouton est plein. | boolean | — | false | | round | Détermine si le bouton est arrondi. | boolean | — | false | diff --git a/examples/docs/zh-CN/button.md b/examples/docs/zh-CN/button.md index 37364aebc..b43c7268e 100644 --- a/examples/docs/zh-CN/button.md +++ b/examples/docs/zh-CN/button.md @@ -133,7 +133,7 @@ Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。 -:::demo 额外的尺寸：`medium`、`small`、`mini`，通过设置`size`属性来配置它们。 +:::demo 额外的尺寸：`medium`、`small`、`mini`、`compact`，通过设置`size`属性来配置它们。 ```html @@ -141,12 +141,14 @@ Button 组件提供除了默认值以外的三种尺寸，可以在不同场景 中等按钮 小型按钮 超小按钮 + 極小按钮 默认按钮 中等按钮 小型按钮 超小按钮 + 极小按钮 ``` ::: @@ -154,7 +156,7 @@ Button 组件提供除了默认值以外的三种尺寸，可以在不同场景 ### Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------- |---------- |------------- |-------- | -| size | 尺寸 | string | medium / small / mini | — | +| size | 尺寸 | string | medium / small / mini / compact | — | | type | 类型 | string | primary / success / warning / danger / info / text | — | | plain | 是否朴素按钮 | boolean | — | false | | round | 是否圆角按钮 | boolean | — | false | diff --git a/packages/theme-chalk/src/button.scss b/packages/theme-chalk/src/button.scss index 52c8767d9..e7c208636 100644 --- a/packages/theme-chalk/src/button.scss +++ b/packages/theme-chalk/src/button.scss @@ -154,6 +154,12 @@ padding: $--button-mini-padding-vertical; } } + @include m(compact) { + @include button-size($--button-compact-padding-vertical, $--button-compact-padding-horizontal, $--button-compact-font-size, $--button-compact-border-radius); + @include when(circle) { + padding: $--button-compact-padding-vertical; + } + } @include m(text) { border-color: transparent; color: $--color-primary; diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss index 38550c03e..a27f6d772 100644 --- a/packages/theme-chalk/src/common/var.scss +++ b/packages/theme-chalk/src/common/var.scss @@ -534,6 +534,7 @@ $--button-small-border-radius: #{$--border-radius-base - 1} !default; $--button-small-padding-vertical: 9px !default; /// padding||Spacing|3 $--button-small-padding-horizontal: 15px !default; + /// fontSize||Font|1 $--button-mini-font-size: 12px !default; $--button-mini-border-radius: #{$--border-radius-base - 1} !default; @@ -542,6 +543,14 @@ $--button-mini-padding-vertical: 7px !default; /// padding||Spacing|3 $--button-mini-padding-horizontal: 15px !default; +/// fontSize||Font|1 +$--button-compact-font-size: 12px !default; +$--button-compact-border-radius: #{$--border-radius-base - 1} !default; +/// padding||Spacing|3 +$--button-compact-padding-vertical: 5px !default; +/// padding||Spacing|3 +$--button-compact-padding-horizontal: 12px !default; + /// color||Color|0 $--button-default-font-color: $--color-text-regular !default; /// color||Color|0