add feature flag

Author: Yuraima Estevez

polaris-react/src/components/Tag/Tag.scss

@@ -9,11 +9,21 @@ $button-size: 20px;
   align-items: center;
   min-height: 28px;
   padding: 0 var(--p-space-2);
-  // TODO which secondary bg color? new or existing?
   background-color: var(--p-color-bg-strong);
-  border-radius: var(--p-border-radius-2);
-  // TODO need secondary-text-on-fill color token
+  border-radius: var(--p-border-radius-1);
   color: var(--p-color-text);
+  line-height: 0;
+
+  #{$se23} & {
+    background-color: var(--p-color-bg-strong);
+    border: var(--p-border-width-1) solid var(--p-color-bg-strong);
+    // stylelint-disable-next-line -- se23 6px token
+    padding: 0 6px;
+    border-radius: var(--p-border-radius-2);
+    // stylelint-disable-next-line -- se23 token
+    color: #303030;
+    min-height: $height;
+  }
 
   &.disabled {
     transition: none;
@@ -23,6 +33,18 @@ $button-size: 20px;
     svg {
       fill: var(--p-color-icon-disabled);
     }
+
+    #{$se23} & {
+      transition: none;
+      background: var(--p-color-bg-disabled);
+      border-color: var(--p-color-bg-disabled);
+      color: var(--p-color-text-disabled);
+
+      // stylelint-disable-next-line -- se23 ignore s combinator max
+      svg {
+        fill: var(--p-color-icon-disabled);
+      }
+    }
   }
 
   &.clickable {
@@ -37,10 +59,14 @@ $button-size: 20px;
     line-height: var(--p-font-line-height-2);
 
     &:hover {
-      // TODO need subdued-fill token
       background: var(--p-color-bg-strong-hover);
-      // TODO need secondary-border-l2
-      // border-color: var(--p-color-secondary-border-l2)
+
+      #{$se23} & {
+        // stylelint-disable-next-line -- se23 color-subduedbg-fill
+        background: #f3f3f3;
+        // stylelint-disable-next-line -- se23 color-border-subdued
+        border: var(--p-border-width-1) solid #ebebeb;
+      }
     }
 
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
@@ -53,10 +79,14 @@ $button-size: 20px;
     }
 
     &:active {
-      // TODO need secondary-fill-l2
       background: var(--p-color-bg-strong-hover);
-      // TODO need secondary-border-l2
-      // border-color: var(--p-secondary-borderl2);
+
+      #{$se23} & {
+        // stylelint-disable-next-line -- se23 color-bg-strong-hover
+        background: #d4d4d4;
+        // stylelint-disable-next-line -- se23 color-bg-strong-hover
+        border: var(--p-border-width-1) solid #d4d4d4;
+      }
     }
 
     &:disabled {
@@ -74,10 +104,21 @@ $button-size: 20px;
 
   &.removable {
     padding-right: 0;
+
+    #{$se23} & {
+      padding-right: 0;
+    }
   }
 
   &.linkable {
     padding: 0;
+
+    #{$se23} &:hover {
+      // stylelint-disable-next-line -- se23 color-subduedbg-fill
+      background: #f3f3f3;
+      // stylelint-disable-next-line -- se23 color-border-subdued
+      border: var(--p-border-width-1) solid #ebebeb;
+    }
   }
 
   @media #{$p-breakpoints-sm-up} {
@@ -86,14 +127,19 @@ $button-size: 20px;
 }
 
 .TagText {
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
+  font-size: 13px;
   line-height: var(--p-font-line-height-2);
   min-height: $height;
   padding: var(--p-space-1) 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   vertical-align: middle;
-  // TODO need font-weight 450 token
+
+  #{$se23} & {
+    padding: 0;
+  }
 
   @media #{$p-breakpoints-sm-up} {
     font-size: var(--p-font-size-75);
@@ -109,7 +155,16 @@ $button-size: 20px;
   height: $button-size;
   width: $button-size;
   margin: 0 var(--p-space-1);
-  border-radius: var(--p-border-radius-2);
+  border-radius: var(--p-border-radius-full);
+
+  #{$se23} .removable.linkable & {
+    margin-left: var(--p-space-05);
+  }
+
+  #{$se23} & {
+    // stylelint-disable-next-line -- se23 7px token
+    border-radius: 7px;
+  }
 
   svg {
     fill: var(--p-color-icon);
@@ -155,6 +210,11 @@ $button-size: 20px;
   min-height: $height;
   padding: 0 var(--p-space-2);
 
+  #{$se23} & {
+    min-height: $height;
+    padding: 0;
+  }
+
   .LinkText {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     @include truncate;
@@ -164,6 +224,10 @@ $button-size: 20px;
     padding-top: var(--p-space-1);
     padding-bottom: var(--p-space-1);
 
+    #{$se23} & {
+      padding: 0;
+    }
+
     @media #{$p-breakpoints-sm-up} {
       font-size: var(--p-font-size-75);
       padding-top: var(--p-space-05);
@@ -183,6 +247,11 @@ $button-size: 20px;
   &:hover {
     background: var(--p-color-bg-strong-hover);
     text-decoration: underline;
+
+    #{$se23} & {
+      // stylelint-disable-next-line -- se23 color-subduedbg-fill
+      background: #f3f3f3;
+    }
   }
 
   &.segmented {

polaris-react/src/components/Tag/Tag.stories.tsx

@@ -8,7 +8,12 @@ export default {
 } as ComponentMeta<typeof Tag>;
 
 export function Default() {
-  return <Tag>Wholesale</Tag>;
+  return (
+    <LegacyStack>
+      <Tag>Wholesale</Tag>
+      <Tag disabled>Wholesale</Tag>
+    </LegacyStack>
+  );
 }
 
 export function Removable() {

polaris-react/src/components/Tag/Tag.tsx

@@ -81,7 +81,6 @@ export function Tag({
       onMouseUp={handleMouseUpByBlurring}
       disabled={disabled}
     >
-      {/* TODO update to new x icon */}
       <Icon source={CancelSmallMinor} />
     </button>
   ) : null;