feat(tag): increase icon size and add ellipsis

ovh · Jul 29, 2024 · 44de498 · 44de498
1 parent 0de4440
commit 44de498
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 3 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
@@ -1,3 +1,4 @@
+@import '../../../../../style/font';
 @import '../../../../../style/tag';
 
 :host(.ods-tag) {
@@ -77,10 +78,24 @@
 
     &--md {
       @include ods-tag-size('md');
+
+      & #{$tag}__close,
+      & #{$tag}__icon {
+        font-size: 1rem;
+      }
     }
 
     &--lg {
       @include ods-tag-size('lg');
+
+      & #{$tag}__close,
+      & #{$tag}__icon {
+        font-size: 1.25rem;
+      }
+    }
+
+    &__label {
+      @include ellipsis();
     }
   }
 }
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
@@ -56,13 +56,19 @@ export class OdsTag {
           tabindex={ this.isDisabled ? -1 : 0 }>
           {
             !!this.icon &&
-            <ods-icon name={ this.icon }>
+            <ods-icon
+              class="ods-tag__tag__icon"
+              name={ this.icon }>
             </ods-icon>
           }
 
-          { this.label }
+          <span class="ods-tag__tag__label">
+            { this.label }
+          </span>
 
-          <ods-icon name={ ODS_ICON_NAME.cross }>
+          <ods-icon
+            class="ods-tag__tag__close"
+            name={ ODS_ICON_NAME.cross }>
           </ods-icon>
         </div>
       </Host>

diff --git a/packages/ods/src/components/tag/src/index.html b/packages/ods/src/components/tag/src/index.html
@@ -41,6 +41,10 @@
   <ods-tag label="SM tag" size="sm"></ods-tag>
   <ods-tag label="MD tag" size="md"></ods-tag>
   <ods-tag label="LG tag" size="lg"></ods-tag>
+  <br /><br />
+  <ods-tag icon="star" label="SM tag" size="sm"></ods-tag>
+  <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>

diff --git a/packages/ods/src/style/_font.scss b/packages/ods/src/style/_font.scss
@@ -0,0 +1,15 @@
+@use 'sass:math';
+
+/**
+ * Transform a px value to its rem equivalent
+ * ex: px-to-rem(14px) => return 0.875rem
+ */
+@function px-to-rem($size, $font-size: 16px) {
+  @return math.div($size, $font-size) * 1rem;
+}
+
+@mixin ellipsis() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
diff --git a/packages/ods/src/style/index.scss b/packages/ods/src/style/index.scss
@@ -1,5 +1,6 @@
 @forward 'button';
 @forward 'focus';
+@forward 'font';
 @forward 'link';
 @forward 'skeleton';
 @forward 'tag';