feat: Component for tag with story

[nithindavid]

[netlify]

✅ Deploy Preview for chatwoot-design ready!

Name	Link
🔨 Latest commit	fd08d35
🔍 Latest deploy log	https://app.netlify.com/sites/chatwoot-design/deploys/65b76df1c072c90008f4d340
😎 Deploy Preview	https://deploy-preview-9--chatwoot-design.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[scmmishra]

We can declare containerClass as an array, and then use containerClasses.push('text-xs', 'h-5', 'min-w-[20px]', 'py-0.5', 'rounded') instead of string concatenation

[scmmishra]

Maybe we can wrap this in a computed, or a watchEffect the style will become reactive

const containerClasses = computed(() => {
  let classes = [];

  if (props.size === 's') {
    classes.push('text-xs', 'h-5', 'min-w-[20px]', 'py-0.5', 'rounded');

    // Variant: SYMBOL-TEXT
    if (hasSymbol && hasContent && !hasAction) {
      classes.push('pr-1');
    }
    // Variant: TEXT-ACTION
    else if (!hasSymbol && hasContent && hasAction) {
      classes.push('pl-1');
    }

    // Variant: TEXT
    if (hasContent) {
      classes.push('px-1');
    }
  } else if (props.size === 'm') {
    classes.push('text-sm', 'h-6', 'min-w-[24px]', 'leading-4', 'p-1', 'rounded-md');

    // Variant: SYMBOL-TEXT
    if (hasSymbol && hasContent && !hasAction) {
      classes.push('pr-2');
    }
    // Variant: TEXT-ACTION
    else if (!hasSymbol && hasContent && hasAction) {
      classes.push('pl-2');
    }
    // Variant: TEXT
    else if (!hasSymbol && hasContent && !hasAction) {
      classes.push('px-2');
    }
  }

  return classes.join(' ');
});

[scmmishra]

We can type the emits

const emit = defineEmits<{
  action: []
  click: []
}>()

Also we should probably forward the event object too

[scmmishra]

We should move this to the template itself, using the object syntax, that way tailwind intellisense will work for them in IDEs

[scmmishra]

Suggested change

	<span v-else-if="props.icon" class="w-4 h-4 inline-block" :class="props.icon"></span>
	<span v-else-if="props.icon" class="w-4 h-4 inline-block" :class="props.icon"/>

[scmmishra]

Will these colors not be standard?

[scmmishra]

Just a small cosmetic suggestion, makes it more readable. Feel free to ignore it

export type BaseTagProps = {
  size?: TagSizes;
  style?: TagStyles;
  disabled?: boolean;
  clickable?: boolean;
};

export type EmojiTagProps = BaseTagProps & {
  emoji: string;
  icon?: never;
  color?: never;
  removable?: boolean;
  expandable?: never;
};

export type IconTagProps = BaseTagProps & {
  emoji?: never;
  icon: string;
  color?: never;
  removable?: never;
  expandable?: boolean;
};

export type ColorTagProps = BaseTagProps & {
  emoji?: never;
  icon?: never;
  color: string;
  removable?: boolean;
  expandable?: boolean;
};

export type TagProps = EmojiTagProps | IconTagProps | ColorTagProps;

[scmmishra]

If I have set disabled and clickable both to true, the UI will show cursor-pointer right?