@everchron/ec-shards 7.2.7 → 7.3.0

package/src/components/input-search/input-search.vue

@@ -89,6 +89,8 @@
 
       iconSize() {
         if(this.size === 'sml') {
+          return '20px'
+        } else if(this.size === 'md') {
           return '24px'
         } else {
           return '30px'
@@ -148,16 +150,10 @@
   .icon{
     position: absolute;
     top: 50%;
-    left: 0;
+    left: 4px;
     transform: translateY(-50%);
     pointer-events: none;
   }
-
-  &-lg{
-    .icon{
-      left: 4px;
-    }
-  }
 }
 
 .ecs-search-input{

package/src/components/modal/modal.vue

@@ -17,7 +17,7 @@
           <!-- @slot Slot for the modal footer content. -->
           <slot name="footer"></slot>
         </div>
-        <div v-if="$slots.dialog" class="ecs-modal-inner-dialog" :style="{ 'top': innerDialogOffset + 'px' }" :class="innerDialog ? 'open' : ''">
+        <div v-if="$slots.dialog" class="ecs-modal-inner-dialog" :class="innerDialog ? 'open' : ''">
           <!-- @slot Slot for dialogs that should render _within_ the modal. -->
           <slot name="dialog"></slot>
           <transition name="fade">
@@ -62,11 +62,6 @@
       innerDialog: {
         type: Boolean,
         default: false
-      },
-      /** Allows to adjust the top offset of the inner dialog area (e.g. for dynamic header heights). */
-      innerDialogOffset: {
-        type: Number,
-        default: 48
       }
     },
 
@@ -191,9 +186,7 @@
 
 .ecs-modal-inner-dialog{
   position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
   z-index: 3;
   display: none;
   overflow: hidden;
@@ -201,10 +194,11 @@
   &:before{
     content: "";
     position: absolute;
-    height: 3px;
+    height: $spacing-10;
     left: 0px;
     right: 0px;
-    top: 0px;
+    top: -4px;
+    border-radius: 100%;
     z-index: 2;
     background: linear-gradient(180deg, rgba(32, 33, 39, 0.12) 0%, rgba(32, 33, 39, 0) 100%);
     transition: .3s;

package/src/components/tab-button/tab-button.vue

@@ -3,10 +3,12 @@
     :class="[
       subtab ? `ecs-tab-button-child` : '',
       show ? `show` : '',
-      badge ? `ecs-tab-button-badge` : '']"
+      badge ? `ecs-tab-button-badge` : '',
+      !$slots.default && icon ? `icon-only` : '', ]"
     :disabled="disabled"
     :aria-selected="show ? 'true' : 'false'"
     :aria-controls="ariaControls"
+    :aria-label="ariaLabel"
     role="tab"
     ref="tabButton"
     @click="handleClick">
@@ -68,6 +70,10 @@
       /** The ID of the tab panel that is controlled by this button. Always pass an ID to improve accessibility. */
       ariaControls: {
         type: String
+      },
+      /** The label of the tab button, in case the default slot contains no text, or no meaningful description of the tab content. Always pass a label to improve accessibility. */
+      ariaLabel: {
+        type: String
       }
     },
 
@@ -81,6 +87,10 @@
       if (!this.ariaControls || this.ariaControls.trim() === '') {
         console.warn('Warning: ariaControls must be provided on tab buttons, to improve accessibility.');
       }
+
+      if (!this.$slots.default && (!this.ariaLabel || this.ariaLabel.trim() === '')) {
+        console.warn('Warning: ariaLabel must be provided on tab buttons without text, to improve accessibility.');
+      }
     },
 
     beforeUnmount() {
@@ -240,8 +250,12 @@
         border-radius: $border-radius-x-small 2px 0 0;
       }
 
-      &:last-child{
-        margin-right: 0;
+      &.icon-only{
+        margin-right: $spacing-10;
+
+        .icon{
+          margin: 0 -4px;
+        }
       }
 
       .icon{
@@ -256,6 +270,10 @@
       .hover{
         inset: 6px 0;
       }
+
+      &:last-child{
+        margin-right: 0;
+      }
     }
   }
 

package/src/stories/Changelog.stories.mdx

@@ -6,7 +6,20 @@ import { Meta } from '@storybook/addon-docs/blocks';
   Changelog
 </h1>
 
-## Version 7.2.6 (6 June 2023)
+## Version 7.3.0 (14 June 2023)
+
+### Features
+
+- Added 8 additional icons
+- Added new EmojiPicker component
+
+## Version 7.2.8 (8 June 2023)
+
+### Features
+
+- Added 3 additional icons to EcsFileIcon component
+
+## Version 7.2.7 (6 June 2023)
 
 ### Features
 

package/src/stories/emoji-picker/emoji-picker.stories.js

@@ -0,0 +1,25 @@
+import EcsEmojiPicker from '@components/emoji-picker/emoji-picker';
+
+export default {
+  title: 'Input/Emoji Picker',
+  component: EcsEmojiPicker
+};
+
+export const emojiPicker = () => ({
+  components: { EcsEmojiPicker },
+  data() {
+    return {
+      emojis: '',
+    };
+  },
+  methods: {
+    onEmojiSelected(emoji) {
+      this.emojis += emoji.char;
+    }
+  },
+  template: `
+  <div>
+    <span>Emojis: {{ emojis }}</span>
+    <ecs-emoji-picker @emoji="onEmojiSelected" bordered />
+  </div>`,
+});

package/src/stories/file-icon/file-icon.stories.js

@@ -9,16 +9,21 @@ export const icon = () => ({
   components: { EcsFileIcon },
   template: `<main>
               <ecs-file-icon type="audio" />
+              <ecs-file-icon type="card-report" />
               <ecs-file-icon type="docx" />
               <ecs-file-icon type="email" />
+              <ecs-file-icon type="excerpt-report" />
               <ecs-file-icon type="exe" />
               <ecs-file-icon type="image" />
               <ecs-file-icon type="native" />
               <ecs-file-icon type="pdf" />
+              <ecs-file-icon type="pdf-table" />
               <ecs-file-icon type="ppt" />
               <ecs-file-icon type="rtf" />
               <ecs-file-icon type="transcript-mini" />
+              <ecs-file-icon type="transcript-mini-highlights" />
               <ecs-file-icon type="transcript" />
+              <ecs-file-icon type="transcript-highlights" />
               <ecs-file-icon type="video" />
               <ecs-file-icon type="xls" />
               <ecs-file-icon type="zip" />

package/src/stories/tabs/tab-button.stories.js

@@ -20,6 +20,7 @@ export const standardRow = () => ({
                 <ecs-tab-button show>Settings</ecs-tab-button>
                 <ecs-tab-button badge>Calendar</ecs-tab-button>
                 <ecs-tab-button>Versions</ecs-tab-button>
+                <ecs-tab-button icon="calendar"></ecs-tab-button>
               </ecs-tab-bar>`,
 });