@everchron/ec-shards 2.0.7 → 2.1.1

package/package.json

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

package/src/components/checkbox/checkbox.vue

@@ -21,15 +21,17 @@
       :for="id || _uid">
 
       <slot />
+      <ecs-text v-if="$slots.default && help" type="form">{{ help }}</ecs-text>
     </label>
   </ecs-form-check>
 </template>
 
 <script>
   import EcsFormCheck from '../form-check/form-check'
+  import EcsText from '../text/text'
 
   export default {
-    components: { EcsFormCheck },
+    components: { EcsFormCheck, EcsText },
     props: {
       /** Name attribute of the input. */
       name: {
@@ -71,7 +73,11 @@
         default: false
       },
       /** Unique ID */
-      id: [String, Number]
+      id: [String, Number],
+      /** Help text that appears underneath (or next to, for inline checkboxes) the label. */
+      help: {
+        type: String
+      }
     },
 
     data() {
@@ -145,7 +151,8 @@
     width: 18px;
     height: 18px;
     left: 0;
-    top: 0;
+    top: 50%;
+    margin-top: -9px;
     background: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><polyline fill="none" stroke="#{$color-blue-10}" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.7" points="6 9.259 8.347 11.998 12 6"/></svg>');
   }
 
@@ -157,7 +164,8 @@
     height: 2px;
     border-radius: 1px;
     left: 5px;
-    top: 8px;
+    top: 50%;
+    margin-top: -1px;
   }
 
   &[type="checkbox"].indeterminate + label:before{
@@ -165,4 +173,13 @@
     border-color: rgba($color-blue-10, .3);
   }
 }
+
+.ecs-text{
+  min-width: 100%;
+}
+
+.ecs-form-check-inline .ecs-text{
+  min-width: auto;
+  margin-left: $spacing-10;
+}
 </style>

package/src/components/form-check/form-check.vue

@@ -32,7 +32,7 @@
 .ecs-form-check {
   position: relative;
   display: block;
-  height: 18px;
+  min-height: 18px;
   margin-bottom: $spacing-25;
 
   &.stand-alone{
@@ -49,6 +49,10 @@
   &-inline{
     display: inline-block;
     margin-right: 30px;
+
+    .ecs-form-check-label{
+      display: inline-flex;
+    }
   }
 
   &.disabled {
@@ -72,10 +76,11 @@
 
 .ecs-form-check-label {
   min-width: 18px;
-  height: 18px;
+  min-height: 18px;
   margin-bottom: 0;
   padding-left: 30px;
-  display: inline-flex;
+  display: flex;
+  flex-wrap: wrap;
   align-items: center;
 }
 
@@ -95,7 +100,8 @@
     vertical-align: text-top;
     position: absolute;
     left: 0;
-    top: 0;
+    top: 50%;
+    margin-top: -9px;
     width: 18px;
     height: 18px;
     background: white;
@@ -126,7 +132,7 @@
 label{
   display: inline-block;
   font-size: $type-scale-3-font-size;
-  line-height: 18px;
+  line-height: $type-scale-3-line-height;
   margin-bottom: $spacing-10;
   -webkit-user-select: none;
   -moz-user-select: none;

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/components/quicklink/quicklink.vue

@@ -239,10 +239,5 @@
     align-items: center;
     width: 100%;
   }
-
-  .ecs-form-check-input + label:before,
-  .ecs-form-check-input + label:after{
-    top: auto !important;
-  }
 }
 </style>

package/src/components/radiobutton/radiobutton.vue

@@ -21,14 +21,17 @@
       :for="id">
 
       <slot />
+      <ecs-text v-if="$slots.default && help" type="form">{{ help }}</ecs-text>
     </label>
   </ecs-form-check>
 </template>
 
 <script>
   import EcsFormCheck from '../form-check/form-check'
+  import EcsText from '../text/text'
+
   export default {
-    components: { EcsFormCheck },
+    components: { EcsFormCheck, EcsText },
 
     model: {
       prop: 'checked',
@@ -62,6 +65,10 @@
       inline: {
         type: Boolean,
         default: false
+      },
+      /** Help text that appears underneath (or next to, for inline radiobuttons) the label. */
+      help: {
+        type: String
       }
     },
 
@@ -133,8 +140,18 @@
     background: $color-blue-10;
     width: 6px;
     height: 6px;
-    top: 6px;
+    top: 50%;
+    margin-top: -3px;
     left: 6px;
   }
 }
+
+.ecs-text{
+  min-width: 100%;
+}
+
+.ecs-form-check-inline .ecs-text{
+  min-width: auto;
+  margin-left: $spacing-10;
+}
 </style>

package/src/stories/Changelog.stories.mdx

@@ -6,6 +6,22 @@ import { Meta } from '@storybook/addon-docs/blocks';
   Changelog
 </h1>
 
+## Version 2.1.1 (11 October 2022)
+
+### Features
+
+- Added `help` prop to EcsCheckbox and EcsRadiobutton to render a small helper text underneath the label.
+
+## 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/checkbox/checkbox.stories.js

@@ -47,3 +47,11 @@ export const checkboxIndeterminate = () => ({
               <ecs-checkbox indeterminate inline name="apple">Apples</ecs-checkbox>
             </div>`,
 });
+
+export const checkboxHelpText = () => ({
+  components: { EcsCheckbox },
+  template: `<div>
+              <ecs-checkbox help="Help Text Label" name="apple">Apple</ecs-checkbox>
+              <ecs-checkbox help="Help Text Label" inline name="apple">Apple</ecs-checkbox>
+            </div>`,
+});

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>`,
 });

package/src/stories/radiobutton/radiobutton.stories.js

@@ -37,3 +37,16 @@ export const radiobuttonInline = () => ({
               Selected: {{ selected }}
             </div>`,
 });
+
+export const radiobuttonHelpText = () => ({
+  components: { EcsRadiobutton },
+  data() {
+    return {
+      selected: 'apple'
+    }
+  },
+  template: `<div>
+              <ecs-radiobutton name="fruits" v-model="selected" value="orange" help="Help Text Label">Label</ecs-radiobutton>
+              <ecs-radiobutton name="fruits" v-model="selected" inline value="apple" help="Help Text Label">Label</ecs-radiobutton>
+            </div>`,
+});