prep for review

cloudscape-design · Aug 4, 2023 · 70bc4bb · 70bc4bb
1 parent 8685954
commit 70bc4bb
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 7 deletions.
diff --git a/pages/header/responsiveness.page.tsx b/pages/header/responsiveness.page.tsx
@@ -13,8 +13,9 @@ import SpaceBetween from '~components/space-between';
 import ScreenshotArea from '../utils/screenshot-area';
 import styles from './styles.scss';
 import { useResizeObserver } from '~components/internal/hooks/container-queries';
+import { Toggle } from '~components';
 
-type Approach = 'current' | 'grid' | 'flex' | 'cquery' | 'resize-observer';
+type Approach = 'current' | 'grid' | 'flex' | 'cquery' | 'resize-observer' | 'scott';
 
 type DemoHeaderProps = Pick<HeaderProps, 'children' | 'actions' | 'description' | 'info'>;
 
@@ -138,6 +139,22 @@ function HeaderContainerQuery({ children, actions, description }: DemoHeaderProp
   );
 }
 
+function HeaderScott({ children, actions, description }: DemoHeaderProps) {
+  return (
+    <div className={styles.scott}>
+      <div className={styles['scott-container']}>
+        <SpaceBetween direction="horizontal" size="xs" className={styles['scott-title']}>
+          <Box variant="h2">{children}</Box>
+        </SpaceBetween>
+        <Box variant="p" color="text-body-secondary" className={styles['scott-description']}>
+          {description}
+        </Box>
+        <div className={styles['scott-actions']}>{actions}</div>
+      </div>
+    </div>
+  );
+}
+
 function HeaderResizeObserver({ children, actions, description }: DemoHeaderProps) {
   const containerRef = useRef<HTMLDivElement>(null);
   const actionsRef = useRef<HTMLDivElement>(null);
@@ -151,18 +168,18 @@ function HeaderResizeObserver({ children, actions, description }: DemoHeaderProp
     const actions = actionsRef.current;
     const title = container.querySelector(`.${styles['header-grid--title']}`)!;
 
-    const oldRect = actions.getBoundingClientRect();
+    // const oldRect = actions.getBoundingClientRect();
     actions.style.width = 'max-content';
     const intrinsicRect = actions.getBoundingClientRect();
     actions.style.width = '';
 
     const containerRect = container.getBoundingClientRect();
     const titleRect = title.getBoundingClientRect();
 
-    console.log({ containerWidth: containerRect.width, titleWidth: titleRect.width, actionsWidth: oldRect.width });
+    // console.log({ containerWidth: containerRect.width, titleWidth: titleRect.width, actionsWidth: oldRect.width });
 
     const distance = containerRect.width - (titleRect.width + intrinsicRect.width);
-    console.log({ distance });
+    // console.log({ distance });
     setWrapActions(distance < 50);
   };
 
@@ -197,6 +214,8 @@ function renderHeader(approach: Approach, props: Partial<HeaderProps>) {
       return <HeaderContainerQuery {...props} />;
     case 'resize-observer':
       return <HeaderResizeObserver {...props} />;
+    case 'scott':
+      return <HeaderScott {...props} />;
     case 'current':
     default:
       return <Header {...props} />;
@@ -209,6 +228,7 @@ const approachDescription: Record<Approach, string> = {
   flex: 'Similar to current approach but with different flows',
   cquery: 'Like grid, but rearranges actions when container is small',
   'resize-observer': 'not working',
+  scott: '',
 };
 
 function Showcase({ approach }: { approach: Approach }) {
@@ -231,15 +251,20 @@ function Showcase({ approach }: { approach: Approach }) {
 }
 
 export default function PageHeadersDemo() {
+  const [subgrid, setSubgrid] = useState(false);
   return (
     <ScreenshotArea>
       <Box padding="l">
-        <div className={styles.playground}>
+        <Toggle checked={subgrid} onChange={({ detail }) => setSubgrid(detail.checked)}>
+          Side by side
+        </Toggle>
+        <div className={clsx(styles.playground, subgrid && styles['playground--side-by-side'])}>
           <Showcase approach="current" />
           <Showcase approach="resize-observer" />
-          <Showcase approach="grid" />
-          <Showcase approach="cquery" />
+          {/* <Showcase approach="grid" /> */}
+          {/* <Showcase approach="cquery" /> */}
           <Showcase approach="flex" />
+          {/* <Showcase approach="scott" /> */}
         </div>
       </Box>
     </ScreenshotArea>

diff --git a/pages/header/styles.scss b/pages/header/styles.scss
@@ -12,6 +12,18 @@
   // grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
   grid-template-columns: repeat(1, 1fr);
   column-gap: awsui.$space-scaled-l;
+
+  &.playground--side-by-side {
+    grid-template-columns: repeat(2, 1fr);
+
+    .showcase:nth-child(1) {
+      grid-column: span 2;
+      > * {
+        width: 50%;
+        grid-column: span 2;
+      }
+    }
+  }
 }
 
 .showcase {
@@ -143,4 +155,44 @@
   }
 }
 
+.scott {
+  container: test / inline-size;
+}
+.scott-container {
+  column-gap: awsui.$space-scaled-m;
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  grid-template-rows: repeat(4, auto);
+}
+.scott-title {
+  grid-column: 1 / 13;
+  grid-row: 1;
+}
+.scott-actions {
+  display: flex;
+  grid-column: 1 / 13;
+  grid-row: 3;
+}
+.scott-description {
+  grid-column: 1 / 13;
+  grid-row: 2;
+  margin: awsui.$space-scaled-m 0;
+}
+@container test (min-width: 651px) {
+  .scott-title {
+    grid-column: 1 / 7;
+    grid-row: 1 / 3;
+  }
+  .scott-actions {
+    justify-content: end;
+    grid-column: 7 / 13;
+    grid-row: 1;
+  }
+  .scott-description {
+    grid-column: 1 / 11;
+    grid-row: 3;
+    // margin: awsui.$space-scaled-m 0;
+  }
+}
+
 /* stylelint-enable */