@everchron/ec-shards 2.1.7 → 2.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everchron/ec-shards",
-  "version": "2.1.7",
+  "version": "2.1.8",
   "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/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,12 @@ import { Meta } from '@storybook/addon-docs/blocks';
   Changelog
 </h1>
 
+## Version 2.1.8 (30 October 2022)
+
+### Features
+
+- Added `help` prop to EcsCheckbox and EcsRadiobutton to render a small helper text underneath the label.
+
 ## Version 2.1.6 (28 October 2022)
 
 ### Features
@@ -31,12 +37,6 @@ import { Meta } from '@storybook/addon-docs/blocks';
 - Refactor EcsFormGroup error text with EcsText component
 - Added some padding to EcsTreeListItem suffix
 
-## 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

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