fix(tag): adjust inline spacing

adobe · Apr 16, 2024 · e987a9d · e987a9d
1 parent 9aac742
commit e987a9d
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 6 deletions.
diff --git a/components/tag/index.css b/components/tag/index.css
@@ -87,21 +87,24 @@ governing permissions and limitations under the License.
   --spectrum-tag-content-color-disabled: var(--spectrum-disabled-content-color);
 
   /* spacing */
-  --spectrum-tag-spacing-inline-start: var(--spectrum-component-edge-to-visual-100);
+  --spectrum-tag-spacing-inline-start: var(--spectrum-component-edge-to-text-100);
 
   /* icon spacing */
-  --spectrum-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100);
   --spectrum-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-100);
   --spectrum-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-100);
+  --spectrum-tag-icon-spacing-inline-start: var(--spectrum-component-edge-to-visual-100);
+  --spectrum-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100);
 
   /* avatar */
   --spectrum-tag-avatar-size: var(--spectrum-avatar-size-100);
   --spectrum-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium);
   --spectrum-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-medium);
+  --spectrum-tag-avatar-spacing-inline-start: var(--spectrum-component-edge-to-visual-100);
   --spectrum-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100);
 
   /* thumbnail */
   --spectrum-tag-thumbnail-size: var(--spectrum-thumbnail-size-100);
+  --spectrum-tag-thumbnail-spacing-inline-start: var(--spectrum-component-edge-to-visual-100);
   --spectrum-tag-thumbnail-spacing-inline-end: var(--spectrum-text-to-visual-100);
 
   /* label spacing */
@@ -127,19 +130,22 @@ governing permissions and limitations under the License.
   --spectrum-tag-icon-size: var(--spectrum-workflow-icon-size-75);
   --spectrum-tag-corner-radius: var(--spectrum-corner-radius-medium-size-small);
 
-  --spectrum-tag-spacing-inline-start: var(--spectrum-component-edge-to-visual-75);
+  --spectrum-tag-spacing-inline-start: var(--spectrum-component-edge-to-text-75);
 
   --spectrum-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-75);
   --spectrum-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-75);
+  --spectrum-tag-icon-spacing-inline-start: var(--spectrum-component-edge-to-visual-75);
   --spectrum-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-75);
 
   --spectrum-tag-avatar-size: var(--spectrum-avatar-size-50);
   --spectrum-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-small);
   --spectrum-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-small);
+  --spectrum-tag-avatar-spacing-inline-start: var(--spectrum-component-edge-to-visual-75);
   --spectrum-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-75);
 
   --spectrum-tag-thumbnail-size: var(--spectrum-thumbnail-size-50);
-  --spectrum-tag-thumbnail-spacing-inline-end: var(--spectrum-text-to-visual-50);
+  --spectrum-tag-thumbnail-spacing-inline-start: var(--spectrum-component-edge-to-visual-75);
+  --spectrum-tag-thumbnail-spacing-inline-end: var(--spectrum-text-to-visual-75);
 
   --spectrum-tag-label-spacing-block: var(--spectrum-component-top-to-text-75);
   --spectrum-tag-label-spacing-inline-end: var(--spectrum-component-edge-to-text-75);
@@ -156,18 +162,21 @@ governing permissions and limitations under the License.
   --spectrum-tag-icon-size: var(--spectrum-workflow-icon-size-200);
   --spectrum-tag-corner-radius: var(--spectrum-corner-radius-medium-size-large);
 
-  --spectrum-tag-spacing-inline-start: var(--spectrum-component-edge-to-visual-200);
+  --spectrum-tag-spacing-inline-start: var(--spectrum-component-edge-to-text-200);
 
   --spectrum-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-200);
   --spectrum-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-200);
+  --spectrum-tag-icon-spacing-inline-start: var(--spectrum-component-edge-to-visual-200);
   --spectrum-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-200);
 
   --spectrum-tag-avatar-size: var(--spectrum-avatar-size-200);
   --spectrum-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-large);
   --spectrum-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-large);
+  --spectrum-tag-avatar-spacing-inline-start: var(--spectrum-component-edge-to-visual-200);
   --spectrum-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-200);
 
   --spectrum-tag-thumbnail-size: var(--spectrum-thumbnail-size-200);
+  --spectrum-tag-thumbnail-spacing-inline-start: var(--spectrum-component-edge-to-visual-200);
   --spectrum-tag-thumbnail-spacing-inline-end: var(--spectrum-text-to-visual-200);
 
   --spectrum-tag-label-spacing-block: var(--spectrum-component-top-to-text-200);
@@ -216,6 +225,10 @@ governing permissions and limitations under the License.
                             - var(--mod-tag-border-width, var(--spectrum-tag-border-width)));
     margin-block-end: calc(var(--mod-tag-icon-spacing-block-end, var(--spectrum-tag-icon-spacing-block-end))
                             - var(--mod-tag-border-width, var(--spectrum-tag-border-width)));
+
+    /* offset to the difference between icon spacing and tag spacing */
+    margin-inline-start: calc(var(--mod-tag-icon-spacing-inline-start, var(--spectrum-tag-icon-spacing-inline-start))
+                              - var(--mod-tag-spacing-inline-start, var(--spectrum-tag-spacing-inline-start)));
     margin-inline-end: var(--mod-tag-icon-spacing-inline-end, var(--spectrum-tag-icon-spacing-inline-end));
   }
 
@@ -224,10 +237,17 @@ governing permissions and limitations under the License.
                             - var(--mod-tag-border-width, var(--spectrum-tag-border-width)));
     margin-block-end: calc(var(--mod-tag-avatar-spacing-block-end, var(--spectrum-tag-avatar-spacing-block-end))
                          - var(--mod-tag-border-width, var(--spectrum-tag-border-width)));
+
+    /* offset to the difference between avatar spacing and tag spacing */
+    margin-inline-start: calc(var(--mod-tag-avatar-spacing-inline-start, var(--spectrum-tag-avatar-spacing-inline-start))
+                              - var(--mod-tag-spacing-inline-start, var(--spectrum-tag-spacing-inline-start)));
     margin-inline-end: var(--mod-tag-avatar-spacing-inline-end, var(--spectrum-tag-avatar-spacing-inline-end));
   }
 
   .spectrum-Thumbnail {
+    /* offset to the difference between thumbnail spacing and tag spacing */
+    margin-inline-start: calc(var(--mod-tag-thumbnail-spacing-inline-start, var(--spectrum-tag-thumbnail-spacing-inline-start))
+                            - var(--mod-tag-spacing-inline-start, var(--spectrum-tag-spacing-inline-start)));
     margin-inline-end: var(--mod-tag-thumbnail-spacing-inline-end, var(--spectrum-tag-thumbnail-spacing-inline-end));
   }
 
@@ -242,7 +262,8 @@ governing permissions and limitations under the License.
 
     /* use negative margin to cancel label to edge margin, then add clear button start margin */
     margin-inline-start: calc(var(--mod-tag-label-to-clear-icon, var(--spectrum-tag-label-to-clear-icon))
-                              - (var(--mod-tag-label-spacing-inline-end, var(--spectrum-tag-label-spacing-inline-end))));
+                              - calc(var(--mod-tag-label-spacing-inline-end, var(--spectrum-tag-label-spacing-inline-end))
+                                    - var(--mod-tag-border-width, var(--spectrum-tag-border-width))));
     margin-inline-end: calc(var(--mod-tag-edge-to-clear-icon, var(--spectrum-tag-edge-to-clear-icon))
                             - var(--mod-tag-border-width, var(--spectrum-tag-border-width)));
 

diff --git a/components/tag/metadata/mods.md b/components/tag/metadata/mods.md
@@ -8,6 +8,7 @@
 | `--mod-tag-avatar-spacing-block-end`                 |
 | `--mod-tag-avatar-spacing-block-start`               |
 | `--mod-tag-avatar-spacing-inline-end`                |
+| `--mod-tag-avatar-spacing-inline-start`              |
 | `--mod-tag-background-color`                         |
 | `--mod-tag-background-color-active`                  |
 | `--mod-tag-background-color-disabled`                |
@@ -57,6 +58,7 @@
 | `--mod-tag-icon-spacing-block-end`                   |
 | `--mod-tag-icon-spacing-block-start`                 |
 | `--mod-tag-icon-spacing-inline-end`                  |
+| `--mod-tag-icon-spacing-inline-start`                |
 | `--mod-tag-label-font-weight`                        |
 | `--mod-tag-label-line-height`                        |
 | `--mod-tag-label-line-height-cjk`                    |
@@ -68,4 +70,5 @@
 | `--mod-tag-spacing-inline-start`                     |
 | `--mod-tag-thumbnail-size`                           |
 | `--mod-tag-thumbnail-spacing-inline-end`             |
+| `--mod-tag-thumbnail-spacing-inline-start`           |
 | `--mod-thumbnail-opacity-disabled`                   |
diff --git a/components/tag/metadata/tag.yml b/components/tag/metadata/tag.yml
@@ -16,18 +16,22 @@ sections:
       - Thumbnails can now be used in tags.
       - New corner rounding, min/max width, and spacing tokens are used.
       - Medium size is now the default, and the class `.spectrum-Tag--sizeM` has been removed.
+      - Spacing has been adjusted to match design spec.
       - Borders have been made transparent for almost all variants, and therefore many mod custom properties related to borders have been removed.
       - New and removed mods include:
         - New mods:
+          - `--mod-tag-avatar-spacing-inline-start`
           - `--mod-tag-avatar-size`
           - `--mod-tag-background-color-invalid`
           - `--mod-tag-edge-to-clear-icon`
+          - `--mod-tag-icon-spacing-inline-start`
           - `--mod-tag-label-line-height-cjk`
           - `--mod-tag-label-to-clear-icon`
           - `--mod-tag-maximum-width`
           - `--mod-tag-minimum-width`
           - `--mod-thumbnail-opacity-disabled`
           - `--mod-tag-thumbnail-size`
+          - `--mod-tag-thumbnail-spacing-inline-start`
           - `--mod-tag-thumbnail-spacing-inline-end`
         - Removed mods:
           - `--mod-tag-border-color-active`