-
Notifications
You must be signed in to change notification settings - Fork 15
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[FX-5652] Migrate Dropdown to TailwindCSS (#4499)
- Loading branch information
1 parent
c4e1931
commit 3a0125d
Showing
10 changed files
with
96 additions
and
135 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| --- | ||
| '@toptal/picasso-dropdown': minor | ||
| --- | ||
|
|
||
| ### Dropdown | ||
|
|
||
| - change the ClickAwayListener component to be imported from @mui/base |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,58 +1,17 @@ | ||
| import type { Theme } from '@material-ui/core/styles' | ||
| import { createStyles } from '@material-ui/core/styles' | ||
| export const contentClass: Record<'content' | 'contentVisible', string[]> = { | ||
| content: [ | ||
| 'overflow-y-auto', | ||
|
|
||
| export type StyleProps = { | ||
| /** Control content element style */ | ||
| contentStyle?: { | ||
| height?: string | ||
| maxHeight?: string | ||
| } | ||
| } | ||
|
|
||
| export default ({ screens, shadows, palette }: Theme) => | ||
| createStyles({ | ||
| root: { | ||
| display: 'flex', | ||
| alignItems: 'center', | ||
| }, | ||
| anchor: { | ||
| display: 'inline-flex', | ||
| alignItems: 'center', | ||
| cursor: 'pointer', | ||
| }, | ||
| content: { | ||
| fontSize: 'inherit', | ||
| background: palette.common.white, | ||
|
|
||
| maxHeight: '14.75rem', // 6.5 lines of menu to show | ||
| overflowY: 'auto', | ||
| 'max-h-[14.75rem]', | ||
| '[@media(max-height:585px)]:max-h-[calc(50vh-3rem)]', | ||
| '[@media(max-height:585px)]:md:max-h-[calc(50vh-3.5rem)]', | ||
| ], | ||
| contentVisible: [ | ||
| 'max-h-screen md:max-h-none ', | ||
|
|
||
| // height under which maxHeight menu starts to overflow | ||
| // and needs to reduce height dynamically to avoid overflow | ||
| '@media screen and (max-height: 585px)': { | ||
| maxHeight: 'calc(50vh - 3rem)', // half of viewport minus header and anchor | ||
| 'overflow-y-scroll md:overflow-y-hidden', | ||
|
|
||
| [screens('md', 'lg', 'xl')]: { | ||
| maxHeight: 'calc(50vh - 3.5rem)', // half of screen minus header and anchor | ||
| }, | ||
| }, | ||
| }, | ||
| popper: { | ||
| boxShadow: shadows[2], | ||
| }, | ||
| contentVisible: { | ||
| // Basically a whole content of a dropdown will be shown without a vertical scrollbar inside the dropdown | ||
| maxHeight: 'none', | ||
|
|
||
| // Will show a whole content on the `xs` and `sm` screens with a vertical scrollbar if needed | ||
| // For non desktop devices better if we have a scrollbar when a dropdown content is pretty long | ||
| [screens('xs', 'sm')]: { | ||
| overflowY: 'scroll', | ||
| maxHeight: '100vh', | ||
| }, | ||
| '@media screen and (max-height: 585px)': { | ||
| overflowY: 'scroll', | ||
| maxHeight: '100vh', | ||
| }, | ||
| }, | ||
| }) | ||
| '[@media(max-height:585px)]:max-h-screen', | ||
| '[@media(max-height:585px)]:overflow-y-scroll', | ||
| ], | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.