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.

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

Addon-docs: Fix table dark mode #14251

Merged
merged 2 commits into from
Mar 18, 2021

Conversation

TheMightyPenguin
Copy link
Contributor

Issue: #14029

What I did

  • Change the styles for the Table component used in Docs pages. The main issue was the table background, which was using styles from the light theme before.
  • Uses color.darkest as the value for appContentBg in the dark theme, as it was using the same value.
  • Adds an example of a table with icons.

This is how the tables look now in Dark mode:
image

And in Light mode there were no visual changes:
image

How to test

Manual Test

  1. Change the official-storybook example theme from theme.light to theme.dark:
  2. Run the official-storybook example cd examples/official-storybook and yarn storybook. (Also run yarn build core components addon-docs theming in the root folder to update the build with the theme changes).
  3. Go to Docs > markdown-page document: http://localhost:9011/?path=/docs/addons-docs-markdown-docs--page
  4. Assert that the table looks like the image attached above of the dark theme table.

Questions

For setting the alternative rows background color (pair rows in this case), I did the following:

'& tr:nth-of-type(2n)': {
    backgroundColor: theme.base === 'dark' ? theme.color.darker : theme.color.lighter,
},

I'm not sure if this was the way to go, I also thought of adding a new theme variable, something like theme.appAlternativeContentBg, but not sure if this would be used that often.

@TheMightyPenguin
Copy link
Contributor Author

@shilman I think this could be tested using Chromatic, but not sure how to proceed, I'm guessing it'll run automatically as part of CI, the issue here is that the official-storybook example is using light mode for the docs, should I replicate that example with a new one using dark-mode or what would be the way to go?

@shilman
Copy link
Member

shilman commented Mar 17, 2021

@domyen @ghengeveld can one of you please review?

@TheMightyPenguin
Copy link
Contributor Author

@shilman @ndelangen in this case I didn't add unit tests as I think visual regression is a better fit for these changes. These docs that include the MDX table are already in a story but it's using light mode in that example project, should I add anything extra for this or is it ok the way it is? (Also I'm not sure if this example project is getting tested in Chromatic)

@TheMightyPenguin
Copy link
Contributor Author

Oh I just saw the story in the chromatic link in CI 😄 https://www.chromatic.com/test?appId=5a375b97f4b14f0020b0cda3&id=60517a9dfa63c80021059690, but there are no tests for dark mode, should those be added?

@ndelangen
Copy link
Member

I don't see it as required to merge this PR, but if we could add a story like https://www.chromatic.com/test?appId=5a375b97f4b14f0020b0cda3&id=60517a9dfa63c80021059690 but in dark mode, that would be ♥️

@TheMightyPenguin TheMightyPenguin marked this pull request as ready for review March 17, 2021 14:59
@TheMightyPenguin TheMightyPenguin force-pushed the fix-docs-table-dark-mode branch from feb1343 to 2322e1c Compare March 17, 2021 15:55
@TheMightyPenguin
Copy link
Contributor Author

@ndelangen Added dark mode story! 😄 so this is ready for merging I think, the only issue is that ci/circleci: chromatic is failing with this error:

HTTPClient failed to fetch https://index.chromatic.com/graphql, got 503/Service Unavailable

@TheMightyPenguin TheMightyPenguin force-pushed the fix-docs-table-dark-mode branch from 2322e1c to 5cdb429 Compare March 17, 2021 21:25
@shilman shilman changed the title Fix Docs table dark mode #14029 Addon-docs: Fix table dark mode Mar 18, 2021
Copy link
Member

@shilman shilman left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking good!!! 🙏

@shilman shilman merged commit 9b2d7ca into storybookjs:next Mar 18, 2021
@TheMightyPenguin TheMightyPenguin deleted the fix-docs-table-dark-mode branch March 18, 2021 16:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants