@everchron/ec-shards 2.1.1 → 2.1.2

package/package.json

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

package/src/components/checkbox/checkbox.vue

@@ -21,17 +21,15 @@
       :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, EcsText },
+    components: { EcsFormCheck },
     props: {
       /** Name attribute of the input. */
       name: {
@@ -73,11 +71,7 @@
         default: false
       },
       /** Unique ID */
-      id: [String, Number],
-      /** Help text that appears underneath (or next to, for inline checkboxes) the label. */
-      help: {
-        type: String
-      }
+      id: [String, Number]
     },
 
     data() {
@@ -151,8 +145,7 @@
     width: 18px;
     height: 18px;
     left: 0;
-    top: 50%;
-    margin-top: -9px;
+    top: 0;
     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>');
   }
 
@@ -164,8 +157,7 @@
     height: 2px;
     border-radius: 1px;
     left: 5px;
-    top: 50%;
-    margin-top: -1px;
+    top: 8px;
   }
 
   &[type="checkbox"].indeterminate + label:before{
@@ -173,13 +165,4 @@
     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;
-  min-height: 18px;
+  height: 18px;
   margin-bottom: $spacing-25;
 
   &.stand-alone{
@@ -49,10 +49,6 @@
   &-inline{
     display: inline-block;
     margin-right: 30px;
-
-    .ecs-form-check-label{
-      display: inline-flex;
-    }
   }
 
   &.disabled {
@@ -76,11 +72,10 @@
 
 .ecs-form-check-label {
   min-width: 18px;
-  min-height: 18px;
+  height: 18px;
   margin-bottom: 0;
   padding-left: 30px;
-  display: flex;
-  flex-wrap: wrap;
+  display: inline-flex;
   align-items: center;
 }
 
@@ -100,8 +95,7 @@
     vertical-align: text-top;
     position: absolute;
     left: 0;
-    top: 50%;
-    margin-top: -9px;
+    top: 0;
     width: 18px;
     height: 18px;
     background: white;
@@ -132,7 +126,7 @@
 label{
   display: inline-block;
   font-size: $type-scale-3-font-size;
-  line-height: $type-scale-3-line-height;
+  line-height: 18px;
   margin-bottom: $spacing-10;
   -webkit-user-select: none;
   -moz-user-select: none;

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

@@ -1,13 +1,18 @@
 <template>
   <div class="ecs-form-group" :class="error ? 'error' : ''">
     <slot></slot>
-    <span class="ecs-form-text" v-if="hasHelp" v-html="helpText"></span>
-    <span class="ecs-form-text" v-if="hasErrorText" v-html="errorText"></span>
+    <ecs-text v-if="hasHelp" v-html="helpText" type="form"></ecs-text>
+    <ecs-text v-if="hasErrorText" v-html="errorText" type="form" color="negative"></ecs-text>
+    <ecs-text v-if="hasSuccessText" v-html="successText" type="form" color="positive" emphasized></ecs-text>
   </div>
 </template>
 
 <script>
+  import EcsText from '../text/text'
+
   export default {
+    components: { EcsText },
+
     props: {
       /** If set, the input control will show up in an error state. */
       error: {
@@ -21,6 +26,10 @@
       /** Shows an error message underneath the input control. Should be used together with the `error`prop. */
       errorText: {
         type: String
+      },
+      /** Shows a success message underneath the input control. */
+      successText: {
+        type: String
       }
     },
 
@@ -30,6 +39,13 @@
           return true
         return this.helpText
       },
+
+      hasSuccessText() {
+        if (this.successText && this.successText !== '')
+          return true
+        return this.successText
+      },
+
       hasErrorText() {
         if (this.errorText && this.errorText !== '')
           return true
@@ -51,10 +67,7 @@
   }
 }
 
-.ecs-form-text {
-  display: block;
-  font-size: $type-scale-2-font-size;
-  color: $color-gray-8;
+.ecs-text{
   margin-top: $spacing-10;
 
   a{
@@ -65,13 +78,9 @@
       color: darken($color-blue-10, 10%);
     }
   }
-
-  &.error{
-    color: $color-red-9;
-  }
 }
 
-.ecs-form-check-group .ecs-form-text{
+.ecs-form-check-group .ecs-text{
   margin-top: 0;
 }
 
@@ -111,10 +120,6 @@ label{
 @import "../../tokens/build/scss/tokens.scss";
 
 .ecs-form-group.error{
-  .ecs-form-text{
-    color: $color-red-9;
-  }
-
   .ecs-form-control,
   .ecs-form-control:focus,
   .ecs-form-select{

package/src/components/quicklink/quicklink.vue

@@ -239,5 +239,10 @@
     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,17 +21,14 @@
       :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, EcsText },
+    components: { EcsFormCheck },
 
     model: {
       prop: 'checked',
@@ -65,10 +62,6 @@
       inline: {
         type: Boolean,
         default: false
-      },
-      /** Help text that appears underneath (or next to, for inline radiobuttons) the label. */
-      help: {
-        type: String
       }
     },
 
@@ -140,18 +133,8 @@
     background: $color-blue-10;
     width: 6px;
     height: 6px;
-    top: 50%;
-    margin-top: -3px;
+    top: 6px;
     left: 6px;
   }
 }
-
-.ecs-text{
-  min-width: 100%;
-}
-
-.ecs-form-check-inline .ecs-text{
-  min-width: auto;
-  margin-left: $spacing-10;
-}
 </style>

package/src/components/text/text.vue

@@ -79,7 +79,7 @@
 @import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
-.ecs-text{
+h1, h2, h3, h4, h5, h6, label{
   margin: 0;
 }
 
@@ -160,5 +160,9 @@
   font-size: $type-scale-2-font-size;
   line-height: $type-scale-2-line-height;
   color: $color-gray-9;
+
+  &.emphasized{
+    font-weight: $font-weight-medium;
+  }
 }
 </style>

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

@@ -254,6 +254,7 @@
 
   .after-label{
     margin-left: auto;
+    margin-right: $spacing-5;
     font-size: $type-scale-2-font-size;
     color: $color-gray-8;
     max-width: 40%;

package/src/stories/Changelog.stories.mdx

@@ -6,6 +6,13 @@ import { Meta } from '@storybook/addon-docs/blocks';
   Changelog
 </h1>
 
+## Version 2.1.2 (24 Octobier 2022)
+
+### Fixes
+
+- Refactor EcsFormGroup error text with EcsText component
+- Added some padding to EcsTreeListItem suffix
+
 ## Version 2.1.1 (11 October 2022)
 
 ### Features

package/src/stories/checkbox/checkbox.stories.js

@@ -47,11 +47,3 @@ 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/form-group/form-group.stories.js

@@ -37,3 +37,11 @@ export const formGroupWithErrorText = () => ({
                 <ecs-input id="name" placeholder="Please enter your name" />
               </ecs-form-group>`,
 });
+
+export const formGroupWithSuccessText = () => ({
+  components: { EcsFormGroup, EcsInput },
+  template: `<ecs-form-group success-text="Your input was valid, you can be happy.">
+                <label for="name">Name</label>
+                <ecs-input id="name" placeholder="Please enter your name" />
+              </ecs-form-group>`,
+});

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

@@ -37,16 +37,3 @@ 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>`,
-});