PSS-214: Drop invisible border bottom

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.6.4",
+  "version": "0.6.5",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu-private/"

src/stories/Dropdown/SDropdown.stories.ts

@@ -17,7 +17,7 @@ export const configurable = () => ({
   template: `<s-dropdown
                type="button"
                :size="size"
-               :borderRadius="borderRadius"
+               :border-radius="borderRadius"
                :buttonType="buttonType"
                :placement="placement"
                :hide-on-click="hideOnClick"

src/stories/Intro/Customization.stories.ts

@@ -83,7 +83,7 @@ export const configurable = () => ({
                   <s-input
                     type="number"
                     :placeholder="button.label + ' (px)'"
-                    :borderRadius="button.label"
+                    :border-radius="button.label"
                     style="margin-right: 10px; margin-right: 10px;"
                     @change="(value) => handleBorderRadiusChange(button.label, value)"
                   />

src/stories/Menu/SMenu.stories.ts

@@ -13,7 +13,7 @@ export const basicMenu = () => ({
   template: `<s-aside width="220px">
                <s-menu
                  default-active="1"
-                 :borderRadius="borderRadius"
+                 :border-radius="borderRadius"
                  @open="handleOpen"
                  @select="handleSelect"
                  @close="handleClose">
@@ -62,7 +62,7 @@ export const sideBar = () => ({
   template: `<s-aside width="220px">
                <s-menu
                  default-active="2"
-                 :borderRadius="borderRadius"
+                 :border-radius="borderRadius"
                  @open="handleOpen"
                  @select="handleSelect"
                  @close="handleClose">
@@ -121,7 +121,7 @@ export const topBar = () => ({
   template: `<s-menu
                default-active="4"
                mode="horizontal"
-               :borderRadius="borderRadius"
+               :border-radius="borderRadius"
                @select="handleSelect">
                <s-menu-item index="1">Navigator One</s-menu-item>
                <s-submenu index="2">

src/stories/SButton.stories.ts

@@ -20,7 +20,7 @@ export const configurable = () => ({
                :icon="type === 'action' ? 'back' : ''"
                :type="type"
                :size="size"
-               :borderRadius="borderRadius"
+               :border-radius="borderRadius"
                :rounded="rounded"
                :alternative="alternative"
                @click="handleClick"
@@ -117,7 +117,7 @@ export const withDifferentBorderRadius = () => ({
                <s-button
                  v-for="item in items"
                  :key="item.borderRadius"
-                 :borderRadius="item.borderRadius"
+                 :border-radius="item.borderRadius"
                >
                  {{ item.label }}
                </s-button>

src/stories/SCard.stories.ts

@@ -13,11 +13,11 @@ export default {
 export const configurable = () => ({
   components: { SCard, SRow, SDropdown, SDropdownItem },
   template: `<s-row class="s-flex" style="flex: 1; justify-content: space-between; align-items: center;">
-               <s-card style="width: 80%;" :shadow="shadow" :borderRadius="borderRadius" :clickable="clickable" @click="handleClick">
+               <s-card style="width: 80%;" :shadow="shadow" :border-radius="borderRadius" :clickable="clickable" @click="handleClick">
                  <template slot="header">
                    <div class="s-flex" style="justify-content: space-between; padding-right: 20px;">
                      <span>{{ header }}</span>
-                     <s-dropdown type="ellipsis" :borderRadius="borderRadius">
+                     <s-dropdown type="ellipsis" :border-radius="borderRadius">
                        Menu
                        <template #menu>
                          <s-dropdown-item>First</s-dropdown-item>

src/stories/SCheckbox.stories.ts

@@ -17,7 +17,7 @@ export const configurable = () => ({
                  v-model="vModelValue"
                  :disabled="disabled"
                  :border="border"
-                 :borderRadius="borderRadius"
+                 :border-radius="borderRadius"
                  :size="size"
                  :label="label"
                  @change="(value) => changeValue = value"
@@ -100,12 +100,12 @@ export const differentBorderRadius = () => ({
   template: `<s-row :gutter="20" style="flex: 1;">
                <template v-for="item in items">
                  <s-col :span="6" style="height: 56px; margin-bottom: 20px;">
-                   <s-checkbox :borderRadius="item.borderRadius" :value="false">
+                   <s-checkbox :border-radius="item.borderRadius" :value="false">
                      {{ item.label }}
                    </s-checkbox>
                  </s-col>
                  <s-col :span="6" style="height: 56px; margin-bottom: 20px;">
-                   <s-checkbox border :borderRadius="item.borderRadius" :value="true">
+                   <s-checkbox border :border-radius="item.borderRadius" :value="true">
                      {{ item.label }}
                    </s-checkbox>
                  </s-col>

src/stories/SDatePicker.stories.ts

@@ -22,8 +22,8 @@ export const configurable = () => ({
                  :disabled="disabled"
                  :clearable="clearable"
                  :align="align"
-                 :borderRadius="borderRadius"
-                 :popperClass="borderRadius"
+                 :border-radius="borderRadius"
+                 :popper-class="borderRadius"
                  :input-type="inputType"
                  placeholder="Select date"
                  start-placeholder="From"

src/stories/SDialog.stories.ts

@@ -23,7 +23,7 @@ export const configurable = () => ({
                  :width="width"
                  :fullscreen="fullscreen"
                  :top="top"
-                 :borderRadius="borderRadius"
+                 :border-radius="borderRadius"
                  :show-close="showClose"
                  :close-on-click-modal="closeOnClickModal"
                  :close-on-esc="closeOnEsc"

src/stories/SInput.stories.ts

@@ -18,7 +18,7 @@ export const configurable = () => ({
                :type="type"
                :placeholder="placeholder"
                :disabled="disabled"
-               :borderRadius="borderRadius"
+               :border-radius="borderRadius"
                :show-password="showPassword"
                :readonly="readonly"
                :show-text-limit="showTextLimit"

src/stories/SPagination.stories.ts

@@ -18,8 +18,8 @@ export const configurable = () => ({
                  :disabled="disabled"
                  :small="small"
                  :background="background"
-                 :borderRadius="borderRadius"
-                 :popperClass="borderRadius"
+                 :border-radius="borderRadius"
+                 :popper-class="borderRadius"
                  :prev-text="prevText"
                  :next-text="nextText"
                  @size-change="handleSizeChange"

src/stories/STooltip.stories.ts

@@ -19,7 +19,7 @@ export const configurable = () => ({
                  v-model="model"
                  :content="content"
                  :disabled="disabled"
-                 :borderRadius="borderRadius"
+                 :border-radius="borderRadius"
                  :offset="offset"
                  :openDelay="openDelay"
                  @change="handleChange"

src/stories/Select/SSelect.stories.ts

@@ -26,7 +26,7 @@ export const configurable = () => ({
                  <s-select
                    v-model="model"
                    :disabled="disabled"
-                   :borderRadius="borderRadius"
+                   :border-radius="borderRadius"
                    :loading="loading"
                    :multiple="multiple"
                    :input-type="item.inputType"
@@ -36,7 +36,7 @@ export const configurable = () => ({
                    :multiple-text-prefix="multipleTextPrefix"
                    :loading-text="loadingText"
                    :no-data-text="noDataText"
-                   :popperClass="borderRadius"
+                   :popper-class="borderRadius"
                    @change="handleChange"
                  >
                    <s-option

src/stories/Tab/STabs.stories.ts

@@ -15,7 +15,7 @@ export const defaultUsage = () => ({
   template: `<s-tabs
                v-model="activeName"
                :type="type"
-               :borderRadius="borderRadius"
+               :border-radius="borderRadius"
                :position="position"
                :closable="closable"
                :addable="addable"

src/styles/menu.scss

@@ -29,12 +29,17 @@ $margin-bottom-menu-item: 8px;
     margin-right: $margin-bottom-menu-item;
   }
 }
+.el-menu--horizontal > .el-menu-item {
+  &,
+  &.is-active {
+    border-bottom: none;
+  }
+}
 .el-menu-item {
   align-items: center;
   &:not(.is-disabled):hover,
   &.is-active {
     background-color: var(--s-menu-color-hover) !important;
-    border-bottom-color: var(--s-menu-color-hover) !important;
     i {
       color: var(--s-menu-text-color-active);
     }