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

UI: Fix display of custom brand image #13355

Merged
merged 4 commits into from Dec 4, 2020
Merged

Conversation

kylegach
Copy link
Collaborator

@kylegach kylegach commented Dec 1, 2020

Issue: #13313

When supplying theme.brandImage, the image renders very small, effectively invisible:

Screenshot of misrendered element

What I did

The (Brand) (which renders the selected element in the screenshot, above) is inside a flex container (BrandArea), so I applied flex: 1 1 auto (and removed the now redundant width: auto) to BrandArea's immediate descendants to fill the available width. It was previously (implicitly) using the default of flex: 0 1 auto.

How to test

  • Is this testable with Jest or Chromatic screenshots? Not sure, probably
  • Does this need a new example in the kitchen sink apps? No
  • Does this need an update to the documentation? No

If your answer is yes to any of these, please make sure to include it in your PR.

@shilman shilman added the patch:yes Bugfix & documentation PR that need to be picked to main branch label Dec 1, 2020
@shilman shilman added this to the 6.1.x milestone Dec 1, 2020
@ghengeveld
Copy link
Member

👏 Great work, I didn't think it was possible. I added some stories to test the layout with an unsized SVG (i.e. one that doesn't have a width/height prop). Also I reduced some margin so the logo can be a bit bigger.

Copy link
Member

@ghengeveld ghengeveld left a comment

Choose a reason for hiding this comment

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

LGTM. Do check the Chromatic tests.

@ghengeveld ghengeveld assigned shilman and unassigned ghengeveld Dec 3, 2020
@kylegach
Copy link
Collaborator Author

kylegach commented Dec 3, 2020

Thanks for adding the stories, Gert!

Looks like we have one failing story, Standard No Link: https://www.chromatic.com/component?appId=5a375b97f4b14f0020b0cda3&name=UI%2FSidebar%2FHeading&mode=interactive&buildNumber=20261&specName=Standard+No+Link

Which seems related to whether or not an anchor is rendered around the image. I suspect a "Custom Brand Image No Link" story would be incorrect, as well.

I'll take a look asap.

Additionally this refactors the Brand component for readability.
@ghengeveld
Copy link
Member

@kylegach I fixed the misaligning image and also refactored the Brand component because it was pretty complicated.

@shilman shilman merged commit f60ba03 into storybookjs:next Dec 4, 2020
@shilman shilman added the patch:done Patch/release PRs already cherry-picked to main/release branch label Dec 4, 2020
shilman added a commit that referenced this pull request Dec 4, 2020
UI: Fix display of custom brand image
@kylegach kylegach deleted the patch-1 branch December 4, 2020 14:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug patch:done Patch/release PRs already cherry-picked to main/release branch patch:yes Bugfix & documentation PR that need to be picked to main branch ui
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants