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

fix(Storybook): Firefox Storybook docs obscures components #2808

Merged
merged 2 commits into from
Nov 17, 2021

Conversation

m7kvqbe1
Copy link
Collaborator

@m7kvqbe1 m7kvqbe1 commented Nov 17, 2021

Related issue

Closes #2810

storybookjs/storybook#16714

storybookjs/storybook#8928

Overview

Overiding some Storybook styles to fix presentation when viewed using the Firefox browser.

Reason

Storybook obscures components that have hidden elements (think ContextMenu or DatePicker) when viewed with the Firefox browser.

Work carried out

  • Run Cypress e2e suites against Firefox in CI
  • Add ContextMenu test to catch issue
  • Overide some Storybook styles to fix Firefox presentation

Screenshot

Screenshot 2021-11-17 at 11 05 03

Screenshot 2021-11-17 at 11 05 19

Developer notes

Added slightly different assertion to account for Firefox behaviour with DatePicker.

Issue created pending further investigation: #2809

@m7kvqbe1 m7kvqbe1 added Type: Bug Inconsistencies or issues which have caused a problem for users or implementors Package: react-component-library Package/code type Type: Development Related to a design system component labels Nov 17, 2021
@m7kvqbe1 m7kvqbe1 self-assigned this Nov 17, 2021
@jpveooys
Copy link
Collaborator

Did you mean to link #2810 instead of #418?

@m7kvqbe1 m7kvqbe1 requested a review from jpveooys November 17, 2021 14:03
Copy link
Collaborator

@jpveooys jpveooys left a comment

Choose a reason for hiding this comment

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

Nice one! This was driving me insane 😄

There's a small glitch with the Modal and Dialog backgrounds at the top if it's easily fixable (not to worry if not):

image

@m7kvqbe1 m7kvqbe1 requested a review from jpveooys November 17, 2021 14:26
@m7kvqbe1
Copy link
Collaborator Author

Nice spot! That has also been sorted now.

@m7kvqbe1 m7kvqbe1 requested a review from jpveooys November 17, 2021 14:32
Copy link
Collaborator

@jpveooys jpveooys left a comment

Choose a reason for hiding this comment

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

Nice one 👍

Added slightly different assertion to account for Firefox behaviour with `DatePicker`.

Issue created pending further investigation:

Royal-Navy/design-system-docs#417
Storybook obscures components that have hidden elements (think ContextMenu or DatePicker) when viewed with the Firefox browser.

This made the docs section almost unusable in Firefox. The only solution at this time appears to be overiding some Storybook styles.

storybookjs/storybook#16714
storybookjs/storybook#8928

Included a `ContextMenu` cypress test to help catch the issue with Storybook version bumps.
@m7kvqbe1 m7kvqbe1 force-pushed the fix/firefox-storybook-docs-obscured-components branch from 6918764 to 6699b5a Compare November 17, 2021 15:11
@sonarcloud
Copy link

sonarcloud bot commented Nov 17, 2021

Kudos, SonarCloud Quality Gate passed!    Quality Gate passed

Bug A 0 Bugs
Vulnerability A 0 Vulnerabilities
Security Hotspot A 0 Security Hotspots
Code Smell A 0 Code Smells

No Coverage information No Coverage information
No Duplication information No Duplication information

@m7kvqbe1 m7kvqbe1 merged commit e5b1b3c into master Nov 17, 2021
@m7kvqbe1 m7kvqbe1 deleted the fix/firefox-storybook-docs-obscured-components branch November 17, 2021 15:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Package: react-component-library Package/code type Type: Bug Inconsistencies or issues which have caused a problem for users or implementors Type: Development Related to a design system component
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Storybook obscures hidden components (like DatePicker) in Firefox browser
2 participants