Merge branch 'main' into feat/eui-plus-color-palettes

elastic · Mar 6, 2025 · 97b5d25 · 97b5d25
2 parents 89135ab + d032c52
commit 97b5d25
Showing 1 changed file with 73 additions and 44 deletions.
diff --git a/packages/website/docs/components/utilities/scroll/previews.tsx b/packages/website/docs/components/utilities/scroll/previews.tsx
@@ -2,66 +2,95 @@ import { css } from '@emotion/react';
 
 import {
   EuiFlexGroup,
-  EuiFlexItem,
-  EuiPanel,
-  EuiText,
   logicalCSS,
   logicalCSSWithFallback,
   useEuiOverflowScroll,
   useEuiScrollBar,
+  useEuiTheme,
 } from '@elastic/eui';
 
 import { ScrollContent } from './scroll_content';
 
-const verticalBaseCss = ({ euiTheme }) => css`
-  ${logicalCSSWithFallback('overflow-y', 'auto')}
-  ${logicalCSS('height', `${euiTheme.base * 12}px`)}
-`;
-
 const horizontalBaseCss = () => css`
   ${logicalCSSWithFallback('overflow-x', 'auto')}
   ${logicalCSS('width', '100%')}
 `;
 
-export const ScrollBarClassNamePreview = () => (
-  <div tabIndex={0} className="eui-scrollBar" css={verticalBaseCss}>
-    <ScrollContent />
-  </div>
-);
+export const ScrollBarClassNamePreview = () => {
+  const { euiTheme } = useEuiTheme();
 
-export const ScrollBarHookPreview = () => (
-  <div
-    tabIndex={0}
-    css={[
-      css`
-        ${useEuiScrollBar()}
-      `,
-      verticalBaseCss,
-    ]}
-  >
-    <ScrollContent />
-  </div>
-);
+  return (
+    <div
+      tabIndex={0}
+      className="eui-scrollBar"
+      css={css`
+        ${logicalCSSWithFallback('overflow-y', 'auto')}
+        ${logicalCSS('height', `${euiTheme.base * 12}px`)}
+      `}
+    >
+      <ScrollContent />
+    </div>
+  );
+};
 
-export const VerticalScrollClassNamePreview = () => (
-  <div tabIndex={0} className="eui-yScrollWithShadows" css={verticalBaseCss}>
-    <ScrollContent />
-  </div>
-);
+export const ScrollBarHookPreview = () => {
+  const { euiTheme } = useEuiTheme();
 
-export const VerticalScrollHookPreview = () => (
-  <div
-    tabIndex={0}
-    css={[
-      css`
-        ${useEuiOverflowScroll('y', true)}
-      `,
-      verticalBaseCss,
-    ]}
-  >
-    <ScrollContent />
-  </div>
-);
+  return (
+    <div
+      tabIndex={0}
+      css={[
+        css`
+          ${useEuiScrollBar()}
+        `,
+        css`
+          ${logicalCSSWithFallback('overflow-y', 'auto')}
+          ${logicalCSS('height', `${euiTheme.base * 12}px`)}
+        `,
+      ]}
+    >
+      <ScrollContent />
+    </div>
+  );
+};
+
+export const VerticalScrollClassNamePreview = () => {
+  const { euiTheme } = useEuiTheme();
+
+  return (
+    <div
+      tabIndex={0}
+      className="eui-yScrollWithShadows"
+      css={css`
+        ${logicalCSSWithFallback('overflow-y', 'auto')}
+        ${logicalCSS('height', `${euiTheme.base * 12}px`)}
+      `}
+    >
+      <ScrollContent />
+    </div>
+  );
+};
+
+export const VerticalScrollHookPreview = () => {
+  const { euiTheme } = useEuiTheme();
+
+  return (
+    <div
+      tabIndex={0}
+      css={[
+        css`
+          ${useEuiOverflowScroll('y', true)}
+        `,
+        css`
+          ${logicalCSSWithFallback('overflow-y', 'auto')}
+          ${logicalCSS('height', `${euiTheme.base * 12}px`)}
+        `,
+      ]}
+    >
+      <ScrollContent />
+    </div>
+  );
+};
 
 export const HorizontalScrollClassNamePreview = () => (
   <div tabIndex={0} className="eui-xScrollWithShadows" css={horizontalBaseCss}>