chore: Visualise grid lines through a background gradient #1390
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
VincentSmedinga
commented
Jul 15, 2024
storybook/config/preview-body.html
Outdated
Comment on lines
96
to
98
| inset-block: 0; | ||
| inset-inline: var(--margin-width); | ||
| position: absolute; |
There was a problem hiding this comment.
I resorted to this to ensure the background image doesn’t overlap the horizontal grid padding – background-position doesn’t work. But it hampers inspecting the element through dev tools, so a better solution is welcome. We could then probably apply the background to the element itself instead of a pseudo-element.
There was a problem hiding this comment.
(This is now in docs.css.)
github-actions
bot
temporarily deployed
to
demo-DES-802-visualise-grid-in-docs
VincentSmedinga
commented
Jul 15, 2024
| @@ -66,7 +69,7 @@ type CellStory = StoryObj<typeof cellMeta> | |||
| const StoryTemplate: Story = { | |||
| decorators: [ | |||
| (Story) => ( | |||
| <Screen> | |||
| <Screen className="ams-storybook-show-grid"> | |||
There was a problem hiding this comment.
I’d prefer to apply the class to the grid itself, but setting it on <Story /> doesn’t get it applied.
Making it an arg in meta sets it on Grid Cells as well, resulting in an incorrect background pattern.
…s anything helpful
github-actions
bot
temporarily deployed
to
demo-DES-802-visualise-grid-in-docs
dlnr
previously approved these changes
Jul 18, 2024
# Conflicts: # storybook/config/preview-body.html # storybook/src/components/Grid/Grid.docs.mdx
github-actions
bot
temporarily deployed
to
demo-DES-802-visualise-grid-in-docs
github-actions
bot
temporarily deployed
to
demo-DES-802-visualise-grid-in-docs
github-actions
bot
temporarily deployed
to
demo-DES-802-visualise-grid-in-docs
RubenSibon
approved these changes
Sep 6, 2024
github-actions
bot
temporarily deployed
to
demo-DES-802-visualise-grid-in-docs
github-actions
bot
temporarily deployed
to
demo-DES-802-visualise-grid-in-docs
github-actions
bot
temporarily deployed
to
demo-DES-802-visualise-grid-in-docs
|
Superseded by #1605. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This shows light grey grid lines on the Grid docs page to indicate the columns. It separates the concepts of columns and cells – cells are still pink. Examples are full screen which adds to the experience as well.
It uses a gradient background based on the grid variables. The lines are a bit off in Safari, unfortunately, but in Chrome and Firefox they appear correctly. One comment for it on the code though.
I got the idea while working on the Spotlight with break-out content, for which a separate PR will follow.
About the class name and file used: I intend to merge all documentation classes under one namespace, either.ams-docs-*or.ams-storybook-*and move them into one file shortly.