Release 1.0.18

package.json

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

src/stories/SImage.stories.ts

@@ -10,16 +10,17 @@ export default {
 
 export const configurable = () => ({
   components: { SImage },
-  template: `<s-image
-    :src="src"
-    :fit="fit"
-    :alt="alt"
-    :lazy="lazy"
-    :z-index="zIndex"
-    :has-skeleton="hasSkeleton"
-    :animated="animated"
-    style="height: 300px;"
-  />`,
+  template: `
+    <s-image
+      :src="src"
+      :fit="fit"
+      :alt="alt"
+      :lazy="lazy"
+      :z-index="zIndex"
+      :has-skeleton="hasSkeleton"
+      :animated="animated"
+      style="height: 300px;"
+    />`,
   props: {
     src: {
       default: text('Src', 'https://picsum.photos/1024')
@@ -47,23 +48,24 @@ export const configurable = () => ({
 
 export const LazyImages = () => ({
   components: { SImage },
-  template: `<div style="width: 100%; overflow-y: auto; height: 300px;">
-    <s-image :src="imageSrc + '?random=1'" lazy style="height: inherit;" />
-    <s-image :src="imageSrc + '?random=2'" lazy style="height: inherit;" />
-    <s-image :src="imageSrc + '?random=3'" lazy style="height: inherit;" />
-    <s-image :src="imageSrc + '?random=4'" lazy style="height: inherit;" />
-    <s-image :src="imageSrc + '?random=5'" lazy style="height: inherit;" />
-    <s-image :src="imageSrc + '?random=6'" lazy style="height: inherit;" />
-    <s-image :src="imageSrc + '?random=7'" lazy style="height: inherit;" />
-    <s-image :src="imageSrc + '?random=8'" lazy style="height: inherit;" />
-    <s-image :src="imageSrc + '?random=9'" lazy style="height: inherit;" />
-    <s-image :src="imageSrc + '?random=10'" lazy style="height: inherit;" />
-    <s-image :src="imageSrc + '?random=11'" lazy style="height: inherit;" />
-    <s-image :src="imageSrc + '?random=12'" lazy style="height: inherit;" />
-    <s-image :src="imageSrc + '?random=13'" lazy style="height: inherit;" />
-    <s-image :src="imageSrc + '?random=14'" lazy style="height: inherit;" />
-    <s-image :src="imageSrc + '?random=15'" lazy style="height: inherit;" />
-  </div>`,
+  template: `
+    <div style="width: 100%; overflow-y: auto; height: 300px;">
+      <s-image :src="imageSrc + '?random=1'" lazy style="height: inherit;" />
+      <s-image :src="imageSrc + '?random=2'" lazy style="height: inherit;" />
+      <s-image :src="imageSrc + '?random=3'" lazy style="height: inherit;" />
+      <s-image :src="imageSrc + '?random=4'" lazy style="height: inherit;" />
+      <s-image :src="imageSrc + '?random=5'" lazy style="height: inherit;" />
+      <s-image :src="imageSrc + '?random=6'" lazy style="height: inherit;" />
+      <s-image :src="imageSrc + '?random=7'" lazy style="height: inherit;" />
+      <s-image :src="imageSrc + '?random=8'" lazy style="height: inherit;" />
+      <s-image :src="imageSrc + '?random=9'" lazy style="height: inherit;" />
+      <s-image :src="imageSrc + '?random=10'" lazy style="height: inherit;" />
+      <s-image :src="imageSrc + '?random=11'" lazy style="height: inherit;" />
+      <s-image :src="imageSrc + '?random=12'" lazy style="height: inherit;" />
+      <s-image :src="imageSrc + '?random=13'" lazy style="height: inherit;" />
+      <s-image :src="imageSrc + '?random=14'" lazy style="height: inherit;" />
+      <s-image :src="imageSrc + '?random=15'" lazy style="height: inherit;" />
+    </div>`,
   data: () => ({
     imageSrc: 'https://picsum.photos/1024/300'
   })

src/stories/SSkeleton.stories.ts

@@ -16,27 +16,28 @@ export const configurable = () => ({
     SSkeletonItem,
     SImage
   },
-  template: `<div class="s-flex" style="flex: 1; flex-direction: column;">
-              <s-skeleton
-                :animated="animated"
-                :count="count"
-                :loading="loading"
-                :rows="2"
-                :throttle="throttle"
-                style="width: 100%;"
-              >
-                <template #template>
-                  <s-skeleton-item element="image" />
-                  <s-skeleton-item element="p" />
-                  <s-skeleton-item element="p" />
-                </template>
-                <template>
-                  <s-image :src="src" :lazy="lazy" :has-skeleton="false" />
-                  <p class="p3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-                  <p class="p3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-                </template>
-              </s-skeleton>
-            </div>`,
+  template: `
+    <div class="s-flex" style="flex: 1; flex-direction: column;">
+      <s-skeleton
+        :animated="animated"
+        :count="count"
+        :loading="loading"
+        :rows="2"
+        :throttle="throttle"
+        style="width: 100%;"
+      >
+        <template #template>
+          <s-skeleton-item element="image" />
+          <s-skeleton-item element="p" />
+          <s-skeleton-item element="p" />
+        </template>
+        <template>
+          <s-image :src="src" :lazy="lazy" :has-skeleton="false" />
+          <p class="p3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+          <p class="p3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        </template>
+      </s-skeleton>
+    </div>`,
   props: {
     animated: {
       default: boolean('Animated', true)
@@ -67,13 +68,14 @@ export const SkeletonItem = () => ({
     SSkeleton,
     SSkeletonItem
   },
-  template: `<div class="s-flex" style="flex: 1; flex-direction: column;">
-              <s-skeleton animated loading style="width: 100%;">
-                <template #template>
-                  <s-skeleton-item :element="element" />
-                </template>
-              </s-skeleton>
-            </div>`,
+  template: `
+    <div class="s-flex" style="flex: 1; flex-direction: column;">
+      <s-skeleton animated loading style="width: 100%;">
+        <template #template>
+          <s-skeleton-item :element="element" />
+        </template>
+      </s-skeleton>
+    </div>`,
   props: {
     element: {
       default: select('Element', Object.values(SkeletonItemElement), SkeletonItemElement.TEXT)

src/stories/STooltip.stories.ts

@@ -86,14 +86,17 @@ export const withDifferentPlacement = () => ({
   components: { STooltip, SButton, SRow, SMain },
   template: `<s-main style="padding: 40px 80px;">
                <s-row v-for="placements in items" :key="placements[0]" style="padding-bottom: 20px;">
-                 <s-tooltip v-for="placement in placements" :key="placement" :placement="placement" :content="placement">
+                 <s-tooltip v-for="placement in placements" :border-radius="borderRadius" :key="placement" :placement="placement" :content="placement">
                    <s-button>{{ placement }}</s-button>
                  </s-tooltip>
                </s-row>
              </s-main>`,
   props: {
     items: {
       default: () => differentPlacementData
+    },
+    borderRadius: {
+      default: select('BorderRadius', Object.values(BorderRadius), BorderRadius.SMALL)
     }
   }
 })

src/styles/neumorphism/tooltip.scss

@@ -2,6 +2,8 @@ $neu-tooltip-max-width: 236px !default;
 $neu-tooltip-padding: 6px 8px !default;
 $neu-tooltip-line-height: 12px !default;
 $neu-tooltip-background-color:  var(--s-color-base-content-secondary) !default;
+$neu-tooltip-arrow-shift: calc(var(--s-border-radius-mini) / 4);
+$neu-tooltip-arrow-width: 8px;
 
 .el-tooltip__popper.neumorphic {
   max-width: $neu-tooltip-max-width;
@@ -38,16 +40,69 @@ $neu-tooltip-background-color:  var(--s-color-base-content-secondary) !default;
     &[x-placement^="right"] .popper__arrow {
       border-right-color: $neu-tooltip-background-color;
       border-bottom-color: transparent;
+      border-right-width: $neu-tooltip-arrow-width;
       &::after {
         border-right-color: inherit;
       }
     }
     &[x-placement^="left"] .popper__arrow {
       border-left-color: $neu-tooltip-background-color;
       border-bottom-color: transparent;
+      border-left-width: $neu-tooltip-arrow-width;
       &::after {
         border-left-color: inherit;
       }
     }
   }
-}
+  &.s-border-radius {
+    &-mini {
+      &[x-placement^="right"],
+      &[x-placement^="right-start"],
+      &[x-placement^="left"],
+      &[x-placement^="left-start"] {
+        .popper__arrow {
+          margin-top: $neu-tooltip-arrow-shift;
+        }
+      }
+      &[x-placement^="right-end"],
+      &[x-placement^="left-end"] {
+        .popper__arrow {
+          margin-bottom: $neu-tooltip-arrow-shift;
+        }
+      }
+    }
+    &-small {
+      &[x-placement^="right"],
+      &[x-placement^="right-start"],
+      &[x-placement^="left"],
+      &[x-placement^="left-start"] {
+        .popper__arrow {
+          margin-top: calc(#{$neu-tooltip-arrow-shift} / 2);
+        }
+      }
+      &[x-placement^="right-end"],
+      &[x-placement^="left-end"] {
+        .popper__arrow {
+          margin-bottom: calc(#{$neu-tooltip-arrow-shift} / 2);
+        }
+      }
+    }
+    &-medium,
+    &-big {
+      &[x-placement^="right"],
+      &[x-placement^="right-start"],
+      &[x-placement^="left"],
+      &[x-placement^="left-start"] {
+        .popper__arrow {
+          margin-top: -2px;
+        }
+      }
+      &[x-placement^="right-end"],
+      &[x-placement^="left-end"] {
+        .popper__arrow {
+          margin-bottom: -2px;
+        }
+      }
+    }
+  }
+}

src/styles/option.scss

@@ -1,4 +1,4 @@
 .s-option {
   padding-left: $s-basic-spacing * 2;
   padding-right: $s-basic-spacing * 2;
-}
+}

src/styles/table.scss

@@ -187,4 +187,4 @@
   .el-table--enable-row-hover.s-hierarchical-table-level:not(.s-hierarchical-table-level--last) .el-table__body tr.s-hierarchical-table-row:hover > td {
     background: transparent;
   }
-}
+}