ui v2: restyle dialog component #731
Conversation
dschaller
changed the title
| fontSize: "16px", | ||
| padding: "16px 16px 0 16px", | ||
| fontWeight: 400, |
There was a problem hiding this comment.
in Figma it's Roboto Medium 20px
| fontSize: "16px", | |
| padding: "16px 16px 0 16px", | |
| fontWeight: 400, | |
| fontSize: "20px", | |
| fontWeight: 500, | |
| padding: "16px 16px 0 16px" |
| fontSize: "16px", | ||
| padding: "16px 16px 0 16px", | ||
| fontWeight: 400, | ||
| color: "#000000", |
There was a problem hiding this comment.
from figma
| color: "#000000", | |
| color: "#0d1030", |
| height: "16px", | ||
| width: "16px", | ||
| padding: "0", | ||
| color: "#000000", |
There was a problem hiding this comment.
| color: "#000000", | |
| color: "#0d1030", |
|
|
||
| const DialogContent = styled(MuiDialogContent)({ | ||
| padding: "8px 16px", | ||
| fontSize: "12px", |
There was a problem hiding this comment.
from figma
| fontSize: "12px", | |
| fontSize: "16px", |
| content: string; | ||
| open: boolean; | ||
| children: React.ReactNode; | ||
| actions: React.ReactNode; | ||
| onClose: () => void; |
There was a problem hiding this comment.
i'm not sure that onClose should ever do anything other than dismiss the dialog, that seems like a bad UX pattern to allow devs to tie behavior to onClose. any use case in mind?
| ); | ||
| }; | ||
| export const Dialog = ({ title, children, open, onClose, actions }: DialogProps) => ( | ||
| <MuiDialog open={open} onClose={onClose}> |
There was a problem hiding this comment.
Dialog has border: 1px solid rgba(13, 16, 48, 0.1); in Figma
and the box shadow doesn't match Figma's box-shadow: 0px 10px 24px rgba(35, 48, 143, 0.3);
| content: string; | ||
| open: boolean; | ||
| children: React.ReactNode; | ||
| actions: React.ReactNode; |
There was a problem hiding this comment.
we should standardize, either use these richer API where you pass components to be rendered nested vs just using children for everything and passing in Actions as part of the children (this same thing applies for accordion). i think we just need to some quick pro/con on it.
my main thought in potentially choosing the children-only API is that it reads more literally despite being a little more complicated for the user (but that's what stories are for, or maybe an invariant check on top of it), i.e. title > content > buttons, whereas this API reads title > buttons > content but renders as title > content > buttons
| @@ -20,11 +20,13 @@ const BaseTextField = ({ InputProps, InputLabelProps, ...props }: MuiStandardTex | |||
| ); | |||
|
|
|||
| const StyledTextField = styled(BaseTextField)({ | |||
| padding: "8px 0", | |||
There was a problem hiding this comment.
another decision point here, should children have inherent padding or should the parent pad it's children (e.g. something like a & > * selector in containers), not sure what's best practice
frontend/workflows/serverexperimentation/src/start-experiment.tsx
Outdated
Show resolved
Hide resolved
Description
restyle dialog
Testing Performed
storybook
Todo