@everchron/ec-shards 2.1.0 → 2.1.2

package/package.json

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

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