From f4041694621ee464cfbd985ef5257067b0e4edd7 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 1/3] 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 9c00fff0eb..a3dbf849aa 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 3cc87a857f..d62ae58053 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 50dd8a3b8d..b26ff08674 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 37364aebc3..b43c7268e4 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 52c8767d94..e7c2086362 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 e499b886ec..7da6e91a76 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 From b2ec0d5623f26172b391631f765e81e9daed26c9 Mon Sep 17 00:00:00 2001 From: Zhi Cun Date: Thu, 20 Jun 2019 13:58:56 +0800 Subject: [PATCH 2/3] Button: Revert adding compact size This reverts commit 05fe6e65914978ffb32125819c92566b1c567e65. --- 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, 8 insertions(+), 31 deletions(-) diff --git a/examples/docs/en-US/button.md b/examples/docs/en-US/button.md index a3dbf849aa..9c00fff0eb 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`, `mini` or `compact`. +:::demo Use attribute `size` to set additional sizes with `medium`, `small` or `mini`. ```html @@ -140,14 +140,12 @@ Besides default size, Button component provides three additional sizes for you t Medium Small Mini - Compact Default Medium Small Mini - Compact ``` ::: @@ -155,7 +153,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 / compact | — | +| size | button size | string | medium / small / mini | — | | 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 d62ae58053..3cc87a857f 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`, `mini` o `compact`. +:::demo Use el atributo `size` para setear tamaños adicionales con `medium`, `small` o `mini`. ```html @@ -140,14 +140,12 @@ Además del tamaño por defecto, el componente Button provee tres tamaños adici Medium Small Mini - Compact Default Medium Small Mini - Compact ``` ::: @@ -155,7 +153,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 / compact | — | +| size | tamaño del botón | string | medium / small / mini | — | | 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 b26ff08674..50dd8a3b8d 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`, `mini` ou `compact`. +:::demo Utilisez l'attribut `size` pour choisir d'autres tailles parmi `medium`, `small` ou `mini`. ```html @@ -140,14 +140,12 @@ 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 ``` ::: @@ -155,7 +153,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 / compact | — | +| size | Taille du bouton. | string | medium / small / mini | — | | 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 b43c7268e4..37364aebc3 100644 --- a/examples/docs/zh-CN/button.md +++ b/examples/docs/zh-CN/button.md @@ -133,7 +133,7 @@ Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。 -:::demo 额外的尺寸：`medium`、`small`、`mini`、`compact`，通过设置`size`属性来配置它们。 +:::demo 额外的尺寸：`medium`、`small`、`mini`，通过设置`size`属性来配置它们。 ```html @@ -141,14 +141,12 @@ Button 组件提供除了默认值以外的三种尺寸，可以在不同场景 中等按钮 小型按钮 超小按钮 - 極小按钮 默认按钮 中等按钮 小型按钮 超小按钮 - 极小按钮 ``` ::: @@ -156,7 +154,7 @@ Button 组件提供除了默认值以外的三种尺寸，可以在不同场景 ### Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------- |---------- |------------- |-------- | -| size | 尺寸 | string | medium / small / mini / compact | — | +| size | 尺寸 | string | medium / small / mini | — | | 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 e7c2086362..52c8767d94 100644 --- a/packages/theme-chalk/src/button.scss +++ b/packages/theme-chalk/src/button.scss @@ -154,12 +154,6 @@ 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 7da6e91a76..e499b886ec 100644 --- a/packages/theme-chalk/src/common/var.scss +++ b/packages/theme-chalk/src/common/var.scss @@ -534,7 +534,6 @@ $--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; @@ -543,14 +542,6 @@ $--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 From 8e72eed3e274838ac478b323fd9aff5fb7f7f172 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BD=99=E5=90=9B=E5=BC=BA?= Date: Tue, 25 Jun 2019 18:16:35 +0800 Subject: [PATCH 3/3] Cascader: status change --- packages/cascader/src/cascader.vue | 3 +++ test/unit/specs/cascader.spec.js | 8 ++++++++ 2 files changed, 11 insertions(+) diff --git a/packages/cascader/src/cascader.vue b/packages/cascader/src/cascader.vue index 15d56edeaa..6e98c2ae10 100644 --- a/packages/cascader/src/cascader.vue +++ b/packages/cascader/src/cascader.vue @@ -300,6 +300,9 @@ export default { }, watch: { + disabled() { + this.computePresentContent(); + }, value(val) { if (!isEqual(val, this.checkedValue)) { this.checkedValue = val; diff --git a/test/unit/specs/cascader.spec.js b/test/unit/specs/cascader.spec.js index 97cab396f2..d0d4b7d217 100644 --- a/test/unit/specs/cascader.spec.js +++ b/test/unit/specs/cascader.spec.js @@ -50,6 +50,7 @@ const options = [{ const getMenus = el => el.querySelectorAll('.el-cascader-menu'); const getOptions = (el, menuIndex) => getMenus(el)[menuIndex].querySelectorAll('.el-cascader-node'); const selectedValue = ['zhejiang', 'hangzhou', 'xihu']; +const getCloseButton = el => el.querySelectorAll('i.el-tag__close'); describe('Cascader', () => { let vm; @@ -242,12 +243,14 @@ describe('Cascader', () => { `, data() { return { value: [], options, + disabled: false, props: { multiple: true } @@ -258,6 +261,7 @@ describe('Cascader', () => { getOptions(document.body, 0)[0].querySelector('.el-checkbox input').click(); await waitImmediate(); expect(vm.value.length).to.equal(3); + expect(getCloseButton(vm.$el).length).to.equal(3); const tags = vm.$el.querySelectorAll('.el-tag'); const closeBtn = tags[0].querySelector('.el-tag__close'); @@ -267,6 +271,10 @@ describe('Cascader', () => { await waitImmediate(); expect(vm.value.length).to.equal(2); expect(vm.$el.querySelectorAll('.el-tag').length).to.equal(2); + + vm.disabled = true; + await waitImmediate(); + expect(getCloseButton(vm.$el).length).to.equal(0); }); it('clearable in multiple mode', async() => {