@everchron/ec-shards 0.7.64 → 0.7.65

package/package.json

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

package/src/components/modal/modal.vue

@@ -78,7 +78,7 @@
   &-sheet{
     background: #FFFFFF;
     background-clip: padding-box;
-    border-radius: 4px;
+    border-radius: 6px;
     outline: 0;
     box-shadow: 0 0 0 1px rgba(47,51,60,0.03), 0 1px 5px 0 rgba(47,51,60,0.25);
 
@@ -94,7 +94,7 @@
 .ecs-modal-default{
   .ecs-modal-sheet{
     margin: 30px auto;
-    width: 780px;
+    width: 820px;
   }
 }
 

package/src/components/modal-header/modal-header.vue

@@ -38,7 +38,7 @@
 
 .ecs-modal-header{
   background: #FFF;
-  border-radius: 4px 4px 0 0;
+  border-radius: 6px 6px 0 0;
   box-shadow: 0 1px 0 $gray-3;
   min-height: 48px;
 
@@ -46,6 +46,10 @@
     background: $gray-3;
     box-shadow: none;
     padding: 0 4px 0 0;
+
+    .ecs-modal-header-main{
+      padding: 0;
+    }
   }
 
   &-scroll{

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

@@ -13,7 +13,7 @@
     props: {
       type: {
         type: String,
-        validator: v => ['standard', 'sidebar', 'segment', 'sheet', null].includes(v),
+        validator: v => ['standard', 'sidebar', 'segment', 'sheet', 'modal', null].includes(v),
         default: 'standard'
       },
       direction: {
@@ -74,6 +74,11 @@
     margin-top: -1px;
   }
 
+  &-modal{
+    display: flex;
+    position: relative;
+  }
+
   &-column{
     flex-direction: column;
   }

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

@@ -10,6 +10,7 @@
     <ecs-icon v-if="icon" :type="icon" />
     <ecs-icon v-if="icon && sticker" :type="`sticker-${sticker}`" class="sticker" width="16" height="16" />
     <slot></slot>
+    <span v-if="shortcut" class="shortcut">{{ shortcut }}</span>
   </button>
 </template>
 
@@ -43,6 +44,9 @@
       disabled: {
         type: Boolean,
         default: false
+      },
+      shortcut: {
+        type: String
       }
     },
 
@@ -327,4 +331,33 @@
     }
   }
 }
+
+.ecs-tab-bar-modal{
+  .ecs-tab-button{
+    font-size: 16px;
+    line-height: 24px;
+    color: $gray-15;
+    display: flex;
+    align-items: center;
+    transition: .2s;
+    height: 48px;
+    padding: 0 16px;
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+
+    &:hover{
+      background: rgba($gray-10, .05);
+    }
+
+    &.show{
+      background: #FFF;
+    }
+
+    .shortcut{
+      color: $gray-6;
+      font-size: 12px;
+      margin-left: 8px;
+    }
+  }
+}
 </style>

package/src/stories/tabs/tabs.stories.js

@@ -2,6 +2,7 @@ import EcsTabs from '@components/tabs/tabs';
 import EcsTab from '@components/tab/tab';
 import EcsTabBar from '@components/tab-bar/tab-bar';
 import EcsTabButton from '@components/tab-button/tab-button';
+import EcsModalHeader from '@components/modal-header/modal-header';
 
 export default {
   title: 'Navigation/Tabs',
@@ -104,6 +105,24 @@ export const sheetTabs = () => ({
             </div>`,
 });
 
+export const modalTabs = () => ({
+  components: { EcsTabs, EcsTab, EcsTabBar, EcsTabButton, EcsModalHeader },
+  template: `<div>
+              <ecs-modal-header type="tabs">
+              <ecs-tab-bar type="modal">
+                <ecs-tab-button show shortcut="⌘N">Settings</ecs-tab-button>
+                <ecs-tab-button shortcut="⌘F">Calendar</ecs-tab-button>
+                <ecs-tab-button shortcut="⌘E">Versions</ecs-tab-button>
+              </ecs-tab-bar>
+              </ecs-modal-header><div>
+              <ecs-tabs>
+                <ecs-tab show>First Tab</ecs-tab>
+                <ecs-tab>Second Tab</ecs-tab>
+                <ecs-tab>Third Tab</ecs-tab>
+              </ecs-tabs>
+            </div>`,
+});
+
 export const sidebarTabs = () => ({
   components: { EcsTabs, EcsTab, EcsTabBar, EcsTabButton },
   template: `<div>

package/src/stories/tabs/tabs.stories.mdx

@@ -153,6 +153,24 @@ Sheet tab bars are used exclusively as a tab bar for controlling table sheets, w
 </ecs-tab-bar>
 ```
 
+## Modal Tabs
+
+Modal tab bars are used exclusively as a tab bar within EcsModalHeader components.
+
+<Canvas withSource="none" withToolbar={true}>
+  <Story name="Modal Tabs" height="240px">
+    {stories.modalTabs()}
+  </Story>
+</Canvas>
+
+```js
+<ecs-tab-bar type="modal">
+  <ecs-tab-button show>Bundles</ecs-tab-button>
+  <ecs-tab-button>Calendar</ecs-tab-button>
+  <ecs-tab-button>Versions</ecs-tab-button>
+</ecs-tab-bar>
+```
+
 ## Guidelines and Best Practices
 
 - Stickers (small additional icons to indicate a status of a tab) can be added via the `sticker` attribute. The following stickers are available: `success`, `error`, `warning`, and `warning-critical`. **Do not** use a sticker for anything else but a standard tab bar (either horizontal or vertical), also only tabs that have an icon will display a sticker.