fix: SuperDrawer Safari Support (#81)

* Update SuperDrawer stories and remove insert CSS property

* Create withDimensions decorator

src/components/SuperDrawer/SuperDrawer.stories.tsx

@@ -1,13 +1,13 @@
 import { Meta } from "@storybook/react";
 import { useEffect } from "react";
 import { Button, Css, GridColumn, GridRowStyles, GridTable, SimpleHeaderAndDataOf } from "src";
-import { withSuperDrawer } from "src/utils/sb";
+import { withDimensions, withSuperDrawer } from "src/utils/sb";
 import { SuperDrawer as SuperDrawerComponent, SuperDrawerContent, useSuperDrawer } from "./index";
 
 export default {
   title: "Components / Super Drawer",
   component: SuperDrawerComponent,
-  decorators: [withSuperDrawer],
+  decorators: [withSuperDrawer, withDimensions("100vw", "100vh")],
   parameters: { chromatic: { delay: 1000 } },
 } as Meta;
 
@@ -25,7 +25,7 @@ export function Open() {
 
   return (
     <>
-      <h1>SuperDrawer Open</h1>
+      <h1 css={Css.xl3Em.mb1.$}>SuperDrawer Open</h1>
       <Button
         label="Show SuperDrawer"
         onClick={() =>
@@ -39,7 +39,7 @@ export function Open() {
   );
 }
 
-export function OpenWithChild() {
+export function OpenAtDetail() {
   const { openInDrawer } = useSuperDrawer();
 
   // Open the SuperDrawer to a details component
@@ -59,7 +59,7 @@ export function OpenWithChild() {
 
   return (
     <>
-      <h1>SuperDrawer Open</h1>
+      <h1 css={Css.xl3Em.mb1.$}>SuperDrawer Open at Detail</h1>
       <Button
         label="Show SuperDrawer"
         onClick={() =>
@@ -97,8 +97,12 @@ export function OpenOnlyDetails() {
 
   return (
     <>
-      <h1>SuperDrawer</h1>
-      <p>Attempting to open a `details` element before a `new` element is included</p>
+      <h1 css={Css.xl3Em.mb1.$}>SuperDrawer Should Not Render</h1>
+      <p>
+        When attempting to open a `details` element before a `new` element is included, a console error will be logged
+        and the SuperDrawer will not open.
+      </p>
+      <p>See console via DevTools for a detailed error message.</p>
     </>
   );
 }
@@ -139,7 +143,7 @@ const Books: Book[] = [
  * render of the SuperDrawer with a chosen component (so it can give it the
  * appropriate props) and the unmount can be controlled via the chosen component.
  */
-export function WithTable() {
+export function Example() {
   const { openInDrawer } = useSuperDrawer();
 
   // Creates a setContent with prev/next handles to move up or down the table

src/components/SuperDrawer/SuperDrawer.tsx

@@ -49,7 +49,8 @@ export function SuperDrawer(): ReactPortal {
           key="superDrawer"
           // TODO: Should this color be part of the Palette?
           // z-index of 3 is used to give flexibility for future overlapping content
-          css={Css.fixed.df.justifyEnd.add("backgroundColor", "rgba(36,36,36,0.2)").add("inset", 0).z3.$}
+          // Not using `inset` due to Safari 14.0.x not supporting this CSS property.
+          css={Css.fixed.df.justifyEnd.add("backgroundColor", "rgba(36,36,36,0.2)").top0.right0.bottom0.left0.z3.$}
           // Initial styles (acts similar to `from` in keyframe animations)
           initial={{ opacity: 0 }}
           // Rendered styles (acts similar to `to` in keyframe animations)

src/utils/sb.tsx

@@ -42,3 +42,15 @@ export const withSuperDrawer = (Story: () => JSX.Element) => (
     <Story />
   </SuperDrawerProvider>
 );
+
+/**
+ * Decorator to set explicit width and height dimensions for a story.
+ * Used to help Chromatic properly render positioned `fixed` components.
+ */
+export const withDimensions = (width: number | string = "1200px", height: number | string = "800px", xss?: {}) => (
+  Story: () => JSX.Element,
+) => (
+  <div css={{ ...Css.w(width).h(height).$, ...xss }}>
+    <Story />
+  </div>
+);