feat(tags): remove variant attribute

ovh · Jul 29, 2024 · 8253305 · 8253305
1 parent 35745bf
commit 8253305
Show file tree

Hide file tree

Showing 10 changed files with 35 additions and 229 deletions.
diff --git a/packages/ods/src/components/tag/src/components/ods-tag/ods-tag.scss b/packages/ods/src/components/tag/src/components/ods-tag/ods-tag.scss
@@ -12,48 +12,24 @@
     @include tag.ods-tag();
 
     &:not(&#{$tag}--disabled) {
-      &#{$tag}--default {
-        &#{$tag}--critical {
-          @include tag.ods-tag-variant-default('critical');
-        }
-
-        &#{$tag}--information {
-          @include tag.ods-tag-variant-default('information');
-        }
-
-        &#{$tag}--neutral {
-          @include tag.ods-tag-variant-default('neutral');
-        }
-
-        &#{$tag}--success {
-          @include tag.ods-tag-variant-default('success');
-        }
-
-        &#{$tag}--warning {
-          @include tag.ods-tag-variant-default('warning');
-        }
+      &#{$tag}--critical {
+        @include tag.ods-tag-color('critical');
       }
 
-      &#{$tag}--outline {
-        &#{$tag}--critical {
-          @include tag.ods-tag-variant-outline('critical');
-        }
-
-        &#{$tag}--information {
-          @include tag.ods-tag-variant-outline('information');
-        }
+      &#{$tag}--information {
+        @include tag.ods-tag-color('information');
+      }
 
-        &#{$tag}--neutral {
-          @include tag.ods-tag-variant-outline('neutral');
-        }
+      &#{$tag}--neutral {
+        @include tag.ods-tag-color('neutral');
+      }
 
-        &#{$tag}--success {
-          @include tag.ods-tag-variant-outline('success');
-        }
+      &#{$tag}--success {
+        @include tag.ods-tag-color('success');
+      }
 
-        &#{$tag}--warning {
-          @include tag.ods-tag-variant-outline('warning');
-        }
+      &#{$tag}--warning {
+        @include tag.ods-tag-color('warning');
       }
     }
 

diff --git a/packages/ods/src/components/tag/src/components/ods-tag/ods-tag.tsx b/packages/ods/src/components/tag/src/components/ods-tag/ods-tag.tsx
@@ -3,7 +3,6 @@ import { ODS_ICON_NAME, type OdsIconName } from '../../../../icon/src';
 import { ODS_TAG_COLOR, type OdsTagColor } from '../../constants/tag-color';
 import { ODS_TAG_SHAPE, type OdsTagShape } from '../../constants/tag-shape';
 import { ODS_TAG_SIZE, type OdsTagSize } from '../../constants/tag-size';
-import { ODS_TAG_VARIANT, type OdsTagVariant } from '../../constants/tag-variant';
 import { handleClick, handleKeyDown, handleKeyUp } from '../../controller/ods-tag';
 import { type OdsTagEventRemoveDetail } from '../../interfaces/events';
 
@@ -25,8 +24,6 @@ export class OdsTag {
   @Prop({ reflect: true }) public shape: OdsTagShape = ODS_TAG_SHAPE.round;
   /** @docType OdsTagSize */
   @Prop({ reflect: true }) public size: OdsTagSize = ODS_TAG_SIZE.md;
-  /** @docType OdsTagVariant */
-  @Prop({ reflect: true }) public variant: OdsTagVariant = ODS_TAG_VARIANT.default;
 
   @Event() odsRemove!: EventEmitter<OdsTagEventRemoveDetail>;
 
@@ -55,7 +52,6 @@ export class OdsTag {
             [`ods-tag__tag--${this.color}`]: true,
             [`ods-tag__tag--${this.shape}`]: true,
             [`ods-tag__tag--${this.size}`]: true,
-            [`ods-tag__tag--${this.variant}`]: true,
           }}
           part="tag"
           tabindex={ this.isDisabled ? -1 : 0 }>

diff --git a/packages/ods/src/components/tag/src/constants/tag-variant.ts b/packages/ods/src/components/tag/src/constants/tag-variant.ts
diff --git a/packages/ods/src/components/tag/src/index.html b/packages/ods/src/components/tag/src/index.html
@@ -44,47 +44,24 @@
   <ods-tag icon="star" label="MD tag" size="md"></ods-tag>
   <ods-tag icon="star" label="LG tag" size="lg"></ods-tag>
 
-  <p>Variant</p>
-  <ods-tag label="Default tag" variant="default"></ods-tag>
-  <ods-tag label="Outline tag" variant="outline"></ods-tag>
-
-  <p>Color - Default</p>
-  <ods-tag label="Critical tag" color="critical" variant="default"></ods-tag>
-  <ods-tag label="Information tag" color="information" variant="default"></ods-tag>
-  <ods-tag label="Neutral tag" color="neutral" variant="default"></ods-tag>
-  <ods-tag label="Success tag" color="success" variant="default"></ods-tag>
-  <ods-tag label="Warning tag" color="warning" variant="default"></ods-tag>
-  <br /><br />
-  <ods-tag label="Critical tag" color="critical" icon="star" variant="default"></ods-tag>
-  <ods-tag label="Information tag" color="information" icon="star" variant="default"></ods-tag>
-  <ods-tag label="Neutral tag" color="neutral" icon="star" variant="default"></ods-tag>
-  <ods-tag label="Success tag" color="success" icon="star" variant="default"></ods-tag>
-  <ods-tag label="Warning tag" color="warning" icon="star" variant="default"></ods-tag>
-  <br /><br />
-  <ods-tag label="Critical tag" color="critical" icon="star" is-disabled variant="default"></ods-tag>
-  <ods-tag label="Information tag" color="information" icon="star" is-disabled variant="default"></ods-tag>
-  <ods-tag label="Neutral tag" color="neutral" icon="star" is-disabled variant="default"></ods-tag>
-  <ods-tag label="Success tag" color="success" icon="star" is-disabled variant="default"></ods-tag>
-  <ods-tag label="Warning tag" color="warning" icon="star" is-disabled variant="default"></ods-tag>
-
-  <p>Color - Outline</p>
-  <ods-tag label="Critical tag" color="critical" variant="outline"></ods-tag>
-  <ods-tag label="Information tag" color="information" variant="outline"></ods-tag>
-  <ods-tag label="Neutral tag" color="neutral" variant="outline"></ods-tag>
-  <ods-tag label="Success tag" color="success" variant="outline"></ods-tag>
-  <ods-tag label="Warning tag" color="warning" variant="outline"></ods-tag>
+  <p>Color</p>
+  <ods-tag label="Critical tag" color="critical"></ods-tag>
+  <ods-tag label="Information tag" color="information"></ods-tag>
+  <ods-tag label="Neutral tag" color="neutral"></ods-tag>
+  <ods-tag label="Success tag" color="success"></ods-tag>
+  <ods-tag label="Warning tag" color="warning"></ods-tag>
   <br /><br />
-  <ods-tag label="Critical tag" color="critical" icon="star" variant="outline"></ods-tag>
-  <ods-tag label="Information tag" color="information" icon="star" variant="outline"></ods-tag>
-  <ods-tag label="Neutral tag" color="neutral" icon="star" variant="outline"></ods-tag>
-  <ods-tag label="Success tag" color="success" icon="star" variant="outline"></ods-tag>
-  <ods-tag label="Warning tag" color="warning" icon="star" variant="outline"></ods-tag>
+  <ods-tag label="Critical tag" color="critical" icon="star"></ods-tag>
+  <ods-tag label="Information tag" color="information" icon="star"></ods-tag>
+  <ods-tag label="Neutral tag" color="neutral" icon="star"></ods-tag>
+  <ods-tag label="Success tag" color="success" icon="star"></ods-tag>
+  <ods-tag label="Warning tag" color="warning" icon="star"></ods-tag>
   <br /><br />
-  <ods-tag label="Critical tag" color="critical" icon="star" is-disabled variant="outline"></ods-tag>
-  <ods-tag label="Information tag" color="information" icon="star" is-disabled variant="outline"></ods-tag>
-  <ods-tag label="Neutral tag" color="neutral" icon="star" is-disabled variant="outline"></ods-tag>
-  <ods-tag label="Success tag" color="success" icon="star" is-disabled variant="outline"></ods-tag>
-  <ods-tag label="Warning tag" color="warning" icon="star" is-disabled variant="outline"></ods-tag>
+  <ods-tag label="Critical tag" color="critical" icon="star" is-disabled></ods-tag>
+  <ods-tag label="Information tag" color="information" icon="star" is-disabled></ods-tag>
+  <ods-tag label="Neutral tag" color="neutral" icon="star" is-disabled></ods-tag>
+  <ods-tag label="Success tag" color="success" icon="star" is-disabled></ods-tag>
+  <ods-tag label="Warning tag" color="warning" icon="star" is-disabled></ods-tag>
 
   <p>Custom style</p>
   <ods-tag class="my-tag" label="Custom tag"></ods-tag>

diff --git a/packages/ods/src/components/tag/src/index.ts b/packages/ods/src/components/tag/src/index.ts
@@ -2,5 +2,4 @@ export { OdsTag } from './components/ods-tag/ods-tag';
 export { ODS_TAG_COLOR, ODS_TAG_COLORS, type OdsTagColor } from './constants/tag-color';
 export { ODS_TAG_SHAPE, ODS_TAG_SHAPES, type OdsTagShape } from './constants/tag-shape';
 export { ODS_TAG_SIZE, ODS_TAG_SIZES, type OdsTagSize } from './constants/tag-size';
-export { ODS_TAG_VARIANT, ODS_TAG_VARIANTS, type OdsTagVariant } from './constants/tag-variant';
 export { type OdsTagEventRemove, type OdsTagEventRemoveDetail } from './interfaces/events';
diff --git a/packages/ods/src/components/tag/tests/rendering/ods-tag.spec.ts b/packages/ods/src/components/tag/tests/rendering/ods-tag.spec.ts
@@ -1,6 +1,6 @@
 import type { SpecPage } from '@stencil/core/testing';
 import { newSpecPage } from '@stencil/core/testing';
-import { ODS_TAG_COLOR, ODS_TAG_SHAPE, ODS_TAG_SIZE, ODS_TAG_VARIANT, OdsTag } from '../../src';
+import { ODS_TAG_COLOR, ODS_TAG_SHAPE, ODS_TAG_SIZE, OdsTag } from '../../src';
 
 describe('ods-tag rendering', () => {
   let page: SpecPage;
@@ -108,20 +108,4 @@ describe('ods-tag rendering', () => {
       expect(root?.getAttribute('size')).toBe(ODS_TAG_SIZE.md);
     });
   });
-
-  describe('variant', () => {
-    it('should be reflected', async() => {
-      const dummyValue = 'dummy value';
-
-      await setup(`<ods-tag variant="${dummyValue}">Dummy Tag</ods-tag>`);
-
-      expect(root?.getAttribute('variant')).toBe(dummyValue);
-    });
-
-    it('should render with expected default value', async() => {
-      await setup('<ods-tag>Dummy Button</ods-tag>');
-
-      expect(root?.getAttribute('variant')).toBe(ODS_TAG_VARIANT.default);
-    });
-  });
 });
diff --git a/packages/ods/src/style/_tag.scss b/packages/ods/src/style/_tag.scss
@@ -9,6 +9,8 @@ $ods-tag-height-lg: 28px;
   flex-flow: row;
   grid-gap: 0.25rem;
   align-items: center;
+  border-width: 2px;
+  border-style: solid;
   cursor: pointer;
 
   &:focus-visible {
@@ -36,69 +38,7 @@ $ods-tag-height-lg: 28px;
   }
 }
 
-@mixin ods-tag-variant-default($color) {
-  @if $color == 'critical' {
-    background-color: var(--ods-color-critical-100);
-    color: var(--ods-color-critical-900);
-
-    &:hover {
-      background-color: var(--ods-color-critical-200);
-    }
-
-    &:active {
-      background-color: var(--ods-color-critical-300);
-    }
-  } @else if $color == 'information' {
-    background-color: var(--ods-color-primary-100);
-    color: var(--ods-color-primary-900);
-
-    &:hover {
-      background-color: var(--ods-color-primary-200);
-    }
-
-    &:active {
-      background-color: var(--ods-color-primary-300);
-    }
-  } @else if $color == 'neutral' {
-    background-color: var(--ods-color-neutral-100);
-    color: var(--ods-color-neutral-700);
-
-    &:hover {
-      background-color: var(--ods-color-neutral-200);
-    }
-
-    &:active {
-      background-color: var(--ods-color-neutral-300);
-    }
-  } @else if $color == 'success' {
-    background-color: var(--ods-color-success-100);
-    color: var(--ods-color-success-900);
-
-    &:hover {
-      background-color: var(--ods-color-success-200);
-    }
-
-    &:active {
-      background-color: var(--ods-color-success-300);
-    }
-  } @else if $color == 'warning' {
-    background-color: var(--ods-color-warning-100);
-    color: var(--ods-color-warning-900);
-
-    &:hover {
-      background-color: var(--ods-color-warning-200);
-    }
-
-    &:active {
-      background-color: var(--ods-color-warning-300);
-    }
-  }
-}
-
-@mixin ods-tag-variant-outline($color) {
-  border-width: 2px;
-  border-style: solid;
-
+@mixin ods-tag-color($color) {
   @if $color == 'critical' {
     border-color: var(--ods-color-critical-100);
     background-color: var(--ods-color-critical-000);

diff --git a/packages/storybook/stories/components/tag/migration.from.17.x.mdx b/packages/storybook/stories/components/tag/migration.from.17.x.mdx
@@ -80,12 +80,6 @@ Tag are not meant to be selected.
 You may eventually mimic previous behavior using some style customization,
 but we'll advise to reach out the design team before doing so.
 
-`shape` <img src="https://img.shields.io/badge/new-008000" />
-
-New attribute (optional).
-
-Allow you to choose between different shape rendering option.
-
 ## Migration examples
 
 Basic tag:

diff --git a/packages/storybook/stories/components/tag/tag.stories.ts b/packages/storybook/stories/components/tag/tag.stories.ts
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/web-components';
 import { defineCustomElement } from '@ovhcloud/ods-components/dist/components/ods-tag';
-import { ODS_ICON_NAMES, ODS_TAG_COLOR, ODS_TAG_COLORS, ODS_TAG_SHAPE, ODS_TAG_SHAPES, ODS_TAG_SIZE, ODS_TAG_SIZES, ODS_TAG_VARIANT, ODS_TAG_VARIANTS } from '@ovhcloud/ods-components';
+import { ODS_ICON_NAMES, ODS_TAG_COLOR, ODS_TAG_COLORS, ODS_TAG_SIZE, ODS_TAG_SIZES } from '@ovhcloud/ods-components';
 import { html } from 'lit-html';
 import { CONTROL_CATEGORY, orderControls } from '../../control';
 
@@ -20,9 +20,7 @@ export const Demo: StoryObj = {
          icon="${arg.icon}"
          is-disabled="${arg.isDisabled}"
          label="${arg.label}"
-         shape="${arg.shape}"
-         size="${arg.size}"
-         variant="${arg.variant}">
+         size="${arg.size}">
 </ods-tag>
 <style>
   .my-tag-demo::part(tag) {
@@ -75,15 +73,6 @@ export const Demo: StoryObj = {
       control: 'text',
       description: 'The tag label',
     },
-    shape: {
-      table: {
-        category: CONTROL_CATEGORY.design,
-        defaultValue: { summary: ODS_TAG_SHAPE.round },
-        type: { summary: ODS_TAG_SHAPES },
-      },
-      control: { type: 'select' },
-      options: ODS_TAG_SHAPES,
-    },
     size: {
       table: {
         category: CONTROL_CATEGORY.design,
@@ -93,23 +82,12 @@ export const Demo: StoryObj = {
       control: { type: 'select' },
       options: ODS_TAG_SIZES,
     },
-    variant: {
-      table: {
-        category: CONTROL_CATEGORY.design,
-        defaultValue: { summary: ODS_TAG_VARIANT.default },
-        type: { summary: ODS_TAG_VARIANTS },
-      },
-      control: { type: 'select' },
-      options: ODS_TAG_VARIANTS,
-    },
   }),
   args: {
     color: ODS_TAG_COLOR.information,
     isDisabled: false,
     label: 'My tag',
-    shape: ODS_TAG_SHAPE.round,
     size: ODS_TAG_SIZE.md,
-    variant: ODS_TAG_VARIANT.default,
   },
 };
 
@@ -150,26 +128,10 @@ export const IsDisabled: StoryObj = {
   `,
 };
 
-export const Shape: StoryObj = {
-  tags: ['isHidden'],
-  render: () => html`
-<ods-tag label="Round tag" shape="${ODS_TAG_SHAPE.round}"></ods-tag>
-<ods-tag label="Square tag" shape="${ODS_TAG_SHAPE.square}"></ods-tag>
-  `,
-};
-
 export const Size: StoryObj = {
   tags: ['isHidden'],
   render: () => html`
 <ods-tag label="MD tag" size="${ODS_TAG_SIZE.md}"></ods-tag>
 <ods-tag label="LG tag" size="${ODS_TAG_SIZE.lg}"></ods-tag>
   `,
 };
-
-export const Variant: StoryObj = {
-  tags: ['isHidden'],
-  render: () => html`
-<ods-tag label="Default tag" variant="${ODS_TAG_VARIANT.default}"></ods-tag>
-<ods-tag label="Outline tag" variant="${ODS_TAG_VARIANT.outline}"></ods-tag>
-  `,
-};
diff --git a/packages/storybook/stories/components/tag/technical-information.mdx b/packages/storybook/stories/components/tag/technical-information.mdx
@@ -35,14 +35,6 @@ Custom CSS :
 
 <Canvas of={ TagStories.IsDisabled } sourceState='shown' />
 
-### Shape
-
-<Canvas of={ TagStories.Shape } sourceState='shown' />
-
 ### Size
 
 <Canvas of={ TagStories.Size } sourceState='shown' />
-
-### Variant
-
-<Canvas of={ TagStories.Variant } sourceState='shown' />