fix(Slug): updates Slug styles to match new floating-ui selectors (#1…

…6039) * fix(Slug): updates Slug styles to match new floating-ui selectors * chore: update snapshot --------- Co-authored-by: Andrea N. Cardona <[email protected]>
carbon-design-system · Apr 3, 2024 · c573f97 · c573f97
1 parent 801dd7b
commit c573f97
Show file tree

Hide file tree

Showing 4 changed files with 155 additions and 47 deletions.
diff --git 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
@@ -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
@@ -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',
   ]),