Merge pull request #2755 from SUI-Components/remove-settings-v7-theme

make tag compatible without theme-v7 deprecated sui-theme module
SUI-Components · Aug 21, 2024 · a7a43ef · a7a43ef
2 parents 533e040 + 59b4edf
commit a7a43ef
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 48 deletions.
diff --git a/components/atom/tag/demo/index.js b/components/atom/tag/demo/index.js
@@ -5,8 +5,8 @@ import ArticleDesign from './articles/ArticleDesign.js'
 import ArticleIcons from './articles/ArticleIcons.js'
 import ArticleIsFitted from './articles/ArticleIsFitted.js'
 import ArticleSize from './articles/ArticleSize.js'
-import ArticleResponsive from './articles/ArticleResponsive.js'
 import ArticleTypes from './articles/ArticleTypes.js'
+import ArticleResponsive from './articles/ArticleResponsive.js'
 import {CLASS_SECTION, closeIcon, icon} from './settings.js'
 
 import './index.scss'
@@ -25,7 +25,7 @@ export default () => (
     <br />
     <ArticleIcons className={CLASS_SECTION} />
     <br />
-    <Article className={CLASS_SECTION}></Article>
+    <Article className={CLASS_SECTION} />
     <br />
     <ArticleTypes className={CLASS_SECTION} icon={icon} closeIcon={closeIcon} />
     <br />

diff --git a/components/atom/tag/src/index.js b/components/atom/tag/src/index.js
@@ -29,8 +29,8 @@ const AtomTag = forwardRef(
 
     const classNames = cx(
       'sui-AtomTag',
-      `sui-AtomTag-${size}`,
-      design && `sui-AtomTag--${design}`,
+      `sui-AtomTag--size-${size}`,
+      design && `sui-AtomTag--design-${design}`,
       icon && 'sui-AtomTag-hasIcon',
       responsive && 'sui-AtomTag--responsive',
       type && `sui-AtomTag--${type}`,

diff --git a/components/atom/tag/src/index.scss b/components/atom/tag/src/index.scss
@@ -1,4 +1,3 @@
-@import '~@s-ui/theme/lib/settings-compat-v7/index';
 @import '~@s-ui/theme/lib/index';
 
 @import './styles/settings.scss';

diff --git a/components/atom/tag/src/styles/index.scss b/components/atom/tag/src/styles/index.scss
@@ -2,19 +2,19 @@ $base-class: '.sui-AtomTag';
 
 #{$base-class} {
   $self: &;
+  border-radius: ceil($h-atom-tag-m * 0.5);
+  height: $h-atom-tag-m;
+  padding: $p-atom-tag-m;
+  border: $bd-atom-tag;
   align-items: center;
   align-content: center;
   background-color: $bgc-atom-tag;
-  border: $bd-atom-tag;
-  border-radius: ceil($h-atom-tag-m * 0.5);
   box-sizing: border-box;
   cursor: default;
   display: inline-flex;
   font-size: $fz-s;
-  height: $h-atom-tag-m;
   justify-content: center;
   margin: 0 $m-atom-tag $m-atom-tag 0;
-  padding: $p-atom-tag-m;
   position: relative;
   white-space: nowrap;
 
@@ -75,10 +75,12 @@ $base-class: '.sui-AtomTag';
 
   &-icon {
     @include icon-atom-tag(icon);
+    margin-left: 0;
   }
 
   &-secondary-icon {
     @include icon-atom-tag(icon-secondary);
+    margin-right: 0;
   }
   &-actionable {
     background-color: $bgc-atom-tag-actionable;
@@ -111,7 +113,7 @@ $base-class: '.sui-AtomTag';
       }
     }
 
-    &#{$self}--outline {
+    &#{$self}--design-outline {
       border-color: $c-atom-tag-actionable-invert;
       color: $c-atom-tag-actionable-invert;
       fill: $c-atom-tag-actionable-invert;
@@ -133,70 +135,108 @@ $base-class: '.sui-AtomTag';
     }
   }
 
-  &-small {
-    height: $h-atom-tag-s;
-    padding: $p-atom-tag-s;
-    &.sui-AtomTag-hasIcon.sui-AtomTag-hasClose {
-      padding: map-get($p-atom-tag-hasIcon-hasClose, 'small');
-    }
+  &--size {
+    &-small {
+      border-radius: ceil($h-atom-tag-s * 0.5);
+      height: $h-atom-tag-s;
+      padding: $p-atom-tag-s;
+      &.sui-AtomTag-hasIcon.sui-AtomTag-hasClose {
+        padding: map-get($p-atom-tag-hasIcon-hasClose, 'small');
+      }
 
-    & .sui-AtomTag-label {
-      line-height: $h-atom-tag-s;
-    }
+      & .sui-AtomTag-label {
+        line-height: $h-atom-tag-s;
+      }
 
-    .sui-AtomTag-closeable {
-      @include icon-secondary-clickable-area($h-atom-tag-s);
+      .sui-AtomTag-closeable {
+        @include icon-secondary-clickable-area($h-atom-tag-s);
+      }
     }
 
-    .sui-AtomTag-icon {
-      margin-left: 0;
-    }
+    &-medium {
+      height: $h-atom-tag-m;
+      padding: $p-atom-tag-m;
+      border-radius: ceil($h-atom-tag-m * 0.5);
+      &.sui-AtomTag-hasIcon.sui-AtomTag-hasClose {
+        padding: map-get($p-atom-tag-hasIcon-hasClose, 'medium');
+      }
+
+      & .sui-AtomTag-label {
+        line-height: $h-atom-tag-m;
+      }
 
-    .sui-AtomTag-secondary-icon {
-      margin-right: 0;
+      .sui-AtomTag-closeable {
+        @include icon-secondary-clickable-area($h-atom-tag-m);
+      }
     }
-  }
 
-  &-medium {
-    &.sui-AtomTag-hasIcon.sui-AtomTag-hasClose {
-      padding: map-get($p-atom-tag-hasIcon-hasClose, 'medium');
+    &-large {
+      border-radius: ceil($h-atom-tag-l * 0.5);
+      height: $h-atom-tag-l;
+      padding: $p-atom-tag-l;
+      &.sui-AtomTag-hasIcon.sui-AtomTag-hasClose {
+        padding: map-get($p-atom-tag-hasIcon-hasClose, 'large');
+      }
+
+      & .sui-AtomTag-label {
+        line-height: $h-atom-tag-l;
+      }
+
+      .sui-AtomTag-closeable {
+        @include icon-secondary-clickable-area($h-atom-tag-l);
+      }
     }
   }
 
-  &-large {
+  &--responsive {
     border-radius: ceil($h-atom-tag-l * 0.5);
     height: $h-atom-tag-l;
     padding: $p-atom-tag-l;
-    &.sui-AtomTag-hasIcon.sui-AtomTag-hasClose {
-      padding: map-get($p-atom-tag-hasIcon-hasClose, 'large');
-    }
-
     & .sui-AtomTag-label {
       line-height: $h-atom-tag-l;
     }
-
     .sui-AtomTag-closeable {
       @include icon-secondary-clickable-area($h-atom-tag-l);
     }
-  }
 
-  &--responsive {
-    @include media-breakpoint-down(s) {
-      border-radius: ceil($h-atom-tag-l * 0.5);
-      height: $h-atom-tag-l;
-      padding: $p-atom-tag-l;
+    @include media-breakpoint-up(s) {
+      &#{$self}--size {
+        &-small {
+          border-radius: ceil($h-atom-tag-s * 0.5);
+          height: $h-atom-tag-s;
+          padding: $p-atom-tag-s;
+          &.sui-AtomTag-hasIcon.sui-AtomTag-hasClose {
+            padding: map-get($p-atom-tag-hasIcon-hasClose, 'small');
+          }
 
-      & .sui-AtomTag-label {
-        line-height: $h-atom-tag-l;
-      }
+          & .sui-AtomTag-label {
+            line-height: $h-atom-tag-s;
+          }
 
-      .sui-AtomTag-closeable {
-        @include icon-secondary-clickable-area($h-atom-tag-l);
+          .sui-AtomTag-closeable {
+            @include icon-secondary-clickable-area($h-atom-tag-s);
+          }
+        }
+        &-medium {
+          height: $h-atom-tag-m;
+          padding: $p-atom-tag-m;
+          &.sui-AtomTag-hasIcon.sui-AtomTag-hasClose {
+            padding: map-get($p-atom-tag-hasIcon-hasClose, 'medium');
+          }
+
+          & .sui-AtomTag-label {
+            line-height: $h-atom-tag-m;
+          }
+
+          .sui-AtomTag-closeable {
+            @include icon-secondary-clickable-area($h-atom-tag-m);
+          }
+        }
       }
     }
   }
 
-  &--outline {
+  &--design-outline {
     background-color: $bgc-atom-tag-outline;
     border: $bdw-atom-tag-outline solid $bc-atom-tag-outline;
   }