feat: begin safe areas

konstaui · Aug 27, 2021 · 2a57bae · 2a57bae
1 parent 585027d
commit 2a57bae
Show file tree

Hide file tree

Showing 15 changed files with 128 additions and 46 deletions.
diff --git a/TODO.md b/TODO.md
@@ -4,3 +4,8 @@
   - Page
     - Set absolute/relative to take whole size
   - Figure out safe areas
+    - inset list items
+    - FAB
+    - reset in modals (Popup and Sheet (reset top))
+    - Popover should consider safe areas
+  - Figure out default toolbar styles
diff --git a/kitchen-sink/react/pages/List.jsx b/kitchen-sink/react/pages/List.jsx
@@ -90,19 +90,31 @@ export default function ListPage() {
       <BlockTitle>Grouped with sticky titles</BlockTitle>
       <List>
         <ListGroup>
-          <ListItem title="A" groupTitle />
+          <ListItem
+            title="A"
+            groupTitle
+            className="ios:top-11-safe material:top-14-safe"
+          />
           <ListItem title="Aaron " />
           <ListItem title="Abbie" />
           <ListItem title="Adam" />
         </ListGroup>
         <ListGroup>
-          <ListItem title="B" groupTitle />
+          <ListItem
+            title="B"
+            groupTitle
+            className="ios:top-11-safe material:top-14-safe"
+          />
           <ListItem title="Bailey" />
           <ListItem title="Barclay" />
           <ListItem title="Bartolo" />
         </ListGroup>
         <ListGroup>
-          <ListItem title="C" groupTitle />
+          <ListItem
+            title="C"
+            groupTitle
+            className="ios:top-11-safe material:top-14-safe"
+          />
           <ListItem title="Caiden" />
           <ListItem title="Calvin" />
           <ListItem title="Candy" />

diff --git a/kitchen-sink/react/pages/Toolbar.jsx b/kitchen-sink/react/pages/Toolbar.jsx
@@ -9,7 +9,9 @@ export default function ToolbarPage() {
       <Toolbar
         top={isTop}
         className={`left-0 ${
-          isTop ? 'ios:top-11 material:top-14 sticky' : 'bottom-0 fixed'
+          isTop
+            ? 'ios:top-11-safe material:top-14-safe sticky'
+            : 'bottom-0 fixed'
         } w-full`}
       >
         <Link toolbar>Link 1</Link>

diff --git a/src/config/plugin-safe-areas.js b/src/config/plugin-safe-areas.js
@@ -1,17 +1,71 @@
 const plugin = require('tailwindcss/plugin');
 
 module.exports = () =>
-  plugin(({ addUtilities }) => {
+  plugin(({ addUtilities, addBase, theme }) => {
+    const base = {
+      ':root': {
+        '--twm-safe-area-left': '0px',
+        '--twm-safe-area-right': '0px',
+        '--twm-safe-area-top': '0px',
+        '--twm-safe-area-bottom': '0px',
+      },
+
+      '@supports (left: env(safe-area-inset-left))': {
+        '.safe-areas': {
+          '--twm-safe-area-left': 'env(safe-area-inset-left)',
+          '--twm-safe-area-right': 'env(safe-area-inset-right)',
+          '--twm-safe-area-top': 'env(safe-area-inset-top)',
+          '--twm-safe-area-bottom': 'env(safe-area-inset-bottom)',
+        },
+        '.no-safe-areas': {
+          '--twm-safe-area-left': '0px',
+          '--twm-safe-area-right': '0px',
+          '--twm-safe-area-top': '0px',
+          '--twm-safe-area-bottom': '0px',
+        },
+        '.no-safe-areas-top': {
+          '--twm-safe-area-top': '0px',
+        },
+        '.no-safe-areas-right': {
+          '--twm-safe-area-right': '0px',
+        },
+        '.no-safe-areas-bottom': {
+          '--twm-safe-area-bottom': '0px',
+        },
+        '.no-safe-areas-left': {
+          '--twm-safe-area-left': '0px',
+        },
+      },
+    };
     const safe = {};
+    const spacing = theme('spacing');
     ['top', 'right', 'bottom', 'left'].forEach((side) => {
       const first = side[0];
       const upper = `${side[0].toUpperCase()}${side.slice(1)}`;
-      safe[`p${first}-safe`] = {
-        [`padding${upper}`]: `env(safe-area-inset-${side})`,
+
+      safe[`.p${first}-safe`] = {
+        [`padding${upper}`]: `var(--twm-safe-area-${side})`,
       };
-      safe[`${side}-safe`] = {
-        [side]: `env(safe-area-inset-${side})`,
+      safe[`.m${first}-safe`] = {
+        [`margin${upper}`]: `var(--twm-safe-area-${side})`,
       };
+      safe[`.${side}-safe`] = {
+        [side]: `var(--twm-safe-area-${side})`,
+      };
+
+      Object.keys(spacing).forEach((key) => {
+        const value = spacing[key];
+        safe[`.p${first}-${key}-safe`] = {
+          [`padding${upper}`]: `calc(var(--twm-safe-area-${side}) + ${value})`,
+        };
+        safe[`.m${first}-${key}-safe`] = {
+          [`margin${upper}`]: `calc(var(--twm-safe-area-${side}) + ${value})`,
+        };
+        safe[`.${side}-${key}-safe`] = {
+          [side]: `calc(var(--twm-safe-area-${side}) + ${value})`,
+        };
+      });
     });
+    addBase(base);
     addUtilities(safe);
   });
diff --git a/src/react/components/App.jsx b/src/react/components/App.jsx
@@ -32,9 +32,8 @@ const App = forwardRef((props, ref) => {
   };
 
   const classes = cls(
-    `twm-app`,
     `twm-${theme}`,
-    'w-full h-full min-h-screen',
+    'twm-app safe-areas w-full h-full min-h-screen',
     positionClass('relative', className),
     className
   );

diff --git a/src/react/components/Block.jsx b/src/react/components/Block.jsx
@@ -50,7 +50,10 @@ const Block = forwardRef((props, ref) => {
   const c = themeClasses({
     base: {
       common: cls(
-        `px-4 text-sm ${positionClass('relative', className)} z-10`,
+        `text-sm z-10`,
+        positionClass('relative', className),
+        inset && 'px-4',
+        !inset && 'pl-4-safe pr-4-safe',
         !nested && margin
       ),
     },
@@ -61,7 +64,7 @@ const Block = forwardRef((props, ref) => {
       ),
     },
     inset: {
-      common: `mx-4 overflow-hidden`,
+      common: `ml-4-safe mr-4-safe overflow-hidden`,
       ios: `rounded-lg`,
       material: `rounded`,
     },

diff --git a/src/react/components/BlockFooter.jsx b/src/react/components/BlockFooter.jsx
@@ -32,7 +32,7 @@ const BlockFooter = forwardRef((props, ref) => {
 
   const c = themeClasses(
     {
-      base: `px-4 mb-8 flex items-center -mt-6 text-opacity-55 text-black text-sm`,
+      base: `pl-4-safe pr-4-safe mb-8 flex items-center -mt-6 text-opacity-55 text-black text-sm`,
     },
     className
   );

diff --git a/src/react/components/BlockHeader.jsx b/src/react/components/BlockHeader.jsx
@@ -32,7 +32,7 @@ const BlockHeader = forwardRef((props, ref) => {
 
   const c = themeClasses(
     {
-      base: `px-4 mt-8 flex items-center -mb-6 text-opacity-55 text-black text-sm`,
+      base: `pl-4-safe pr-4-safe mt-8 flex items-center -mb-6 text-opacity-55 text-black text-sm`,
     },
     className
   );

diff --git a/src/react/components/BlockTitle.jsx b/src/react/components/BlockTitle.jsx
@@ -34,7 +34,7 @@ const BlockTitle = forwardRef((props, ref) => {
   const c = themeClasses(
     {
       base: {
-        common: `px-4 mt-8 flex justify-between items-center ${
+        common: `pl-4-safe pr-4-safe mt-8 flex justify-between items-center ${
           withBlock ? '-mb-6' : 'mb-2'
         }`,
         ios: `font-semibold`,

diff --git a/src/react/components/List.jsx b/src/react/components/List.jsx
@@ -58,7 +58,7 @@ const List = forwardRef((props, ref) => {
       ),
     },
     inset: {
-      common: `mx-4 overflow-hidden`,
+      common: `ml-4-safe mr-4-safe overflow-hidden`,
       ios: `rounded-lg`,
       material: `rounded`,
     },

diff --git a/src/react/components/ListItem.jsx b/src/react/components/ListItem.jsx
@@ -107,7 +107,7 @@ const ListItem = forwardRef((props, ref) => {
       base: menuListItem ? `${textColor} py-1` : '',
       itemContent: {
         common: cls(
-          menuListItem ? 'pl-2 mx-2 rounded-lg' : 'pl-4',
+          menuListItem ? 'pl-2 ml-2-safe mr-2-safe rounded-lg' : 'pl-4-safe',
           `flex items-center ${contentClassName}`
         ),
         link: cls(
@@ -134,7 +134,7 @@ const ListItem = forwardRef((props, ref) => {
       },
       inner: {
         common: cls(
-          'pr-4 w-full relative',
+          'pr-4-safe w-full relative',
           !menuListItem && hairlines && 'hairline-b',
           innerClassName
         ),
@@ -174,7 +174,7 @@ const ListItem = forwardRef((props, ref) => {
 
       divider: {
         common: cls(
-          `bg-list-divider-light text-black text-opacity-55 px-4 py-1 flex items-center z-10`,
+          `bg-list-divider-light text-black text-opacity-55 pl-4-safe pr-4-safe py-1 flex items-center z-20`,
           divider ? 'relative' : 'sticky top-0',
           dark(`dark:bg-list-divider-dark dark:text-white dark:text-opacity-55`)
         ),

diff --git a/src/react/components/Navbar.jsx b/src/react/components/Navbar.jsx
@@ -60,7 +60,10 @@ const Navbar = forwardRef((props, ref) => {
   const c = themeClasses(
     {
       base: {
-        common: `w-full ${positionClass('sticky', className)} z-20 top-0`,
+        common: cls(
+          `w-full z-20 top-0 pt-safe`,
+          positionClass('sticky', className)
+        ),
         ios: '',
         material: '',
       },
@@ -75,16 +78,16 @@ const Navbar = forwardRef((props, ref) => {
       },
       subnavbar: {
         common: cls('relative flex items-center', subnavbarClassName),
-        ios: 'h-11 px-2',
-        material: 'h-12 px-4',
+        ios: 'h-11 pl-2-safe pr-2-safe',
+        material: 'h-12 pl-4-safe pr-4-safe',
       },
       inner: {
         common: cls(
           'flex relative items-center w-full overflow-hidden',
           innerClassName
         ),
         ios: cls(
-          'px-2 h-11',
+          'pl-2-safe pr-2-safe h-11',
           !left && right ? 'justify-end' : 'justify-between'
         ),
         material: 'justify-start h-14 lg:h-16 text-xl',

diff --git a/src/react/components/Popover.jsx b/src/react/components/Popover.jsx
@@ -76,7 +76,7 @@ const Popover = forwardRef((props, ref) => {
     {
       base: {
         common: cls(
-          'transition-transform-opacity duration-300 z-40',
+          'transition-transform-opacity duration-300 z-40 no-safe-areas',
           colors.bg,
           positionClass('fixed', className),
           size

diff --git a/src/react/components/Toast.jsx b/src/react/components/Toast.jsx
@@ -60,13 +60,13 @@ const Toast = forwardRef((props, ref) => {
           translucent && 'translucent'
         ),
         material: cls(`sm:rounded duration-200`, colors.bgMaterial),
-        left: 'sm:left-4 sm:bottom-4',
-        right: 'sm:right-4 sm:bottom-4 sm:left-auto',
-        center: 'sm:left-1/2 sm:bottom-4 sm:-translate-x-1/2',
+        left: 'sm:left-4-safe sm:bottom-4-safe',
+        right: 'sm:right-4-safe sm:bottom-4-safe sm:left-auto',
+        center: 'sm:left-1/2 sm:bottom-4-safe sm:-translate-x-1/2',
       },
       content: {
         common: 'flex items-center justify-between',
-        ios: 'px-4 py-3',
+        ios: 'pl-4-safe pr-4-safe pt-3 pb-3-safe sm:px-4 sm:py-3',
         material: 'px-6 py-3.5',
       },
       button: {

diff --git a/src/react/components/Toolbar.jsx b/src/react/components/Toolbar.jsx
@@ -55,15 +55,11 @@ const Toolbar = forwardRef((props, ref) => {
   const c = themeClasses(
     {
       base: {
-        common: `w-full ${positionClass('relative', className)} z-20`,
-        toolbar: {
-          ios: 'h-11',
-          material: 'h-12',
-        },
-        tabbarLabels: {
-          ios: 'h-12.5',
-          material: 'h-14',
-        },
+        common: cls(
+          `w-full z-20`,
+          positionClass('relative', className),
+          !top && 'pb-safe'
+        ),
       },
       bg: {
         common: cls('absolute w-full h-full left-0 top-0', bgClassName),
@@ -82,21 +78,29 @@ const Toolbar = forwardRef((props, ref) => {
           `flex relative justify-between items-center w-full h-full overflow-hidden`,
           innerClassName
         ),
-        ios: 'px-2',
-        material: !tabbar ? 'px-2' : '',
+        ios: 'pl-2-safe pr-2-safe',
+        material: !tabbar ? 'pl-2-safe pr-2-safe' : '',
+        toolbar: {
+          ios: 'h-11',
+          material: 'h-12',
+        },
+        tabbarLabels: {
+          ios: 'h-12.5',
+          material: 'h-14',
+        },
       },
     },
     className
   );
 
   return (
-    <Component
-      ref={elRef}
-      className={c.base[tabbar && tabbarLabels ? 'tabbarLabels' : 'toolbar']}
-      {...attrs}
-    >
+    <Component ref={elRef} className={c.base} {...attrs}>
       <div className={c.bg} />
-      <div className={c.inner}>{children}</div>
+      <div
+        className={c.inner[tabbar && tabbarLabels ? 'tabbarLabels' : 'toolbar']}
+      >
+        {children}
+      </div>
     </Component>
   );
 });