@everchron/ec-shards 2.0.7 → 2.1.0

package/package.json

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

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

@@ -4,24 +4,29 @@
       <ecs-checkbox @input="$emit('input', $event)" :disabled="disabled" :value="value" :value-false="valueFalse" :value-true="valueTrue" :indeterminate="indeterminate">
         <slot></slot>
       </ecs-checkbox>
+      <span v-if="suffix" class="after">{{suffix}}</span>
     </div>
 
     <div v-else-if="type === 'radiobutton'" class="ecs-popover-list-item control no-hover">
       <ecs-radiobutton @change="$emit('change', $event)" :disabled="disabled" :checked="value">
         <slot></slot>
       </ecs-radiobutton>
+      <span v-if="suffix" class="after">{{suffix}}</span>
     </div>
 
     <div v-else-if="type === 'switch'" class="ecs-popover-list-item control no-hover">
       <ecs-switch @input="$emit('input', $event)" :value="value" :value-false="valueFalse" :value-true="valueTrue" size="sml-toggle" :disabled="disabled">
         <slot></slot>
+        <span v-if="help" class="help">{{help}}</span>
       </ecs-switch>
+      <span v-if="suffix" class="after">{{suffix}}</span>
     </div>
 
     <div v-else-if="type === 'sort'" @click="$emit('click', $event)" class="ecs-popover-list-item control no-hover">
       <ecs-sortbutton :sort="sort" :disabled="disabled">
         <slot></slot>
       </ecs-sortbutton>
+      <span v-if="suffix" class="after">{{suffix}}</span>
     </div>
 
     <a v-else-if="type === 'link'" @click="$emit('click', $event)" class="ecs-popover-list-item"
@@ -41,21 +46,6 @@
         <ecs-icon v-if="hoverIcon" :type="hoverIcon" class="hover-icon" />
     </a>
 
-    <button v-else-if="type === 'color'"
-      class="ecs-popover-list-item"
-      :class="[disabled ? `disabled` : '',
-              noHover ? `no-hover` : '',
-              color ? `has-color` : '',
-              selected ? `selected` : '']"
-      @click="$emit('click', $event)">
-
-      <div class="ecs-popover-list-item-color" :style="{ backgroundColor: color }" />
-      <slot></slot>
-      <span v-if="suffix" class="after">{{suffix}}</span>
-      <span v-if="help" class="help">{{help}}</span>
-      <ecs-icon v-if="hoverIcon" :type="hoverIcon" class="hover-icon" />
-    </button>
-
     <button v-else class="ecs-popover-list-item"
             :class="[iconClass,
                     danger ? `danger` : '',
@@ -90,7 +80,7 @@
       /** Determines the type of popover list item.*/
       type: {
         type: String,
-        validator: v => ['icon', 'checkbox', 'radiobutton', 'switch', 'sort', 'color', 'link', null].includes(v),
+        validator: v => ['icon', 'checkbox', 'radiobutton', 'switch', 'sort', 'link', null].includes(v),
         default: null
       },
       /** Adds a subtle suffix text to the right side of the list item. Should be very short. */
@@ -108,11 +98,6 @@
         type: String,
         default: null
       },
-      /** The color value (HEX, or RGB), if the list item is type `color`. */
-      color: {
-        type: String,
-        default: null
-      },
       /** Adds a file icon. Should never be used together with `icon`. */
       fileIcon: {
         type: String,
@@ -195,6 +180,19 @@
   }
 </script>
 
+<style lang="scss">
+.ecs-popover-list-item{
+  .ecs-switch-has-label + label{
+    flex-wrap: wrap;
+    flex: 1;
+
+    .help{
+      min-width: 100%;
+    }
+  }
+}
+</style>
+
 <style lang="scss" scoped>
 @import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
@@ -260,10 +258,6 @@
       }
     }
 
-    &.has-color{
-      padding-left: 36px;
-    }
-
     &.danger{
       &.has-icon .icon{
         color: $color-gray-8;
@@ -299,20 +293,19 @@
       .ecs-switch-wrapper{
         margin: -7px 0;
       }
-    }
 
-    &-color{
-      width: 14px;
-      height: 14px;
-      border-radius: 100%;
-      top: 13px;
-      left: 12px;
-      position: absolute;
+      .after{
+        position: absolute;
+        right: 12px;
+        top: 50%;
+        margin-top: -8px;
+      }
     }
 
     .after{
       opacity: .4;
       font-size: $type-scale-2-font-size;
+      line-height: $type-scale-2-line-height;
       float: right;
 
       &-highlight{

package/src/stories/Changelog.stories.mdx

@@ -6,6 +6,16 @@ import { Meta } from '@storybook/addon-docs/blocks';
   Changelog
 </h1>
 
+## Version 2.1.0 (11 October 2022)
+
+### Breaking Changes
+
+- Deprecated the `type="color"` and `color` props of EcsPopoverListItem. Since EcsSwatchesPicker is now fully implemented, this component variant will no longer be needed.
+
+### Fixes
+
+- Allows `suffix` and `help` text for control type popover-list-items components.
+
 ## Version 2.0.7 (10 October 2022)
 
 ### Fixes

package/src/stories/popover-list-item/popover-list-item.stories.js

@@ -37,20 +37,17 @@ export const popoverListItemIcon = () => ({
               </ecs-popover-list>`,
 });
 
-export const popoverListItemColor = () => ({
-  components: { EcsPopoverListItem, EcsPopoverList },
-  template: `<ecs-popover-list>
-                <ecs-popover-list-item type="color" color="#F9DF00">Yellow</ecs-popover-list-item>
-                <ecs-popover-list-item type="color" color="#F3A100">Orange</ecs-popover-list-item>
-              </ecs-popover-list>`,
-});
-
 export const popoverListItemControls = () => ({
   components: { EcsPopoverListItem, EcsPopoverList },
   template: `<ecs-popover-list>
                 <ecs-popover-list-item type="checkbox">List Item Checkbox</ecs-popover-list-item>
+                <ecs-popover-list-item type="checkbox" suffix="Suffix">List Item Checkbox</ecs-popover-list-item>
                 <ecs-popover-list-item type="radiobutton">List Item Radio</ecs-popover-list-item>
+                <ecs-popover-list-item type="radiobutton" suffix="Suffix">List Item Radio</ecs-popover-list-item>
                 <ecs-popover-list-item type="sort">List Item Sort</ecs-popover-list-item>
+                <ecs-popover-list-item type="sort" suffix="Suffix">List Item Sort</ecs-popover-list-item>
                 <ecs-popover-list-item type="switch">List Item Switch</ecs-popover-list-item>
+                <ecs-popover-list-item type="switch" help="This is a helper text.">List Item Switch</ecs-popover-list-item>
+                <ecs-popover-list-item type="switch" suffix="TXT">List Item Switch</ecs-popover-list-item>
               </ecs-popover-list>`,
 });