Skip to content

Commit

Permalink
feat #354, feat #356 - Mobile experience for Filters & Table Paginati…
Browse files Browse the repository at this point in the history
…on (#358)
  • Loading branch information
sam-dassana authored Jul 7, 2021
1 parent 8326375 commit 8428570
Show file tree
Hide file tree
Showing 27 changed files with 1,845 additions and 1,664 deletions.
892 changes: 444 additions & 448 deletions package-lock.json

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
},
"dependencies": {
"@ant-design/icons": "^4.6.2",
"@dassana-io/web-utils": "^0.8.0",
"@dassana-io/web-utils": "^0.8.5",
"@fortawesome/fontawesome-svg-core": "^1.2.32",
"@fortawesome/free-solid-svg-icons": "^5.15.1",
"@fortawesome/pro-light-svg-icons": "^5.15.3",
Expand Down
64 changes: 32 additions & 32 deletions src/__snapshots__/storybook.test.ts.snap
Original file line number Diff line number Diff line change
Expand Up @@ -90,17 +90,17 @@ exports[`Storyshots Banner Error 1`] = `
>
<svg
aria-hidden="true"
className="svg-inline--fa fa-times fa-w-11 icon-0-2-18 icon-d2-0-2-24"
className="svg-inline--fa fa-times fa-w-10 icon-0-2-18 icon-d2-0-2-24"
data-icon="times"
data-prefix="fas"
data-prefix="far"
focusable="false"
role="img"
style={Object {}}
viewBox="0 0 352 512"
viewBox="0 0 320 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"
fill="currentColor"
style={Object {}}
/>
Expand Down Expand Up @@ -169,17 +169,17 @@ exports[`Storyshots Banner Info 1`] = `
>
<svg
aria-hidden="true"
className="svg-inline--fa fa-times fa-w-11 icon-0-2-18 icon-d5-0-2-27"
className="svg-inline--fa fa-times fa-w-10 icon-0-2-18 icon-d5-0-2-27"
data-icon="times"
data-prefix="fas"
data-prefix="far"
focusable="false"
role="img"
style={Object {}}
viewBox="0 0 352 512"
viewBox="0 0 320 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"
fill="currentColor"
style={Object {}}
/>
Expand Down Expand Up @@ -231,17 +231,17 @@ exports[`Storyshots Banner No Icon 1`] = `
>
<svg
aria-hidden="true"
className="svg-inline--fa fa-times fa-w-11 icon-0-2-18 icon-d14-0-2-36"
className="svg-inline--fa fa-times fa-w-10 icon-0-2-18 icon-d14-0-2-36"
data-icon="times"
data-prefix="fas"
data-prefix="far"
focusable="false"
role="img"
style={Object {}}
viewBox="0 0 352 512"
viewBox="0 0 320 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"
fill="currentColor"
style={Object {}}
/>
Expand Down Expand Up @@ -310,17 +310,17 @@ exports[`Storyshots Banner Success 1`] = `
>
<svg
aria-hidden="true"
className="svg-inline--fa fa-times fa-w-11 icon-0-2-18 icon-d8-0-2-30"
className="svg-inline--fa fa-times fa-w-10 icon-0-2-18 icon-d8-0-2-30"
data-icon="times"
data-prefix="fas"
data-prefix="far"
focusable="false"
role="img"
style={Object {}}
viewBox="0 0 352 512"
viewBox="0 0 320 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"
fill="currentColor"
style={Object {}}
/>
Expand Down Expand Up @@ -389,17 +389,17 @@ exports[`Storyshots Banner Warning 1`] = `
>
<svg
aria-hidden="true"
className="svg-inline--fa fa-times fa-w-11 icon-0-2-18 icon-d11-0-2-33"
className="svg-inline--fa fa-times fa-w-10 icon-0-2-18 icon-d11-0-2-33"
data-icon="times"
data-prefix="fas"
data-prefix="far"
focusable="false"
role="img"
style={Object {}}
viewBox="0 0 352 512"
viewBox="0 0 320 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"
fill="currentColor"
style={Object {}}
/>
Expand Down Expand Up @@ -1467,17 +1467,17 @@ exports[`Storyshots IconButton Circle 1`] = `
>
<svg
aria-hidden="true"
className="svg-inline--fa fa-times fa-w-11 icon-0-2-18 icon-d29-0-2-111"
className="svg-inline--fa fa-times fa-w-10 icon-0-2-18 icon-d29-0-2-111"
data-icon="times"
data-prefix="fas"
data-prefix="far"
focusable="false"
role="img"
style={Object {}}
viewBox="0 0 352 512"
viewBox="0 0 320 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"
fill="currentColor"
style={Object {}}
/>
Expand All @@ -1496,17 +1496,17 @@ exports[`Storyshots IconButton Default 1`] = `
>
<svg
aria-hidden="true"
className="svg-inline--fa fa-times fa-w-11 icon-0-2-18 icon-d26-0-2-108"
className="svg-inline--fa fa-times fa-w-10 icon-0-2-18 icon-d26-0-2-108"
data-icon="times"
data-prefix="fas"
data-prefix="far"
focusable="false"
role="img"
style={Object {}}
viewBox="0 0 352 512"
viewBox="0 0 320 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"
fill="currentColor"
style={Object {}}
/>
Expand All @@ -1528,17 +1528,17 @@ exports[`Storyshots IconButton Pending 1`] = `
/>
<svg
aria-hidden="true"
className="svg-inline--fa fa-times fa-w-11 icon-0-2-18 icon-d32-0-2-114"
className="svg-inline--fa fa-times fa-w-10 icon-0-2-18 icon-d32-0-2-114"
data-icon="times"
data-prefix="fas"
data-prefix="far"
focusable="false"
role="img"
style={Object {}}
viewBox="0 0 352 512"
viewBox="0 0 320 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"
fill="currentColor"
style={Object {}}
/>
Expand Down
7 changes: 5 additions & 2 deletions src/components/Filters/BaseFilters.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,11 @@ export const BaseFilters: FC<BaseFiltersProps> = ({
}: BaseFiltersProps) => {
const classes = useBaseFilterStyles()

const { loading, onSelectedFiltersChange, resetDynamicProps } =
useFiltersContext()
const {
loading,
onSelectedFiltersChange,
resetDynamicProps
} = useFiltersContext()

const [filtersList, setFiltersList] = useState<FiltersList>([
{ id: uuidV4() }
Expand Down
53 changes: 53 additions & 0 deletions src/components/Filters/FilterModal.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import { createPortal } from 'react-dom'
import { createUseStyles } from 'react-jss'
import { popoverPalette } from 'components/Popover/utils'
import { useCreateDomElement } from 'components/utils'
import React, { FC, ReactNode } from 'react'
import { styleguide, ThemeType } from 'components/assets/styles'

const { flexCenter } = styleguide

const { dark, light } = ThemeType

const useStyles = createUseStyles({
container: {
...flexCenter,
background: popoverPalette[light].background,
bottom: 0,
display: ({ isPopoverOpen }) => (isPopoverOpen ? 'flex' : 'none'),
height: '100%',
left: 0,
position: 'fixed',
right: 0,
top: 0,
width: '100%',
zIndex: 10
},
// eslint-disable-next-line sort-keys
'@global': {
[`.${dark}`]: {
'& $container': {
background: popoverPalette[dark].background
}
}
}
})

interface Props {
children: ReactNode
isPopoverOpen?: boolean
}

export const FilterModal: FC<Props> = ({ children, isPopoverOpen }: Props) => {
const classes = useStyles({ isPopoverOpen })

const rootElement = useCreateDomElement('filters-modal-root')

return (
rootElement &&
createPortal(
<div className={classes.container}>{children}</div>,
rootElement
)
)
}
Loading

0 comments on commit 8428570

Please sign in to comment.