refactor: Minor improvements and fixes for the page headers #4045
Conversation
BrunoQuaresma
requested review from
Kira-Pilot
and removed request for
a team
| color: theme.palette.text.secondary, | ||
| fontWeight: 400, | ||
| display: "block", | ||
| margin: 0, | ||
| marginTop: theme.spacing(1), | ||
| marginTop: ({ condensed }: { condensed?: boolean }) => | ||
| condensed ? theme.spacing(0.5) : theme.spacing(1), |
There was a problem hiding this comment.
Condensed is a very specific prop to pass - is there a reason we don't just want to pass a more generic style prop and allows consumers to override however they want? Asking because I see we only used condensed in two places and curious if there's a theming rule we should be using going forward.
There was a problem hiding this comment.
Asking because I see we only used condensed in two places and curious if there's a theming rule we should be using going forward.
Usually, when it has an Avatar on the side we want to decrease the space between the title and subtitle so they can look grouped since there is a third element.
Condensed is a very specific prop to pass - is there a reason we don't just want to pass a more generic style prop and allows consumers to override however they want?
I just found it easier to create a prop instead of defining the style in two places and also easier to follow and copy/paste the page header if we are going to use it with the Avatar in another place. I didn't have a better name, sorry, but I see MUI and Chakra use this kind of name when they want narrow spaces or margins.
There was a problem hiding this comment.
That's fine and the name is good! I was just curious.
What I made:
Before:
After
