Fix UI issues part 1

config/storybook/index.scss

@@ -0,0 +1,3 @@
+.sbdocs.sbdocs-preview div[id^='story--'] > * {
+  height: auto !important;
+}

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'
 

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.
    *

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) {

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`
    */

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

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)
     }
   }
 })

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);
+      }
     }
   }
 }

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;
   }
 }

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;
+    }
   }
 }

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 {

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);
+          }
         }
       }
     }

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);

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;

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;

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;