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

feat(components): adding full width attribute to the appshell #2143

Merged
merged 3 commits into from
Apr 12, 2024

Conversation

owilliams320
Copy link
Collaborator

@owilliams320 owilliams320 commented Apr 12, 2024

Description

Adjustments to the appshell component to set a max width on the main content. Specs for the responsive appshell container can viewed here.

What's included?

  • Added a fullWidth attribute to allow the consumer to let the main content be 100% width
  • Set a max width that is responsive

Test Steps

  • npm run storybook
  • then go to the app shell story and click the "launch in new window" icon
  • finally resize your screen from largest to small to see the max width assigned and responsive behavior

General Tests for Every PR

  • npm run start still works.
  • npm run lint passes.
  • npm run stylelint passes.
  • npm test passes and code coverage is not lower.
  • npm run build still works.
Screenshots or link to StackBlitz/Plun
Screenshot 2024-04-12 at 9 40 03 AM

Copy link
Collaborator

@adamnel adamnel left a comment

Choose a reason for hiding this comment

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

There's some weird behavior at widths 768–800px. Nav becomes floating and content gets cropped instead of filling the available space

@owilliams320 owilliams320 merged commit 5c37982 into main Apr 12, 2024
7 checks passed
@owilliams320 owilliams320 deleted the feat/app-shell-max-width branch April 12, 2024 15:03
@owilliams320
Copy link
Collaborator Author

🎉 This PR is included in version 8.10.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants