From 7d95771dafa174531fd464f6ed62fa3ecd3ce852 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Wed, 3 Apr 2024 09:49:05 -0700
Subject: [PATCH] fix(Slug): updates Slug styles to match new floating-ui
 selectors (#16039)

* fix(Slug): updates Slug styles to match new floating-ui selectors

* chore: update snapshot

---------

Co-authored-by: Andrea N. Cardona <cardona.n.andrea@gmail.com>
---
 .../__snapshots__/PublicAPI-test.js.snap      |  14 +-
 .../react/src/components/Slug/Slug.stories.js |  42 +++++-
 packages/react/src/components/Slug/index.js   |  16 +--
 .../styles/scss/components/slug/_slug.scss    | 130 ++++++++++++++----
 4 files changed, 155 insertions(+), 47 deletions(-)

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index ed74a4c3fb55..ccb86ef96a39 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -10692,23 +10692,23 @@ Map {
           Array [
             "top",
             "top-left",
+            "top-start",
             "top-right",
+            "top-end",
             "bottom",
             "bottom-left",
+            "bottom-start",
             "bottom-right",
+            "bottom-end",
             "left",
             "left-bottom",
+            "left-end",
             "left-top",
+            "left-start",
             "right",
             "right-bottom",
-            "right-top",
-            "top-start",
-            "top-end",
-            "bottom-start",
-            "bottom-end",
-            "left-end",
-            "left-start",
             "right-end",
+            "right-top",
             "right-start",
           ],
         ],
diff --git a/packages/react/src/components/Slug/Slug.stories.js b/packages/react/src/components/Slug/Slug.stories.js
index 700264814dc7..c8d80183a84d 100644
--- a/packages/react/src/components/Slug/Slug.stories.js
+++ b/packages/react/src/components/Slug/Slug.stories.js
@@ -293,6 +293,26 @@ Callout.argTypes = {
     },
     description: 'Playground only - toggle to show the callout toolbar',
   },
+  align: {
+    options: [
+      'top',
+      'top-start',
+      'top-end',
+
+      'bottom',
+      'bottom-start',
+      'bottom-end',
+
+      'left',
+      'left-end',
+      'left-start',
+
+      'right',
+      'right-end',
+      'right-start',
+    ],
+    control: { type: 'select' },
+  },
   revertActive: {
     table: {
       disable: true,
@@ -392,7 +412,7 @@ export const Playground = (args) => {
   return (
     <>
       <div className="slug-container slug-container-example">
-        <Slug autoAlign {...args}>
+        <Slug {...args}>
           <SlugContent>{renderedContent}</SlugContent>
         </Slug>
       </div>
@@ -409,4 +429,24 @@ Playground.argTypes = {
     },
     description: 'Playground only - toggle to show the callout toolbar',
   },
+  align: {
+    options: [
+      'top',
+      'top-start',
+      'top-end',
+
+      'bottom',
+      'bottom-start',
+      'bottom-end',
+
+      'left',
+      'left-end',
+      'left-start',
+
+      'right',
+      'right-end',
+      'right-start',
+    ],
+    control: { type: 'select' },
+  },
 };
diff --git a/packages/react/src/components/Slug/index.js b/packages/react/src/components/Slug/index.js
index 9fad818221aa..8a87f418bc46 100644
--- a/packages/react/src/components/Slug/index.js
+++ b/packages/react/src/components/Slug/index.js
@@ -175,28 +175,26 @@ Slug.propTypes = {
   align: PropTypes.oneOf([
     'top',
     'top-left', // deprecated use top-start instead
+    'top-start',
     'top-right', // deprecated use top-end instead
+    'top-end',
 
     'bottom',
     'bottom-left', // deprecated use bottom-start instead
+    'bottom-start',
     'bottom-right', // deprecated use bottom-end instead
+    'bottom-end',
 
     'left',
     'left-bottom', // deprecated use left-end instead
+    'left-end',
     'left-top', // deprecated use left-start instead
+    'left-start',
 
     'right',
     'right-bottom', // deprecated use right-end instead
-    'right-top', // deprecated use right-start instead
-
-    // new values to match floating-ui
-    'top-start',
-    'top-end',
-    'bottom-start',
-    'bottom-end',
-    'left-end',
-    'left-start',
     'right-end',
+    'right-top', // deprecated use right-start instead
     'right-start',
   ]),
 
diff --git a/packages/styles/scss/components/slug/_slug.scss b/packages/styles/scss/components/slug/_slug.scss
index b19c5cde7736..03265039da41 100644
--- a/packages/styles/scss/components/slug/_slug.scss
+++ b/packages/styles/scss/components/slug/_slug.scss
@@ -264,7 +264,7 @@ $sizes: (
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret,
     // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
-    .#{$prefix}--slug.#{$prefix}--slug--enabled
+    .#{$prefix}--slug
     > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content
@@ -279,33 +279,49 @@ $sizes: (
       .#{$prefix}--popover--top,
       .#{$prefix}--popover--top-right,
       .#{$prefix}--popover--top-left,
+      .#{$prefix}--popover--top-end,
+      .#{$prefix}--popover--top-start,
       .#{$prefix}--popover--bottom,
       .#{$prefix}--popover--bottom-right,
       .#{$prefix}--popover--bottom-left,
+      .#{$prefix}--popover--bottom-start,
+      .#{$prefix}--popover--bottom-end,
       .#{$prefix}--popover--left,
       .#{$prefix}--popover--left-top,
       .#{$prefix}--popover--left-bottom,
+      .#{$prefix}--popover--left-start,
+      .#{$prefix}--popover--left-end,
       .#{$prefix}--popover--right,
       .#{$prefix}--popover--right-top,
-      .#{$prefix}--popover--right-bottom
+      .#{$prefix}--popover--right-bottom,
+      .#{$prefix}--popover--right-start,
+      .#{$prefix}--popover--right-end
     )
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret::before,
     // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
-    .#{$prefix}--slug.#{$prefix}--slug--enabled
+    .#{$prefix}--slug
     > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
       .#{$prefix}--popover--top,
       .#{$prefix}--popover--top-right,
       .#{$prefix}--popover--top-left,
+      .#{$prefix}--popover--top-end,
+      .#{$prefix}--popover--top-start,
       .#{$prefix}--popover--bottom,
       .#{$prefix}--popover--bottom-right,
       .#{$prefix}--popover--bottom-left,
+      .#{$prefix}--popover--bottom-start,
+      .#{$prefix}--popover--bottom-end,
       .#{$prefix}--popover--left,
       .#{$prefix}--popover--left-top,
       .#{$prefix}--popover--left-bottom,
+      .#{$prefix}--popover--left-start,
+      .#{$prefix}--popover--left-end,
       .#{$prefix}--popover--right,
       .#{$prefix}--popover--right-top,
-      .#{$prefix}--popover--right-bottom
+      .#{$prefix}--popover--right-bottom,
+      .#{$prefix}--popover--right-start,
+      .#{$prefix}--popover--right-end
     )
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content
@@ -326,33 +342,49 @@ $sizes: (
       .#{$prefix}--popover--top,
       .#{$prefix}--popover--top-right,
       .#{$prefix}--popover--top-left,
+      .#{$prefix}--popover--top-end,
+      .#{$prefix}--popover--top-start,
       .#{$prefix}--popover--bottom,
       .#{$prefix}--popover--bottom-right,
       .#{$prefix}--popover--bottom-left,
+      .#{$prefix}--popover--bottom-start,
+      .#{$prefix}--popover--bottom-end,
       .#{$prefix}--popover--left,
       .#{$prefix}--popover--left-top,
       .#{$prefix}--popover--left-bottom,
+      .#{$prefix}--popover--left-start,
+      .#{$prefix}--popover--left-end,
       .#{$prefix}--popover--right,
       .#{$prefix}--popover--right-top,
-      .#{$prefix}--popover--right-bottom
+      .#{$prefix}--popover--right-bottom,
+      .#{$prefix}--popover--right-start,
+      .#{$prefix}--popover--right-end
     )
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret::after,
     // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
-    .#{$prefix}--slug.#{$prefix}--slug--enabled
+    .#{$prefix}--slug
     > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
       .#{$prefix}--popover--top,
       .#{$prefix}--popover--top-right,
       .#{$prefix}--popover--top-left,
+      .#{$prefix}--popover--top-end,
+      .#{$prefix}--popover--top-start,
       .#{$prefix}--popover--bottom,
       .#{$prefix}--popover--bottom-right,
       .#{$prefix}--popover--bottom-left,
+      .#{$prefix}--popover--bottom-start,
+      .#{$prefix}--popover--bottom-end,
       .#{$prefix}--popover--left,
       .#{$prefix}--popover--left-top,
       .#{$prefix}--popover--left-bottom,
+      .#{$prefix}--popover--left-start,
+      .#{$prefix}--popover--left-end,
       .#{$prefix}--popover--right,
       .#{$prefix}--popover--right-top,
-      .#{$prefix}--popover--right-bottom
+      .#{$prefix}--popover--right-bottom,
+      .#{$prefix}--popover--right-start,
+      .#{$prefix}--popover--right-end
     )
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content
@@ -370,16 +402,20 @@ $sizes: (
     > .#{$prefix}--toggletip:is(
       .#{$prefix}--popover--top,
       .#{$prefix}--popover--top-right,
-      .#{$prefix}--popover--top-left
+      .#{$prefix}--popover--top-left,
+      .#{$prefix}--popover--top-end,
+      .#{$prefix}--popover--top-start
     )
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret,
     // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
-    .#{$prefix}--slug.#{$prefix}--slug--enabled
+    .#{$prefix}--slug
     > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
       .#{$prefix}--popover--top,
       .#{$prefix}--popover--top-right,
-      .#{$prefix}--popover--top-left
+      .#{$prefix}--popover--top-left,
+      .#{$prefix}--popover--top-end,
+      .#{$prefix}--popover--top-start
     )
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content
@@ -404,7 +440,9 @@ $sizes: (
     > .#{$prefix}--toggletip:is(
       .#{$prefix}--popover--top,
       .#{$prefix}--popover--top-right,
-      .#{$prefix}--popover--top-left
+      .#{$prefix}--popover--top-left,
+      .#{$prefix}--popover--top-end,
+      .#{$prefix}--popover--top-start
     )
     > .#{$prefix}--popover
     > .#{$prefix}--slug-content--with-actions
@@ -417,16 +455,20 @@ $sizes: (
     > .#{$prefix}--toggletip:is(
       .#{$prefix}--popover--right,
       .#{$prefix}--popover--right-bottom,
-      .#{$prefix}--popover--right-top
+      .#{$prefix}--popover--right-top,
+      .#{$prefix}--popover--right-start,
+      .#{$prefix}--popover--right-end
     )
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret,
     // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
-    .#{$prefix}--slug.#{$prefix}--slug--enabled
+    .#{$prefix}--slug
     > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
       .#{$prefix}--popover--right,
       .#{$prefix}--popover--right-bottom,
-      .#{$prefix}--popover--right-top
+      .#{$prefix}--popover--right-top,
+      .#{$prefix}--popover--right-start,
+      .#{$prefix}--popover--right-end
     )
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content
@@ -449,16 +491,20 @@ $sizes: (
     > .#{$prefix}--toggletip:is(
       .#{$prefix}--popover--bottom,
       .#{$prefix}--popover--bottom-left,
-      .#{$prefix}--popover--bottom-right
+      .#{$prefix}--popover--bottom-right,
+      .#{$prefix}--popover--bottom-start,
+      .#{$prefix}--popover--bottom-end
     )
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret,
     // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
-    .#{$prefix}--slug.#{$prefix}--slug--enabled
+    .#{$prefix}--slug
     > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
       .#{$prefix}--popover--bottom,
       .#{$prefix}--popover--bottom-left,
-      .#{$prefix}--popover--bottom-right
+      .#{$prefix}--popover--bottom-right,
+      .#{$prefix}--popover--bottom-start,
+      .#{$prefix}--popover--bottom-end
     )
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content
@@ -483,16 +529,20 @@ $sizes: (
     > .#{$prefix}--toggletip:is(
       .#{$prefix}--popover--left,
       .#{$prefix}--popover--left-bottom,
-      .#{$prefix}--popover--left-top
+      .#{$prefix}--popover--left-top,
+      .#{$prefix}--popover--left-start,
+      .#{$prefix}--popover--left-end
     )
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret,
     // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
-    .#{$prefix}--slug.#{$prefix}--slug--enabled
+    .#{$prefix}--slug
     > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
       .#{$prefix}--popover--left,
       .#{$prefix}--popover--left-bottom,
-      .#{$prefix}--popover--left-top
+      .#{$prefix}--popover--left-top,
+      .#{$prefix}--popover--left-start,
+      .#{$prefix}--popover--left-end
     )
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content
@@ -514,15 +564,19 @@ $sizes: (
   .#{$prefix}--slug
     > .#{$prefix}--toggletip:is(
       .#{$prefix}--popover--left-bottom,
-      .#{$prefix}--popover--right-bottom
+      .#{$prefix}--popover--right-bottom,
+      .#{$prefix}--popover--left-end,
+      .#{$prefix}--popover--right-end
     )
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret::after,
     // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
-    .#{$prefix}--slug.#{$prefix}--slug--enabled
+    .#{$prefix}--slug
     > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
       .#{$prefix}--popover--left-bottom,
-      .#{$prefix}--popover--right-bottom
+      .#{$prefix}--popover--right-bottom,
+      .#{$prefix}--popover--left-end,
+      .#{$prefix}--popover--right-end
     )
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content
@@ -535,20 +589,28 @@ $sizes: (
     > .#{$prefix}--toggletip:is(
       .#{$prefix}--popover--left-bottom,
       .#{$prefix}--popover--right-bottom,
+      .#{$prefix}--popover--left-end,
+      .#{$prefix}--popover--right-end,
       .#{$prefix}--popover--top,
       .#{$prefix}--popover--top-right,
-      .#{$prefix}--popover--top-left
+      .#{$prefix}--popover--top-left,
+      .#{$prefix}--popover--top-end,
+      .#{$prefix}--popover--top-start
     )
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret,
     // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
-    .#{$prefix}--slug.#{$prefix}--slug--enabled
+    .#{$prefix}--slug
     > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
       .#{$prefix}--popover--left-bottom,
       .#{$prefix}--popover--right-bottom,
+      .#{$prefix}--popover--left-end,
+      .#{$prefix}--popover--right-end,
       .#{$prefix}--popover--top,
       .#{$prefix}--popover--top-right,
-      .#{$prefix}--popover--top-left
+      .#{$prefix}--popover--top-left,
+      .#{$prefix}--popover--top-end,
+      .#{$prefix}--popover--top-start
     )
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content
@@ -564,20 +626,28 @@ $sizes: (
     > .#{$prefix}--toggletip:is(
       .#{$prefix}--popover--left-bottom,
       .#{$prefix}--popover--right-bottom,
+      .#{$prefix}--popover--left-end,
+      .#{$prefix}--popover--right-end,
       .#{$prefix}--popover--top,
       .#{$prefix}--popover--top-right,
-      .#{$prefix}--popover--top-left
+      .#{$prefix}--popover--top-left,
+      .#{$prefix}--popover--top-end,
+      .#{$prefix}--popover--top-start
     )
     > .#{$prefix}--popover:has(.#{$prefix}--slug-content--with-actions)
     > .#{$prefix}--popover-caret,
     // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
-    .#{$prefix}--slug.#{$prefix}--slug--enabled
+    .#{$prefix}--slug
     > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
       .#{$prefix}--popover--left-bottom,
       .#{$prefix}--popover--right-bottom,
+      .#{$prefix}--popover--left-end,
+      .#{$prefix}--popover--right-end,
       .#{$prefix}--popover--top,
       .#{$prefix}--popover--top-right,
-      .#{$prefix}--popover--top-left
+      .#{$prefix}--popover--top-left,
+      .#{$prefix}--popover--top-start,
+      .#{$prefix}--popover--top-end
     )
     > .#{$prefix}--popover:has(.#{$prefix}--slug-content--with-actions)
     > .#{$prefix}--popover-content
@@ -596,7 +666,7 @@ $sizes: (
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret,
     // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
-    .#{$prefix}--slug.#{$prefix}--slug--enabled
+    .#{$prefix}--slug
     > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
       .#{$prefix}--popover--left,
       .#{$prefix}--popover--right