@everchron/ec-shards 2.2.0 → 2.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everchron/ec-shards",
-  "version": "2.2.0",
+  "version": "2.2.2",
   "private": false,
   "description": "Everchron Shards UI Library",
   "repository": "https://github.com/everchron/ec-shards.git",

package/src/components/comment/comment.vue

@@ -2,8 +2,8 @@
   <div class="ecs-comment">
     <div class="ecs-comment-header">
       <div class="ecs-comment-autor">
-        <ecs-skeleton-loader v-if="loading" type="circle" :width="30" :height="30" />
-        <ecs-avatar v-else :name="userName" :image="userImage" :size="30" rounded />
+        <ecs-skeleton-loader v-if="loading" type="circle" :width="32" :height="32" />
+        <ecs-avatar v-else :name="userName" :image="userImage" :size="32" rounded />
         <div v-if="!loading" class="ecs-comment-meta">
           <span class="ecs-comment-meta-name">{{userName}}</span>
           <span class="ecs-comment-meta-time">
@@ -124,7 +124,7 @@
   }
 
   &-body{
-    padding-left: 40px;
+    padding-left: 42px;
   }
 }
 </style>

package/src/components/comment-list/comment-list.vue

@@ -11,6 +11,10 @@
 .ecs-comment-list{
   > .ecs-comment{
     margin-bottom: $spacing-20;
+
+    &:last-child{
+      margin-bottom: 0;
+    }
   }
 }
 </style>

package/src/components/data-card/data-card.vue

@@ -210,15 +210,15 @@
     padding: 10px 20px;
   }
 
-  &.loading .ecs-data-card-row-inner > *:not(.skeleton){
+  &.loading .ecs-data-card-row-inner > *:not(.ecs-skeleton){
     opacity: 0;
   }
 
-  .skeleton{
+  .ecs-skeleton{
     position: absolute;
   }
 
-  .ecs-data-card-row .skeleton{
+  .ecs-data-card-row .ecs-skeleton{
     margin-left: 6px;
   }
 }

package/src/components/data-list-item/data-list-item.vue

@@ -340,8 +340,8 @@
       }
     }
 
-    .skeleton{
-      margin-top: 6px;
+    .ecs-skeleton{
+      margin-top: 2px;
     }
   }
 }

package/src/components/dialog/dialog.vue

@@ -80,6 +80,8 @@
   display: flex;
   flex-direction: column;
   margin: auto;
+  margin-bottom: auto;
+  margin-top: auto;
   border: none;
   padding: 0;
   overflow: visible;

package/src/components/excerpt-snippet/excerpt-snippet.vue

@@ -206,7 +206,7 @@
   }
 
   .icon,
-  .skeleton-rectangle{
+  .ecs-skeleton{
     margin-right: 4px;
   }
 

package/src/components/formatted/formatted.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="ecs-formatted" :class="small ? `ecs-formatted-sml` : ''">
     <slot v-if="!loading"></slot>
-    <ecs-skeleton-loader v-else type="multi" :count="skeletonCount" />
+    <ecs-skeleton-loader v-else type="multi" :line-height="small ? 1 : 2" :count="skeletonCount" />
   </div>
 </template>
 

package/src/components/log-message/log-message.vue

@@ -6,8 +6,7 @@
       <ecs-skeleton-loader v-if="loading" type="single" :width="40" class="skeleton-text" />
       <slot v-else></slot>
     </div>
-    <ecs-skeleton-loader v-if="loading && meta" type="single" :width="15" class="skeleton-text" />
-    <div v-else-if="meta" class="ecs-log-message-meta">
+    <div v-if="meta && !loading" class="ecs-log-message-meta">
       {{ meta }}
     </div>
   </ecs-flex-row>
@@ -152,8 +151,4 @@ export default {
   border-color: $color-green-2;
   color: $color-green-15;
 }
-
-.skeleton-text{
-  margin-top: 5px !important;
-}
 </style>

package/src/components/rating-favorability/rating-favorability.vue

@@ -6,7 +6,7 @@
     <span v-if="label" class="label" :class="loading ? 'loading' : ''">{{ labelText }}</span>
 
     <ecs-skeleton-loader v-if="loading" type="rect" :width="20" :height="20" />
-    <ecs-skeleton-loader v-if="loading && label" type="single" style="width:calc(100% - 30px)" />
+    <ecs-skeleton-loader v-if="loading && label" type="single" :width="100" style="width:calc(100% - 30px)" />
   </div>
 </template>
 
@@ -104,7 +104,7 @@
 @import "../mixins/svg-uri";
 
 .ecs-favorability{
-  display: flex;
+  display: inline-flex;
   align-items: center;
   position: relative;
 
@@ -214,12 +214,12 @@
     }
   }
 
-  .skeleton{
+  .ecs-skeleton{
     position: absolute;
+  }
 
-    &-single{
-      left: 28px;
-    }
+  .skeleton-wrap{
+    left: 28px;
   }
 
   &.disabled{

package/src/components/rating-star-read/rating-star-read.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="ecs-rating-read" :class="[sizeClass]">
     <div v-if="!loading" class="ecs-stars-read" :data-maximum="maximum" :data-rating="rating"></div>
-    <ecs-skeleton-loader v-else type="single" :width="100" />
+    <ecs-skeleton-loader v-else type="single" :line-height="3" :width="100" />
   </div>
 </template>
 
@@ -112,10 +112,10 @@ $star-read-width: 18px;
     }
   }
 
-  .skeleton{
+  .ecs-skeleton{
     position: absolute;
     top: 50%;
-    margin-top: -3px;
+    margin-top: -10px;
   }
 }
 </style>

package/src/components/skeleton-loader/skeleton-loader.vue

@@ -1,11 +1,11 @@
 <template>
-  <div v-if="type === 'rect' || type === 'circle'" class="skeleton" :class="rectClass" :style="{ width: width + 'px', 'height': height + 'px' }" />
-  <div v-else-if="type === 'multi'" class="skeletons">
+  <div v-if="type === 'rect' || type === 'circle'" class="ecs-skeleton skeleton" :class="rectClass" :style="{ width: width + 'px', 'height': height + 'px' }" />
+  <div v-else-if="type === 'multi'" class="ecs-skeleton skeletons">
     <div v-for="n in parseInt(count)" :key="n" class="skeleton-wrap" :class="'skeleton-line-height-'+lineHeight">
       <div class="skeleton skeleton-single" />
     </div>
   </div>
-  <div v-else class="skeleton-wrap" :class="'skeleton-line-height-'+lineHeight">
+  <div v-else class="ecs-skeleton skeleton-wrap" :class="'skeleton-line-height-'+lineHeight">
     <div class="skeleton skeleton-single" :style="{ width: width + '%' }" />
   </div>
 </template>
@@ -126,10 +126,12 @@
 
   &-rect{
     border-radius: $border-radius-small;
+    flex-shrink: 0;
   }
 
   &-circle{
     border-radius: 100%;
+    flex-shrink: 0;
   }
 
   &:after{

package/src/components/tag/tag.vue

@@ -10,7 +10,7 @@
 
     <slot></slot>
     <span class="count" v-if="count">{{count}}</span>
-    <ecs-skeleton-loader v-if="loading" type="single" style="width: calc(100% - 20px)" />
+    <ecs-skeleton-loader v-if="loading" type="single" :width="100" style="width: calc(100% - 20px)" />
   </span>
 </template>
 
@@ -246,10 +246,10 @@
     transition: none;
   }
 
-  .skeleton{
+  .ecs-skeleton{
     position: absolute;
     top: 50%;
-    margin-top: -3px;
+    margin-top: -8px;
     left: 10px;
   }
 }

package/src/stories/Changelog.stories.mdx

@@ -6,6 +6,13 @@ import { Meta } from '@storybook/addon-docs/blocks';
   Changelog
 </h1>
 
+## Version 2.2.2 (4 November 2022)
+
+### Fixes
+
+- Fix broken skeleton instances introduced in 2.2.0
+- Fix some general styling issues
+
 ## Version 2.2.0 (4 November 2022)
 
 ### Features