-
Notifications
You must be signed in to change notification settings - Fork 36
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.
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
DOP-4713: implement DarkMode Dropdown in new Action Bar #1105
Conversation
…mmodate for system setting
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nits below.
Also, I believe that there's a bug somewhere for the dark mode display of the Menu itself. In the figma, it shows a light mode menu and a dark menu, but I can only get the dark menu to show up for me no matter what setting I'm on.
@@ -11,7 +11,7 @@ const StyledHeaderContainer = styled.header( | |||
grid-area: header; | |||
top: 0; | |||
z-index: ${theme.zIndexes.header}; | |||
${props.template === 'landing' ? '' : 'position: sticky;'} | |||
${props.template === 'landing' || process.env['GATSBY_ENABLE_DARK_MODE'] === 'true' ? '' : 'position: sticky;'} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Does this mean that we don't want the header to stick to the top when scrolling on dark mode?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It looks great, so I feel like I must have just missed a design discussion!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
i believe so! this was discussed Design Team in this thread
<Wrapper newChatbotLanding={process.env['GATSBY_ENABLE_DARK_MODE'] !== 'true' && useChatbot}> | ||
{process.env['GATSBY_ENABLE_DARK_MODE'] !== 'true' && useChatbot && ( | ||
<ChatbotUi template={pageContext?.template} /> | ||
)} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm not sure I understand this. Are we only using the Chatbot when dark mode is enabled?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
the intention here was that the Chatbot would be included in the new ActionBar, not here when enable_dark_mode is enabled
const IconStyling = css` | ||
cursor: pointer; | ||
`; | ||
|
||
const MenuStyling = css` | ||
width: fit-content; | ||
margin-top: ${theme.size.small}; | ||
`; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nit: Our conventions are to capitalize the first letter only when they are styled components. When they are styles injected in classnames we keep the first letter lowercase.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
thanks for pointing this out! refreshed
I believe it's happening but its very subtle! Figma shows the following colors for dark/light mode: dark: light: which correspond to the menu colors: |
This might be another time I'm looking at old news, but I was just referencing the light and dark mode dropdowns on the left side of the Figma |
Worked out offline. Seung is right. Matt is wrong. LG is slightly psycho. |
Stories/Links:
DOP-4713
Staging Links:
drivers site staged change with new Action Bar
docs landing with flag turned off
Notes:
GATSBY_ENABLE_DARK_MODE=true
boolean
to astring
type to accommodate forsystem
selection (default) case.LG/menu
to our packages to use for DarkMode DropdownREADME updates