Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat #354, feat #356 - Mobile experience for Filters & Table Pagination #358

Merged
merged 13 commits into from
Jul 7, 2021
Merged

feat #354, feat #356 - Mobile experience for Filters & Table Pagination #358

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
d5ed521
feat #356 - Make table pagination responsive
sam-dassana Jun 30, 2021
24da4b9
feat #356 - Fix broken tests
sam-dassana Jun 30, 2021
1b78dc6
feat #354 - Responsive Filters WIP
sam-dassana Jun 30, 2021
cae2475
feat #354 - Update styles
sam-dassana Jun 30, 2021
b1e0c38
WIP
sam-dassana Jul 1, 2021
b974558
Fix annoying z-index issue
sam-dassana Jul 1, 2021
644634b
Update position to fixed
sam-dassana Jul 1, 2021
dfa67aa
Bump package v, fix failing snapshots
sam-dassana Jul 1, 2021
abb0ac2
Delete useWindowSize, rebase
sam-dassana Jul 1, 2021
ca9a9a3
Add FilterModal for mobile
sam-dassana Jul 2, 2021
74d31d5
Fix lint, prettier warnings
sam-dassana Jul 2, 2021
3a9cde9
Add prop to customize Popover styles, tableRef
sam-dassana Jul 6, 2021
86fe56e
Fix prettier issues
sam-dassana Jul 6, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
892 changes: 444 additions & 448 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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')
sam-dassana marked this conversation as resolved.
Show resolved Hide resolved

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