Skip to content

Commit

Permalink
feat: begin safe areas
Browse files Browse the repository at this point in the history
  • Loading branch information
nolimits4web committed Aug 27, 2021
1 parent 585027d commit 2a57bae
Show file tree
Hide file tree
Showing 15 changed files with 128 additions and 46 deletions.
5 changes: 5 additions & 0 deletions TODO.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
18 changes: 15 additions & 3 deletions kitchen-sink/react/pages/List.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down
4 changes: 3 additions & 1 deletion kitchen-sink/react/pages/Toolbar.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
64 changes: 59 additions & 5 deletions src/config/plugin-safe-areas.js
Original file line number Diff line number Diff line change
@@ -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);
});
3 changes: 1 addition & 2 deletions src/react/components/App.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
);
Expand Down
7 changes: 5 additions & 2 deletions src/react/components/Block.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
),
},
Expand All @@ -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`,
},
Expand Down
2 changes: 1 addition & 1 deletion src/react/components/BlockFooter.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
);
Expand Down
2 changes: 1 addition & 1 deletion src/react/components/BlockHeader.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
);
Expand Down
2 changes: 1 addition & 1 deletion src/react/components/BlockTitle.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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`,
Expand Down
2 changes: 1 addition & 1 deletion src/react/components/List.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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`,
},
Expand Down
6 changes: 3 additions & 3 deletions src/react/components/ListItem.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand All @@ -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
),
Expand Down Expand Up @@ -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`)
),
Expand Down
11 changes: 7 additions & 4 deletions src/react/components/Navbar.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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: '',
},
Expand All @@ -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',
Expand Down
2 changes: 1 addition & 1 deletion src/react/components/Popover.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
8 changes: 4 additions & 4 deletions src/react/components/Toast.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
38 changes: 21 additions & 17 deletions src/react/components/Toolbar.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand All @@ -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>
);
});
Expand Down

0 comments on commit 2a57bae

Please sign in to comment.