Docs(web-react,web-twig): Use new spacing tokens values in Tooltip #D…

…S-1451
lmc-eu · Sep 12, 2024 · 88086c3 · 88086c3
1 parent 5b57f27
commit 88086c3
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 11 deletions.
diff --git a/packages/web-react/src/components/Tooltip/demo/TooltipAdvancedFloating.tsx b/packages/web-react/src/components/Tooltip/demo/TooltipAdvancedFloating.tsx
@@ -72,12 +72,12 @@ const TooltipAdvancedFloating = () => {
 
   return (
     <div className="docs-Stack docs-Stack-stretch">
-      <p className="mb-600">
+      <p className="mb-700">
         Try scrolling the frame or resizing the window to see how the Tooltip behaves. The Floating UI library is trying
         to keep the Tooltip in the viewport and it is also flipping, shifting and resizing the Tooltip when it is not
         possible to keep it in the viewport.
       </p>
-      <Grid cols={{ mobile: 1, tablet: 2, desktop: 4 }} marginBottom="space-600">
+      <Grid cols={{ mobile: 1, tablet: 2, desktop: 4 }} marginBottom="space-700">
         <Checkbox id="flip" isChecked={flip} label="Enable flipping" onChange={() => setFlip(!flip)} />
         <Checkbox
           id="flip-cross-axis"
@@ -88,7 +88,7 @@ const TooltipAdvancedFloating = () => {
         <Checkbox id="shift" isChecked={shift} label="Enable shifting" onChange={() => setShift(!shift)} />
         <Checkbox id="size" isChecked={size} label="Enable sizing" onChange={() => setSize(!size)} />
       </Grid>
-      <Grid cols={{ mobile: 1, tablet: 2, desktop: 2 }} marginBottom="space-600">
+      <Grid cols={{ mobile: 1, tablet: 2, desktop: 2 }} marginBottom="space-700">
         <Select
           id="advanced-placement"
           name="advanced-placement"

diff --git a/packages/web-react/src/components/Tooltip/demo/TooltipPlacements.tsx b/packages/web-react/src/components/Tooltip/demo/TooltipPlacements.tsx
@@ -142,7 +142,7 @@ const TooltipPlacements = () => {
           />
         </GridItem>
         <GridItem columnStart={2} rowStart={2}>
-          <div className="mx-auto space-1200">
+          <div className="mx-auto space-1600">
             <Tooltip
               isOpen
               id="tooltip-placement"
@@ -151,7 +151,7 @@ const TooltipPlacements = () => {
               enableFlipping={false}
             >
               <TooltipTrigger elementType="div" UNSAFE_style={{ margin: '5rem auto' }}>
-                <DocsBox UNSAFE_className="px-900 py-900">
+                <DocsBox UNSAFE_className="px-1100 py-1100">
                   Click
                   <br /> the dots!
                 </DocsBox>

diff --git a/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipAdvancedFloating.twig b/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipAdvancedFloating.twig
@@ -1,16 +1,16 @@
-<p class="mb-600">
+<p class="mb-700">
     Try scrolling the frame or resizing the window to see how the Tooltip behaves.
     The Floating UI library is trying to keep the Tooltip in the viewport and it is also flipping,
     shifting and resizing the Tooltip when it is not possible to keep it in the viewport.
 </p>
 
-<Grid cols="{{ { mobile: 1, tablet: 2, desktop: 4 } }}" marginBottom="space-600">
+<Grid cols="{{ { mobile: 1, tablet: 2, desktop: 4 } }}" marginBottom="space-700">
     <Checkbox id="my-advanced-flip" label="Enable flipping" isChecked/>
     <Checkbox id="my-advanced-flip-cross-axis" label="Enable flipping cross axis" isChecked/>
     <Checkbox id="my-advanced-shift" label="Enable shifting" isChecked/>
     <Checkbox id="my-advanced-size" label="Enable sizing" isChecked/>
 </Grid>
-<Grid cols="{{ { mobile: 1, tablet: 2, desktop: 2 } }}" marginBottom="space-600">
+<Grid cols="{{ { mobile: 1, tablet: 2, desktop: 2 } }}" marginBottom="space-700">
     <Select id="my-advanced-select" label="Suggested placement">
         <option value="top-start" selected>top-start</option>
         <option value="top">top</option>
@@ -67,7 +67,7 @@
                 id="my-advanced-tooltip"
                 placement="top-start"
                 flipFallbackAxisSideDirection="top, right, bottom"
-                isDismissible 
+                isDismissible
                 isOpen
             >
                 This long tooltip is flipping, resizing and shifting to stay in the viewport.

diff --git a/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipPlacements.twig b/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipPlacements.twig
@@ -30,8 +30,8 @@
         </GridItem>
         <GridItem columnStart="2" rowStart="2">
 
-            <Tooltip marginX="auto" marginY="space-1200">
-                <DocsBox UNSAFE_className="px-900 py-900">Click<br /> the dots!</DocsBox>
+            <Tooltip marginX="auto" marginY="space-1600">
+                <DocsBox UNSAFE_className="px-1100 py-1100">Click<br /> the dots!</DocsBox>
                 <TooltipPopover id="tooltip-placements-example" placement="bottom" trigger="click" enableFlipping={ false }>
                     <span id="tooltip-placements-example-text">bottom</span>
                 </TooltipPopover>