tide-design-system 2.2.10 → 2.2.11

package/src/components/TideBadge.vue

@@ -1,16 +1,20 @@
 <script lang="ts" setup>
   import TideIcon from '@/components/TideIcon.vue';
+  import { BADGE_COLOR_DETAILS } from '@/types/Badge';
   import { CSS } from '@/types/Styles';
 
+  import type { BadgeColor } from '@/types/Badge';
   import type { Icon } from '@/types/Icon';
 
   type Props = {
+    color?: BadgeColor;
     iconLeading?: Icon;
     isFloating?: boolean;
     label: string;
   };
 
   const props = withDefaults(defineProps<Props>(), {
+    color: undefined,
     iconLeading: undefined,
     isFloating: false,
   });
@@ -20,20 +24,21 @@
   <div
     :class="[
       'tide-badge',
-      props.isFloating ? [CSS.BG.SURFACE.FLOATING, CSS.SHADOW.BOTTOM] : [CSS.BG.SURFACE.VARIANT],
+      props.isFloating || props.color ? [CSS.BG.SURFACE.FLOATING, CSS.SHADOW.BOTTOM] : [CSS.BG.SURFACE.VARIANT],
       CSS.DISPLAY.INLINE_FLEX,
       CSS.AXIS2.CENTER,
       CSS.GAP.QUARTER,
       CSS.BORDER.RADIUS.QUARTER,
       CSS.PADDING.Y.QUARTER,
       CSS.PADDING.X.HALF,
+      props.color && [CSS.BORDER.LEFT.TWO, BADGE_COLOR_DETAILS[props.color].borderColor],
       CSS.ELLIPSIS,
       CSS.FONT.ROLE.LABEL_2,
       CSS.WHITESPACE_WRAP.OFF,
     ]"
   >
     <TideIcon
-      :class="[CSS.FLEX.SHRINK.OFF]"
+      :class="[CSS.FLEX.SHRINK.OFF, props.color && BADGE_COLOR_DETAILS[props.color].iconColor]"
       :icon="props.iconLeading"
       v-if="props.iconLeading"
     />

package/src/components/TideChipAction.vue

@@ -1,22 +1,28 @@
 <script lang="ts" setup>
   import TideIcon from '@/components/TideIcon.vue';
+  import { ELEMENT } from '@/types/Element';
   import { ICON } from '@/types/Icon';
   import { CSS } from '@/types/Styles';
   import { TARGET } from '@/types/Target';
 
+  import type { Element } from '@/types/Element';
+
   type Props = {
-    href: string;
+    element: Element;
+    href?: string;
     isNewTab?: boolean;
     label: string;
   };
 
   const props = withDefaults(defineProps<Props>(), {
+    element: ELEMENT.LINK,
+    href: undefined,
     isNewTab: false,
   });
 </script>
 
 <template>
-  <a
+  <component
     :class="[
       'tide-chip-action',
       CSS.DISPLAY.FLEX,
@@ -33,11 +39,12 @@
     ]"
     :href="props.href"
     :target="props.isNewTab ? TARGET.BLANK : TARGET.SELF"
+    :is="element"
   >
     <TideIcon :icon="ICON.SEARCH" />
 
     <span>{{ props.label }}</span>
-  </a>
+  </component>
 </template>
 
 <style scoped>

package/src/components/TideImage.vue

@@ -1,14 +1,17 @@
 <script lang="ts" setup>
-  import { ref } from 'vue';
+  import { computed, ref } from 'vue';
 
+  import { OBJECT_FIT } from '@/types/Image';
   import { CSS } from '@/types/Styles';
 
+  import type { ObjectFit } from '@/types/Image';
   import type { Source } from '@/types/Source';
 
   type Props = {
     alt: string;
     height?: string;
     isLazy?: boolean;
+    objectFit?: ObjectFit;
     sources?: Source[];
     src?: string;
     width?: string;
@@ -18,6 +21,7 @@
     alt: '',
     height: undefined,
     isLazy: true,
+    objectFit: OBJECT_FIT.COVER,
     sources: () => [],
     src: undefined,
     width: undefined,
@@ -28,6 +32,19 @@
 
   const imageDefault = 'https://cdn-static.tilabs.io/marketplace/common/image-coming-soon.svg';
 
+  const objectFitClassName = computed<string>(() => {
+    switch (props.objectFit) {
+      case OBJECT_FIT.CONTAIN:
+        return CSS.OBJECT.CONTAIN;
+      case OBJECT_FIT.COVER:
+        return CSS.OBJECT.COVER;
+      case OBJECT_FIT.SCALE_DOWN:
+        return CSS.OBJECT.SCALE_DOWN;
+      default:
+        return OBJECT_FIT.COVER;
+    }
+  });
+
   const setImageFromDefault = () => {
     const currentSrc = img.value?.currentSrc;
     const pictureSource = picture.value?.querySelector(`source[srcset="${currentSrc}"]`);
@@ -62,7 +79,7 @@
 
     <img
       :alt="alt"
-      :class="[CSS.WIDTH.FULL, CSS.HEIGHT.FULL, CSS.OBJECT.CENTER, CSS.OBJECT.COVER]"
+      :class="[CSS.WIDTH.FULL, CSS.HEIGHT.FULL, CSS.OBJECT.CENTER, objectFitClassName]"
       :fetchpriority="isLazy ? undefined : 'high'"
       :loading="props.isLazy ? 'lazy' : 'eager'"
       ref="img"

package/src/components/TideImageBackground.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
   import TideImage from '@/components/TideImage.vue';
+  import { OBJECT_FIT } from '@/types/Image';
   import { CSS } from '@/types/Styles';
 
   import type { Source } from '@/types/Source';
@@ -35,6 +36,7 @@
         :alt="props.alt"
         :class="[CSS.WIDTH.FULL, CSS.HEIGHT.FULL]"
         :is-lazy="props.isLazy"
+        :object-fit="OBJECT_FIT.COVER"
         :sources="props.sources"
         :src="props.src"
       />

package/src/components/TideModal.vue

@@ -173,7 +173,7 @@
   }
   .tide-modal[open]::backdrop {
     background-color: var(--tide-transparent-400);
-    backdrop-filter: blur(4px);
+    backdrop-filter: var(--tide-bg-blur);
   }
   @starting-style {
     .tide-modal[open] {
@@ -182,7 +182,7 @@
     }
     .tide-modal[open]::backdrop {
       background-color: transparent;
-      backdrop-filter: blur(4px);
+      backdrop-filter: var(--tide-bg-blur);
     }
   }
   .tide-modal-body {

package/src/components/TidePopover.vue

@@ -142,7 +142,7 @@
           CSS.SHADOW.BOTTOM,
         ]"
         ref="floating"
-        :style="{ ...floatingStyles, maxWidth: `calc(100% - ${props.offset * 2}px)` }"
+        :style="{ ...floatingStyles }"
         v-show="isShowPopover"
       >
         <slot />
@@ -152,6 +152,9 @@
 </template>
 
 <style scoped>
+  .tide-popover {
+    max-width: 256px;
+  }
   .v-enter-from,
   .v-leave-to {
     opacity: 0;

package/src/components/TideSheet.vue

@@ -0,0 +1,166 @@
+<script lang="ts" setup>
+  import { onBeforeMount, onMounted, ref, watch } from 'vue';
+
+  import TideButtonIcon from '@/components/TideButtonIcon.vue';
+  import { ICON } from '@/types/Icon';
+  import { PRIORITY } from '@/types/Priority';
+  import { CSS } from '@/types/Styles';
+  import { TOP_LAYER_ID, initFauxTopLayer, setScrollLock } from '@/utilities/viewport';
+
+  import TideDivider from './TideDivider.vue';
+
+  import type { Ref } from 'vue';
+
+  type Props = {
+    isOpen: boolean;
+    isBackButton?: boolean;
+  };
+  const props = defineProps<Props>();
+
+  type Emits = {
+    (e: 'back'): void;
+    (e: 'close'): void;
+  };
+
+  const emit = defineEmits<Emits>();
+
+  const dialogElement: Ref<HTMLDialogElement | null> = ref(null);
+
+  const triggerNativeDialogOpen = () => {
+    dialogElement.value?.showModal();
+  };
+
+  const triggerNativeDialogClose = () => {
+    dialogElement.value?.close();
+  };
+
+  watch(
+    () => props.isOpen,
+    (newValue) => {
+      if (!dialogElement.value) return;
+      if (newValue) {
+        triggerNativeDialogOpen();
+      } else {
+        triggerNativeDialogClose();
+      }
+      setScrollLock(newValue);
+    }
+  );
+
+  onBeforeMount(() => {
+    initFauxTopLayer();
+  });
+
+  onMounted(() => {
+    if (props.isOpen) {
+      triggerNativeDialogOpen();
+    }
+  });
+</script>
+
+<template>
+  <Teleport :to="`#${TOP_LAYER_ID}`">
+    <dialog
+      :class="['tide-sheet', CSS.BG.INITIAL, CSS.HEIGHT.FULL, CSS.WIDTH.FULL, CSS.OVERFLOW.XY.HIDDEN]"
+      ref="dialogElement"
+      @click.self="emit('close')"
+      @close="emit('close')"
+    >
+      <div
+        :class="[
+          'tide-sheet-body',
+          CSS.BG.SURFACE.DEFAULT,
+          CSS.DISPLAY.FLEX,
+          CSS.FLEX.DIRECTION.COLUMN,
+          CSS.HEIGHT.FULL,
+          CSS.OVERFLOW.XY.HIDDEN,
+          CSS.WIDTH.FULL,
+        ]"
+      >
+        <header :class="[CSS.DISPLAY.FLEX, CSS.PADDING.X.ONE, CSS.PADDING.TOP.ONE]">
+          <TideButtonIcon
+            :class="[CSS.FLEX.GROW.OFF, CSS.FLEX.SHRINK.OFF]"
+            :icon="ICON.CHEVRON_LEFT"
+            :priority="PRIORITY.QUATERNARY"
+            @click="emit('back')"
+            v-if="isBackButton"
+          />
+
+          <TideButtonIcon
+            :class="[CSS.FLEX.GROW.OFF, CSS.FLEX.SHRINK.OFF, CSS.MARGIN.LEFT.AUTO]"
+            :icon="ICON.CLOSE"
+            :priority="PRIORITY.QUATERNARY"
+            @click="triggerNativeDialogClose"
+          />
+        </header>
+
+        <TideDivider />
+
+        <div
+          :class="[
+            'tide-sheet-content',
+            CSS.DISPLAY.GRID,
+            CSS.OVERFLOW.Y.AUTO,
+            CSS.OVERFLOW.X.HIDDEN,
+            CSS.WIDTH.FULL,
+            CSS.PADDING.BOTTOM.ONE,
+          ]"
+        >
+          <slot />
+        </div>
+      </div>
+    </dialog>
+  </Teleport>
+</template>
+
+<style scoped>
+  .tide-sheet {
+    --sheet-padding-x: var(--tide-spacing-1);
+    max-width: unset;
+    max-height: unset;
+    justify-items: right;
+    display: none;
+    transition: all var(--tide-animate) allow-discrete;
+    transform: translateX(100%);
+  }
+
+  .tide-sheet[open] {
+    display: grid;
+    transform: translateX(0%);
+  }
+
+  .tide-sheet::backdrop {
+    background-color: transparent;
+    transition: all var(--tide-animate) allow-discrete;
+    backdrop-filter: blur(0px);
+  }
+
+  .tide-sheet[open]::backdrop {
+    background-color: var(--tide-transparent-400);
+    backdrop-filter: var(--tide-bg-blur);
+  }
+
+  .tide-sheet-body {
+    max-width: min(calc(100vw - var(--tide-spacing-2)), 311px);
+  }
+
+  .tide-sheet-content {
+    grid-template-columns: var(--sheet-padding-x) 1fr var(--sheet-padding-x);
+  }
+
+  :where(.tide-sheet-content):deep(> :where(*)) {
+    grid-column: 2;
+  }
+
+  @starting-style {
+    .tide-sheet[open] {
+      display: grid;
+      transform: translateX(100%);
+    }
+
+    .tide-sheet[open]::backdrop {
+      background-color: transparent;
+      backdrop-filter: var(--tide-bg-blur);
+    }
+  }
+</style>

package/src/stories/FoundationsColor.stories.ts

@@ -1,5 +1,12 @@
+import TideIcon from '@/components/TideIcon.vue';
 import { CSS } from '@/types/Styles';
-import { flatten, formatArgType, getConstantsByValues, prependNoneAsEmpty } from '@/utilities/storybook';
+import {
+  disabledArgType,
+  flatten,
+  formatArgType,
+  getConstantsByValues,
+  prependNoneAsEmpty,
+} from '@/utilities/storybook';
 
 import type { StoryContext } from '@storybook/vue3';
 
@@ -47,10 +54,11 @@ const parameters = {
 };
 
 const render = (args: any) => ({
+  components: { TideIcon },
   setup() {
     return formatArgs(args);
   },
-  template: '<div class="tide-display-inline-block tide-padding-1" v-bind="args">Demo</div>',
+  template: `<div class="tide-display-inline-block tide-padding-1" v-bind="args">${args.default}</div>`,
   updated() {
     return formatArgs(args);
   },
@@ -76,6 +84,7 @@ export default {
         type: { summary: 'CSS.BORDER.COLOR' },
       },
     },
+    default: disabledArgType,
     fontColor: {
       ...formatArgType({ COLOR_FONT }),
       description: 'Applies a font color',
@@ -89,6 +98,7 @@ export default {
   args: {
     backgroundColor: COLOR_BACKGROUND.None,
     borderColor: COLOR_BORDER.None,
+    default: 'Demo',
     fontColor: COLOR_FONT.None,
   },
   parameters,
@@ -102,7 +112,6 @@ export const Default = {};
 export const SurfaceAccent = {
   args: {
     backgroundColor: COLOR_BACKGROUND['SURFACE.ACCENT'],
-    fontColor: COLOR_FONT['SURFACE.DEFAULT'],
   },
 };
 
@@ -116,41 +125,180 @@ export const SurfaceBrand = {
 export const SurfaceGradient = {
   args: {
     backgroundColor: COLOR_BACKGROUND['SURFACE.GRADIENT'],
-    fontColor: COLOR_FONT['SURFACE.DEFAULT'],
   },
 };
 
 export const SurfaceVariant = {
   args: {
     backgroundColor: COLOR_BACKGROUND['SURFACE.VARIANT'],
-    fontColor: COLOR_FONT['SURFACE.DEFAULT'],
   },
 };
 
-export const GlobalSurfaceError = {
+export const GlobalPrimaryBlue = {
+  args: {
+    backgroundColor: COLOR_BACKGROUND['GLOBAL.PRIMARY.BLUE'],
+    default: `<TideIcon class="tide-font-on-surface-inverse" icon="ai-description" />`,
+  },
+};
+
+export const GlobalPrimaryGreen = {
+  args: {
+    backgroundColor: COLOR_BACKGROUND['GLOBAL.PRIMARY.GREEN'],
+    default: `<TideIcon class="tide-font-on-surface-inverse" icon="ai-description" />`,
+  },
+};
+
+export const GlobalPrimaryLime = {
+  args: {
+    backgroundColor: COLOR_BACKGROUND['GLOBAL.PRIMARY.LIME'],
+    default: `<TideIcon class="tide-font-on-surface-inverse" icon="ai-description" />`,
+  },
+};
+
+export const GlobalPrimaryOrange = {
+  args: {
+    backgroundColor: COLOR_BACKGROUND['GLOBAL.PRIMARY.ORANGE'],
+    default: `<TideIcon class="tide-font-on-surface-inverse" icon="ai-description" />`,
+  },
+};
+
+export const GlobalPrimaryPurple = {
+  args: {
+    backgroundColor: COLOR_BACKGROUND['GLOBAL.PRIMARY.PURPLE'],
+    default: `<TideIcon class="tide-font-on-surface-inverse" icon="ai-description" />`,
+  },
+};
+
+export const GlobalPrimaryRed = {
+  args: {
+    backgroundColor: COLOR_BACKGROUND['GLOBAL.PRIMARY.RED'],
+    default: `<TideIcon class="tide-font-on-surface-inverse" icon="ai-description" />`,
+  },
+};
+
+export const GlobalPrimarySalmon = {
+  args: {
+    backgroundColor: COLOR_BACKGROUND['GLOBAL.PRIMARY.SALMON'],
+    default: `<TideIcon class="tide-font-on-surface-inverse" icon="ai-description" />`,
+  },
+};
+
+export const GlobalPrimaryTeal = {
+  args: {
+    backgroundColor: COLOR_BACKGROUND['GLOBAL.PRIMARY.TEAL'],
+    default: `<TideIcon class="tide-font-on-surface-inverse" icon="ai-description" />`,
+  },
+};
+
+export const GlobalPrimaryYellow = {
+  args: {
+    backgroundColor: COLOR_BACKGROUND['GLOBAL.PRIMARY.YELLOW'],
+    default: `<TideIcon class="tide-font-on-surface-inverse" icon="ai-description" />`,
+  },
+};
+
+export const GlobalSurfaceBlue = {
+  args: {
+    backgroundColor: COLOR_BACKGROUND['GLOBAL.SURFACE.BLUE'],
+  },
+};
+
+export const GlobalSurfaceGreen = {
+  args: {
+    backgroundColor: COLOR_BACKGROUND['GLOBAL.SURFACE.GREEN'],
+  },
+};
+
+export const GlobalSurfaceLime = {
+  args: {
+    backgroundColor: COLOR_BACKGROUND['GLOBAL.SURFACE.LIME'],
+  },
+};
+
+export const GlobalSurfaceOrange = {
+  args: {
+    backgroundColor: COLOR_BACKGROUND['GLOBAL.SURFACE.ORANGE'],
+  },
+};
+
+export const GlobalSurfacePurple = {
+  args: {
+    backgroundColor: COLOR_BACKGROUND['GLOBAL.SURFACE.PURPLE'],
+  },
+};
+
+export const GlobalSurfaceRed = {
+  args: {
+    backgroundColor: COLOR_BACKGROUND['GLOBAL.SURFACE.RED'],
+  },
+};
+
+export const GlobalSurfaceSalmon = {
+  args: {
+    backgroundColor: COLOR_BACKGROUND['GLOBAL.SURFACE.SALMON'],
+  },
+};
+
+export const GlobalSurfaceTeal = {
+  args: {
+    backgroundColor: COLOR_BACKGROUND['GLOBAL.SURFACE.TEAL'],
+  },
+};
+
+export const GlobalSurfaceYellow = {
+  args: {
+    backgroundColor: COLOR_BACKGROUND['GLOBAL.SURFACE.YELLOW'],
+  },
+};
+
+export const StatusPrimaryError = {
+  args: {
+    backgroundColor: COLOR_BACKGROUND['GLOBAL.PRIMARY.ERROR'],
+    default: `<TideIcon class="tide-font-on-surface-inverse" icon="ai-description" />`,
+  },
+};
+
+export const StatusPrimaryInfo = {
+  args: {
+    backgroundColor: COLOR_BACKGROUND['GLOBAL.PRIMARY.INFO'],
+    default: `<TideIcon class="tide-font-on-surface-inverse" icon="ai-description" />`,
+  },
+};
+
+export const StatusPrimarySuccess = {
+  args: {
+    backgroundColor: COLOR_BACKGROUND['GLOBAL.PRIMARY.SUCCESS'],
+    default: `<TideIcon class="tide-font-on-surface-inverse" icon="ai-description" />`,
+  },
+};
+
+export const StatusPrimaryWarning = {
+  args: {
+    backgroundColor: COLOR_BACKGROUND['GLOBAL.PRIMARY.WARNING'],
+    default: `<TideIcon class="tide-font-on-surface-inverse" icon="ai-description" />`,
+  },
+};
+
+export const StatusSurfaceError = {
   args: {
     backgroundColor: COLOR_BACKGROUND['GLOBAL.SURFACE.ERROR'],
-    fontColor: COLOR_FONT['SURFACE.DEFAULT'],
   },
 };
 
-export const GlobalSurfaceInfo = {
+export const StatusSurfaceInfo = {
   args: {
     backgroundColor: COLOR_BACKGROUND['GLOBAL.SURFACE.INFO'],
-    fontColor: COLOR_FONT['SURFACE.DEFAULT'],
   },
 };
 
-export const GlobalSurfaceSuccess = {
+export const StatusSurfaceSuccess = {
   args: {
     backgroundColor: COLOR_BACKGROUND['GLOBAL.SURFACE.SUCCESS'],
-    fontColor: COLOR_FONT['SURFACE.DEFAULT'],
   },
 };
 
-export const GlobalSurfaceWarning = {
+export const StatusSurfaceWarning = {
   args: {
     backgroundColor: COLOR_BACKGROUND['GLOBAL.SURFACE.WARNING'],
-    fontColor: COLOR_FONT['SURFACE.DEFAULT'],
   },
 };

package/src/stories/TideBadge.stories.ts

@@ -1,9 +1,39 @@
 import TideBadge from '@/components/TideBadge.vue';
+import { BADGE_COLOR as STANDARD_BADGE_COLOR } from '@/types/Badge';
 import * as STANDARD_ICON from '@/types/Icon';
-import { argTypeBooleanUnrequired, formatArgType, parameters, prependNoneAsUndefined } from '@/utilities/storybook';
+import { argTypeBooleanUnrequired, formatArgType, prependNoneAsUndefined } from '@/utilities/storybook';
 
+import type { StoryContext } from '@storybook/vue3';
+
+const BADGE_COLOR = prependNoneAsUndefined(STANDARD_BADGE_COLOR);
 const ICON = prependNoneAsUndefined(STANDARD_ICON.ICON);
 
+const formatSnippet = (code: string, context: StoryContext) => {
+  const { argTypes, args } = context;
+  const argsWithValues: string[] = [];
+
+  if (args.color !== undefined) argsWithValues.push(`:color="${args.color}"`);
+  if (args.iconLeading !== undefined) argsWithValues.push(`:icon-leading="${args.iconLeading}"`);
+  if (args.isFloating !== undefined && args.color === undefined)
+    argsWithValues.push(`:is-floating="${args.isFloating}"`);
+  if (args.label !== undefined) argsWithValues.push(`:label="${args.label}"`);
+
+  if (argTypes.iconLeading.type) argTypes.iconLeading.type.required = args.color !== undefined;
+  if (argTypes.isFloating.table) argTypes.isFloating.table.disable = args.color !== undefined;
+
+  return `<TideBadge ${argsWithValues.join(' ')} />`;
+};
+
+const parameters = {
+  docs: {
+    source: {
+      format: 'vue',
+      language: 'html',
+      transform: formatSnippet,
+    },
+  },
+};
+
 const render = (args: any) => ({
   components: { TideBadge },
   setup: () => ({ args }),
@@ -12,24 +42,44 @@ const render = (args: any) => ({
 
 export default {
   argTypes: {
+    color: {
+      ...formatArgType({ BADGE_COLOR }),
+      description: 'Determines which color option to adopt (if any)',
+      table: {
+        category: 'Props',
+        defaultValue: { summary: 'None' },
+      },
+    },
     iconLeading: {
       ...formatArgType({ ICON }),
       description: 'Icon to left of label',
+      table: {
+        category: 'Props',
+        defaultValue: { summary: 'None' },
+      },
     },
     isFloating: {
       ...argTypeBooleanUnrequired,
       description: 'Determines whether to display the "Floating" variant styles',
+      table: {
+        category: 'Props',
+        defaultValue: { summary: 'None' },
+      },
     },
     label: {
       control: 'text',
       description: 'Badge text',
       table: {
+        category: 'Props',
         defaultValue: { summary: 'None' },
         type: { summary: 'string' },
       },
     },
   },
   args: {
+    color: BADGE_COLOR.None,
+    iconLeading: ICON.None,
+    isFloating: undefined,
     label: 'Demo',
   },
   component: TideBadge,