From 151dfd8938457ac7718c384cd2304276caa9a3e3 Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Mon, 26 Jul 2021 11:03:07 +0400
Subject: [PATCH 01/10] Move storybook styles to separated file

---
 config/storybook/index.scss |  3 ++
 config/storybook/preview.js |  1 +
 src/styles/common.scss      | 63 ++++++++++++++++++-------------------
 3 files changed, 34 insertions(+), 33 deletions(-)
 create mode 100644 config/storybook/index.scss

diff --git a/config/storybook/index.scss b/config/storybook/index.scss
new file mode 100644
index 00000000..5f7b3b62
--- /dev/null
+++ b/config/storybook/index.scss
@@ -0,0 +1,3 @@
+.sbdocs.sbdocs-preview div[id^='story--'] > * {
+  height: auto !important;
+}
diff --git a/config/storybook/preview.js b/config/storybook/preview.js
index 14c5f9bc..1d12b586 100644
--- a/config/storybook/preview.js
+++ b/config/storybook/preview.js
@@ -5,6 +5,7 @@ import { DocsPage } from '@storybook/addon-docs/blocks'
 import ElColorPicker from 'element-ui/lib/color-picker'
 
 import '../../src/styles/index.scss'
+import './index.scss'
 import mainStore from '../../src/store'
 import { ElementUIPlugin } from '../../src/plugins'
 
diff --git a/src/styles/common.scss b/src/styles/common.scss
index ed5c12c9..016330a6 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -192,11 +192,6 @@ button > span {
   position: relative;
 }
 
-// TODO: move to separate file and import to storybook
-.sbdocs.sbdocs-preview div[id^='story--'] > * {
-  height: auto !important;
-}
-
 @mixin res($key, $map: $--breakpoints) {
   @if map-has-key($map, $key) {
     @media only screen and #{inspect(map-get($map, $key))} {
@@ -222,37 +217,39 @@ button > span {
 }
 
 .el-message-box {
-  .el-message-box__header {
-    .el-message-box__title {
-      color: var(--s-color-base-content-primary);
-      font-size: var(--s-heading5-font-size);
-    }
-  }
-  .el-message-box__btns {
-    button.el-button.el-button--default.el-button--small {
-      height: $s-size-medium;
-      font-size: var(--s-font-size-small);
-      border-radius: var(--s-border-radius-mini);
-      &:hover, &:active, &:focus {
-        color: var(--s-color-theme-accent);
-        background-color: var(--s-color-base-on-accent);
-        border-color: var(--s-color-theme-accent);
+  & & {
+    &__header {
+      .el-message-box__title {
+        color: var(--s-color-base-content-primary);
+        font-size: var(--s-heading5-font-size);
       }
-      &.el-button--primary {
+    }
+    &__btns {
+      button.el-button.el-button--default.el-button--small {
+        height: $s-size-medium;
+        font-size: var(--s-font-size-small);
+        border-radius: var(--s-border-radius-mini);
         &:hover, &:active, &:focus {
-          color: var(--s-color-base-on-accent);
-        }
-        &:hover {
-          background-color: var(--s-color-theme-accent-hover);
-          border-color: var(--s-color-theme-accent-hover);
-        }
-        &:active {
-          background-color: var(--s-color-theme-accent-pressed);
-          border-color: var(--s-color-theme-accent-pressed);
+          color: var(--s-color-theme-accent);
+          background-color: var(--s-color-base-on-accent);
+          border-color: var(--s-color-theme-accent);
         }
-        &:focus {
-          background-color: var(--s-color-theme-accent-focused);
-          border-color: var(--s-color-theme-accent-focused);
+        &.el-button--primary {
+          &:hover, &:active, &:focus {
+            color: var(--s-color-base-on-accent);
+          }
+          &:hover {
+            background-color: var(--s-color-theme-accent-hover);
+            border-color: var(--s-color-theme-accent-hover);
+          }
+          &:active {
+            background-color: var(--s-color-theme-accent-pressed);
+            border-color: var(--s-color-theme-accent-pressed);
+          }
+          &:focus {
+            background-color: var(--s-color-theme-accent-focused);
+            border-color: var(--s-color-theme-accent-focused);
+          }
         }
       }
     }

From 8f9d7d56dc8e6286e9ca4049ffd8a350058a842a Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Mon, 26 Jul 2021 11:03:49 +0400
Subject: [PATCH 02/10] Remove status icon for form component

---
 src/components/Form/SForm/SForm.vue | 7 -------
 src/stories/Form/SForm.stories.ts   | 4 ----
 2 files changed, 11 deletions(-)

diff --git a/src/components/Form/SForm/SForm.vue b/src/components/Form/SForm/SForm.vue
index 613c06dc..0418a532 100644
--- a/src/components/Form/SForm/SForm.vue
+++ b/src/components/Form/SForm/SForm.vue
@@ -7,7 +7,6 @@
     :label-width="labelWidth"
     :show-message="showMessage"
     :inline-message="inlineMessage"
-    :status-icon="statusIcon"
     :validate-on-rule-change="validateOnRuleChange"
     :disabled="disabled"
     :size="size"
@@ -71,12 +70,6 @@ export default class SForm extends Vue {
    * `false` by default
    */
   @Prop({ type: Boolean, default: false }) readonly inlineMessage!: boolean
-  /**
-   * Display an icon indicating the validation result.
-   *
-   * `false` by default
-   */
-  @Prop({ type: Boolean, default: false }) readonly statusIcon!: boolean
   /**
    * Trigger validation when the `rules` property is changed.
    *
diff --git a/src/stories/Form/SForm.stories.ts b/src/stories/Form/SForm.stories.ts
index 594c1a63..ae01ad21 100644
--- a/src/stories/Form/SForm.stories.ts
+++ b/src/stories/Form/SForm.stories.ts
@@ -16,7 +16,6 @@ export const configurable = () => ({
                :disabled="disabled"
                :inline="inline"
                :show-message="showMessage"
-               :status-icon="statusIcon"
                :rules="{
                  user: [
                    { required: true, message: 'Please input user name' },
@@ -54,9 +53,6 @@ export const configurable = () => ({
     },
     showMessage: {
       default: boolean('Show Message', true)
-    },
-    statusIcon: {
-      default: boolean('Status Icon', false)
     }
   }
 })

From be82c8c96ec6f311e304d2eda36fe1ec8a949e8a Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Mon, 26 Jul 2021 11:04:48 +0400
Subject: [PATCH 03/10] Fix margin for form items without error message during
 error validation

---
 src/components/Form/SFormItem/SFormItem.vue | 9 +++++++++
 src/styles/form.scss                        | 4 +++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/Form/SFormItem/SFormItem.vue b/src/components/Form/SFormItem/SFormItem.vue
index 6e489f15..8a46cded 100644
--- a/src/components/Form/SFormItem/SFormItem.vue
+++ b/src/components/Form/SFormItem/SFormItem.vue
@@ -1,6 +1,7 @@
 <template>
   <el-form-item
     ref="formItem"
+    :class="computedClasses"
     :prop="prop"
     :label="label"
     :label-width="labelWidth"
@@ -99,6 +100,14 @@ export default class SFormItem extends Vue {
     return this.showMessage && (this.elForm || {}).showMessage
   }
 
+  get computedClasses (): Array<string> {
+    const cssClasses: Array<string> = []
+    if (this.willMessageBeShown) {
+      cssClasses.push('with-message')
+    }
+    return cssClasses
+  }
+
   get computedRules (): object {
     const rules = (this.rules || (this.elForm.rules || {})[this.prop]) as any
     if (!rules) {
diff --git a/src/styles/form.scss b/src/styles/form.scss
index fa70b9a9..b3b125ad 100644
--- a/src/styles/form.scss
+++ b/src/styles/form.scss
@@ -10,7 +10,9 @@
     color: var(--s-color-base-content-primary);
   }
   &.is-error {
-    margin-bottom: 0;
+    &.with-message {
+      margin-bottom: 0;
+    }
     > .el-form-item__content {
       > .el-form-item__error {
         margin-bottom: 6px;

From 14bd3a8bd29a956811d77db0f9b4721c4070c1e5 Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Mon, 26 Jul 2021 11:05:19 +0400
Subject: [PATCH 04/10] Remove total text property from table

---
 src/components/Table/STable/STable.vue | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/components/Table/STable/STable.vue b/src/components/Table/STable/STable.vue
index 16f5c430..b04dbdd7 100644
--- a/src/components/Table/STable/STable.vue
+++ b/src/components/Table/STable/STable.vue
@@ -27,7 +27,7 @@
     :default-sort="defaultSort"
     :tooltip-effect="tooltipTheme"
     :show-summary="showTotal"
-    :sum-text="totalText"
+    sum-text=" "
     :summary-method="totalMethod"
     :span-method="spanMethod"
     :select-on-indeterminate="selectOnIndeterminate"
@@ -206,12 +206,6 @@ export default class STable extends Mixins(SizeMixin) {
    * `false` by default
    */
   @Prop({ default: false, type: Boolean }) readonly showTotal!: boolean
-  /**
-   * Text for the total row.
-   *
-   * `"Tot"` by default
-   */
-  @Prop({ default: 'Tot', type: String }) readonly totalText!: string
   /**
    * Custom total method. `({ columns, data }) => string`
    */

From 331d1b019e357d81481fa73312b5264a794021d6 Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Mon, 26 Jul 2021 11:05:39 +0400
Subject: [PATCH 05/10] Fix table expended icon

---
 src/styles/table.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/table.scss b/src/styles/table.scss
index 5e5f7128..2bec5150 100644
--- a/src/styles/table.scss
+++ b/src/styles/table.scss
@@ -127,7 +127,7 @@
   left: 0;
   top: 0;
   > .el-icon.el-icon-arrow-right {
-    font-family: var(--s-font-family-icons);
+    font-family: var(--s-font-family-icons) !important;
     @extend .s-icon-chevron-down-rounded-16;
   }
   &--expanded {

From 5e1d28f0a8e92946126b0e251554d490f466bb5a Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Mon, 26 Jul 2021 11:06:21 +0400
Subject: [PATCH 06/10] Fix pagination colors

---
 src/styles/pagination.scss | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/styles/pagination.scss b/src/styles/pagination.scss
index ebce83c7..7f26490f 100644
--- a/src/styles/pagination.scss
+++ b/src/styles/pagination.scss
@@ -27,9 +27,6 @@
       background-color: var(--s-color-theme-accent);
       color: var(--s-color-base-on-accent);
     }
-    &:hover {
-      color: var(--s-color-theme-accent);
-    }
   }
   .btn-prev,
   .btn-next {
@@ -41,6 +38,7 @@
     }
     &:disabled {
       color: var(--s-color-base-content-quaternary);
+      background-color: transparent;
     }
   }
   @include pagination-border-radius;

From 7c9763313d509b04b7cfdccfdb4b9dc1a995f589 Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Mon, 26 Jul 2021 11:07:29 +0400
Subject: [PATCH 07/10] Fix collapse border type=internal

---
 src/styles/collapse.scss | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/styles/collapse.scss b/src/styles/collapse.scss
index baae194d..ea7c3866 100644
--- a/src/styles/collapse.scss
+++ b/src/styles/collapse.scss
@@ -13,15 +13,20 @@
 }
 .el-collapse-item:last-child {
   margin-bottom: 0;
-  .el-collapse-item__header {
-    border: none;
+  .el-collapse-item {
+    &__header {
+      border: none;
+    }
+    &__wrap {
+      border-bottom: none;
+    }
   }
 }
-.el-collapse-item__ {
-  &wrap {
+.el-collapse-item {
+  &__wrap {
     border-bottom-color: var(--s-color-base-border-secondary);
   }
-  &header {
+  &__header {
     color: var(--s-color-base-content-primary);
     border-bottom-color: var(--s-color-base-border-secondary);
     &.is-active {

From bea1dfda26250de7edce4c7b3257b4d58f73b673 Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Mon, 26 Jul 2021 11:09:41 +0400
Subject: [PATCH 08/10] Fix dropdown story columns

---
 src/stories/Dropdown/SDropdown.stories.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/stories/Dropdown/SDropdown.stories.ts b/src/stories/Dropdown/SDropdown.stories.ts
index b1bb21c6..d003813d 100644
--- a/src/stories/Dropdown/SDropdown.stories.ts
+++ b/src/stories/Dropdown/SDropdown.stories.ts
@@ -89,7 +89,7 @@ export const differentTypes = () => ({
                  </s-dropdown>
                </s-col>
                <s-col :span="12" style="margin-bottom: 20px;"><span>Different button types</span></s-col>
-               <s-col :span="3" v-for="item in buttonTypesData" :key="item.buttonType + 'withoutSplit'" style="height: 56px; margin-bottom: 20px;">
+               <s-col :xs="6" :sm="6" :md="4" :lg="3" :xl="3" v-for="item in buttonTypesData" :key="item.buttonType + 'withoutSplit'" style="height: 56px; margin-bottom: 20px;">
                  <s-dropdown
                    :type="item.type"
                    :button-type="item.buttonType"
@@ -104,7 +104,7 @@ export const differentTypes = () => ({
                  </s-dropdown>
                </s-col>
                <s-col :span="12" style="margin-bottom: 20px;"><span>Different button types with splitted button</span></s-col>
-               <s-col :span="3" v-for="item in buttonTypesData" :key="item.buttonType" style="height: 56px; margin-bottom: 20px;">
+               <s-col :xs="6" :sm="6" :md="4" :lg="3" :xl="3" v-for="item in buttonTypesData" :key="item.buttonType" style="height: 56px; margin-bottom: 20px;">
                  <s-dropdown
                    :type="item.type"
                    split-button

From b316af10558e78ee3eb04b93eca1b26b6cf9d6d4 Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Mon, 26 Jul 2021 11:10:28 +0400
Subject: [PATCH 09/10] Fix group buttons styles & dropdown buttons

---
 src/styles/button.scss | 31 +++++++++++++++++++++++--------
 1 file changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/styles/button.scss b/src/styles/button.scss
index c9d80ba7..ac246fc3 100644
--- a/src/styles/button.scss
+++ b/src/styles/button.scss
@@ -189,13 +189,28 @@ button {
     }
   }
 }
-.el-button-group .el-button.el-button--plain {
-  color: var(--s-color-base-content-primary);
-  border-color: var(--s-color-base-border-primary);
-  background-color: var(--s-color-base-on-accent);
-  &.focusing, &:hover, &.s-pressed {
-    color: var(--s-color-theme-accent);
-    background-color: var(--s-color-base-on-accent);
-    border-color: var(--s-color-theme-accent);
+.el-button-group button.el-button {
+  &.el-button {
+    &--plain {
+      color: var(--s-color-base-content-primary);
+      border-color: var(--s-color-base-border-primary);
+      background-color: var(--s-color-base-on-accent);
+      &.focusing, &:hover, &.s-pressed {
+        color: var(--s-color-theme-accent);
+        background-color: var(--s-color-base-on-accent);
+        border-color: var(--s-color-theme-accent);
+      }
+    }
+    &--primary:first-child:hover {
+      border-right-color: rgba(255, 255, 255, 0.5);
+    }
+  }
+  &:first-child {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  &:last-child {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
   }
 }

From 6a69326ba3ce422361c0b0a5b589faa724dda558 Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Mon, 26 Jul 2021 11:10:38 +0400
Subject: [PATCH 10/10] Refactor styles

---
 src/styles/breadcrumbs.scss | 38 +++++++++++++++++++------------------
 src/styles/card.scss        | 16 +++++++++-------
 src/styles/dialog.scss      | 22 +++++++++++----------
 src/styles/json-input.scss  |  2 +-
 4 files changed, 42 insertions(+), 36 deletions(-)

diff --git a/src/styles/breadcrumbs.scss b/src/styles/breadcrumbs.scss
index 3aea87e6..5bd57302 100644
--- a/src/styles/breadcrumbs.scss
+++ b/src/styles/breadcrumbs.scss
@@ -1,26 +1,28 @@
-.el-breadcrumb__separator {
-  color: var(--s-color-base-content-tertiary);
-  @include font-weight(400);
-}
-.el-breadcrumb__inner {
-  font-size: var(--s-font-size-mini);
-  color: var(--s-color-base-content-tertiary);
-  &.is-link {
+.el-breadcrumb {
+  &__separator {
     color: var(--s-color-base-content-tertiary);
     @include font-weight(400);
-    &:hover {
+  }
+  &__inner {
+    font-size: var(--s-font-size-mini);
+    color: var(--s-color-base-content-tertiary);
+    &.is-link {
+      color: var(--s-color-base-content-tertiary);
+      @include font-weight(400);
+      &:hover {
+        color: var(--s-color-theme-accent);
+      }
+    }
+    a:hover {
       color: var(--s-color-theme-accent);
     }
   }
-  a:hover {
-    color: var(--s-color-theme-accent);
-  }
-}
-.el-breadcrumb__item:last-child {
-  pointer-events: none;
-  .el-breadcrumb__inner {
-    &, &:hover, & a, & a:hover {
-      color: var(--s-color-base-content-primary);
+  &__item:last-child {
+    pointer-events: none;
+    .el-breadcrumb__inner {
+      &, &:hover, & a, & a:hover {
+        color: var(--s-color-base-content-primary);
+      }
     }
   }
 }
diff --git a/src/styles/card.scss b/src/styles/card.scss
index 17cf523b..1bc74936 100644
--- a/src/styles/card.scss
+++ b/src/styles/card.scss
@@ -12,12 +12,14 @@
       border-color: transparent;
     }
   }
-  .el-card__header {
-    border-bottom-color: transparent;
-    padding-bottom: 0;
-    text-align: left;
-  }
-  .el-card__body {
-    padding: 18px 20px;
+  .el-card {
+    &__header {
+      border-bottom-color: transparent;
+      padding-bottom: 0;
+      text-align: left;
+    }
+    &__body {
+      padding: 18px 20px;
+    }
   }
 }
diff --git a/src/styles/dialog.scss b/src/styles/dialog.scss
index 9f16603d..8c4c1cf6 100644
--- a/src/styles/dialog.scss
+++ b/src/styles/dialog.scss
@@ -21,20 +21,22 @@
   .s-border-radius-mini & {
     border-radius: var(--s-border-radius-mini);
   }
-  .el-dialog__header .el-dialog__title {
-    @include font-weight(700, true);
-  }
-  .el-dialog__title {
-    font-size: var(--s-heading5-font-size);
-    color: var(--s-color-base-content-primary);
-    font-feature-settings: var(--s-font-feature-settings-heading);
+  & & {
+    &__header, &__title {
+      @include font-weight(700, true);
+    }
+    &__title {
+      font-size: var(--s-heading5-font-size);
+      color: var(--s-color-base-content-primary);
+      font-feature-settings: var(--s-font-feature-settings-heading);
+    }
+    &__body {
+      color: var(--s-color-base-content-primary);
+    }
   }
   > * {
     word-break: break-word;
   }
-  .el-dialog__body {
-    color: var(--s-color-base-content-primary);
-  }
 }
 .v-modal {
   background-color: var(--s-color-utility-overlay);
diff --git a/src/styles/json-input.scss b/src/styles/json-input.scss
index 9a0a3c9a..14828ae0 100644
--- a/src/styles/json-input.scss
+++ b/src/styles/json-input.scss
@@ -46,7 +46,7 @@ $footer-height: 26px;
 .jsoneditor {
   border: none !important;
   font-family: var(--s-font-family-mono);
-  .jsoneditor-outer {
+  & &-outer {
     height: calc(100% - #{$footer-height});
     margin-bottom: -1px !important;
     padding-bottom: 1px !important;