Merge pull request #196 from codex-team/feat/tab-bar-component

feat(codex-ui): tab component

codex-ui/dev/Playground.vue

@@ -231,6 +231,34 @@
       </Row>
     </Section>
     <br>
+    <Heading :level="3">
+      Tab
+    </Heading>
+    <Tab :title="'Home'" />
+    <br>
+    <Tab
+      :title="'Home'"
+      :picture="'../static/example-avatar.png'"
+    />
+    <br>
+    <Tab
+      title="Home"
+      :icon="'Plus'"
+    />
+    <br>
+    <Tab
+      :title="'Home'"
+      :closable="true"
+    />
+    <br>
+    <Tab
+      :title="'Home'"
+      :closable="true"
+      :is-active="true"
+    />
+    <Heading :level="3">
+      Type Scale
+    </Heading>
     <Heading :level="3">
       Type Scale
     </Heading>
@@ -257,7 +285,8 @@ import {
   ButtonStyle,
   Avatar,
   Switch,
-  RadioGroup
+  RadioGroup,
+  Tab
 } from '../src/vue';
 import TypeScale from './TypeScale.vue';
 import { useTheme } from '../src/vue/composables/useTheme';

codex-ui/src/styles/dimensions.pcss

@@ -16,7 +16,7 @@
   /**
    * Elements
    */
-  --size-icon: 24px;
+  --size-icon: 20px;
   --size-avatar: 30px;
 
   /**
@@ -36,4 +36,10 @@
   --radius-m: 8px;
   --radius-ml: 12px;
   --radius-l: 16px;
+
+  /**
+   * Padding
+   */
+  --h-padding: var(--spacing-ms);
+  --v-padding: var(--spacing-xs);
 }

codex-ui/src/vue/components/form/Section.vue

@@ -57,9 +57,6 @@ withDefaults(
   flex-direction: column;
   gap: var(--spacing-xs);
 
-  --h-padding: var(--spacing-m);
-  --v-padding: var(--spacing-xs);
-
   &--small {
     --h-padding: var(--spacing-s);
   }

codex-ui/src/vue/components/icon/Icon.vue

@@ -25,9 +25,13 @@ const iconSource = computed(() => {
 
 <style module lang="postcss">
 .icon {
-  --icon-size: var(--size-icon);
   display: inline-block;
-  width: var(--icon-size);
-  height: var(--icon-size);
+  width: var(--size-icon);
+  height: var(--size-icon);
+
+  svg {
+    width: var(--size-icon);
+    height: var(--size-icon);
+  }
 }
 </style>

codex-ui/src/vue/components/row/Row.vue

@@ -66,9 +66,6 @@ defineProps<{
 
 <style module lang="postcss">
 .row {
-  --h-padding: var(--spacing-ms);
-  --v-padding: var(--spacing-xs);
-
   padding-left: var(--h-padding);
   display: flex;
   gap: var(--h-padding);

codex-ui/src/vue/components/tabbar/Tab.vue

@@ -0,0 +1,135 @@
+<template>
+  <div
+    :class="[
+      $style.tab,
+      'text-ui-base-medium',
+      isActive && $style['tab--active']
+    ]"
+  >
+    <div
+      :class="[
+        $style['tab__body'],
+      ]"
+    >
+      <template v-if="picture">
+        <img
+          :src="picture"
+          :class="[$style['tab__body-image']]"
+        >
+      </template>
+      <template v-else-if="icon">
+        <div :class="[$style['tab__body-icon']]">
+          <Icon
+            :name="icon"
+            :width="20"
+            :height="20"
+          />
+        </div>
+      </template>
+      {{ title }}
+      <Icon
+        v-if="closable"
+        :name="'Cross'"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Icon from '../icon/Icon.vue';
+
+withDefaults(
+  defineProps<{
+    /**
+     * Name of the tab item
+     */
+    title: string;
+
+    /**
+     * If true we have cross icon on the right
+     */
+    closable?: boolean;
+
+    /**
+     * Current tab state
+     */
+    isActive: boolean;
+
+    /**
+     * Link to image to be displayed in the left slot, else undefined
+     */
+    picture?: string;
+
+    /**
+     * Name of the icon to be diplayed in the left slot, else undefined
+     */
+    icon?: string;
+  }>(),
+  {
+    isActive: false,
+    picture: undefined,
+    icon: undefined,
+    closable: false,
+  }
+);
+</script>
+
+<style module>
+.tab {
+  padding: var(--v-padding) 0;
+  position: relative;
+  display: inline-block;
+  width: max-content;
+
+  &__body {
+    min-height: var(--size-icon);
+    display: flex;
+    gap: var(--v-padding);
+    border-radius: var(--radius-m);
+    cursor: pointer;
+    font-family: inherit;
+
+    padding: var(--v-padding) var(--h-padding);
+    background-color: var(--bg);
+    color: var(--color);
+
+    --bg: var(--base--bg-secondary);
+    --color: var(--base--text-secondary);
+
+    /**
+     * States
+     */
+    &:hover {
+      --bg: var(--base--bg-secondary-hover);
+    }
+
+    &-image {
+      height: var(--size-icon);
+      width: var(--size-icon);
+      border-radius: var(--radius-s);
+    }
+
+    &-icon {
+      height: var(--size-icon);
+      width: var(--size-icon);
+    }
+  }
+
+  &--active .tab__body {
+    --bg: var(--base--bg-secondary-hover);
+    --color: var(--base--text);
+
+    &::after {
+      content: '';
+      display: block;
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      height: var(--spacing-very-x);
+      background-color: var(--accent--solid);
+      border-radius: var(--radius-s) var(--radius-s) 0 0;
+    }
+  }
+}
+</style>

codex-ui/src/vue/components/tabbar/index.ts

@@ -0,0 +1,3 @@
+import Tab from './Tab.vue';
+
+export { Tab };

codex-ui/src/vue/index.ts

@@ -9,4 +9,5 @@ export * from './components/icon';
 export * from './components/radio';
 export * from './components/switch';
 export * from './components/card';
+export * from './components/tabbar';
 export * from './composables/useTheme';