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

…S-1451
lmc-eu · Sep 17, 2024 · 3b91052 · 3b91052
1 parent 3047307
commit 3b91052
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 15 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"
@@ -127,7 +127,7 @@ const TooltipAdvancedFloating = () => {
         </Select>
       </Grid>
       <div
-        className="bg-cover"
+        className="bg-secondary"
         style={{ width: '100%', maxWidth: '100%', height: '30rem', overflow: 'auto' }}
         ref={viewportRef}
       >

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-react/src/components/Tooltip/stories/Tooltip.stories.tsx b/packages/web-react/src/components/Tooltip/stories/Tooltip.stories.tsx
@@ -86,7 +86,7 @@ const TooltipWithHooks = (args: SpiritTooltipProps) => {
 
   return (
     <div
-      className="bg-cover"
+      className="bg-secondary"
       style={{ width: '40rem', maxWidth: '100%', height: '30rem', overflow: 'auto' }}
       ref={viewportRef}
     >

diff --git a/packages/web-react/src/components/Tooltip/stories/UncontrolledTooltip.stories.tsx b/packages/web-react/src/components/Tooltip/stories/UncontrolledTooltip.stories.tsx
@@ -79,7 +79,7 @@ const UncontrolledTooltipWithHooks = (args: Omit<SpiritTooltipProps, 'onToggle'>
 
   return (
     <div
-      className="bg-cover"
+      className="bg-secondary"
       style={{ width: '40rem', maxWidth: '100%', height: '30rem', overflow: 'auto' }}
       ref={viewportRef}
     >

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>
@@ -52,7 +52,7 @@
     }
 </style>
 
-<div class="example-viewport bg-cover" id="my-advanced-viewport">
+<div class="example-viewport bg-secondary" id="my-advanced-viewport">
     <div class="example-content" id="my-advanced-content">
         <Tooltip UNSAFE_className="d-inline-block">
             <Button
@@ -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>