Add disabled groups #1764
Merged
Add disabled groups #1764
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
mollerjorge
force-pushed
the
jorge/grid-grey-out-groups
branch
from
86d5390 to
208ddad
Compare
size-limit report 📦
|
mollerjorge
force-pushed
the
jorge/grid-grey-out-groups
branch
from
208ddad to
60a9356
Compare
Passanelli
reviewed
Nov 26, 2024
Comment on lines
+26
to
+51
| <g> | ||
| <rect | ||
| x={x + BACKGROUND_GAP / 2} | ||
| y={y + BACKGROUND_GAP / 2} | ||
| width={adjustedWidth} | ||
| height={adjustedHeight} | ||
| fill={fill} | ||
| rx="4" | ||
| ry="4" | ||
| opacity={opacity} | ||
| /> | ||
| {isDisabled && ( | ||
| <rect | ||
| x={x + BACKGROUND_GAP / 2 + 1} | ||
| y={y + BACKGROUND_GAP / 2 + 1} | ||
| width={adjustedWidth - 2} | ||
| height={adjustedHeight - 2} | ||
| fill="none" | ||
| stroke="#E3E3E3" | ||
| strokeWidth="1" | ||
| strokeDasharray="4 4" | ||
| rx="3" | ||
| ry="3" | ||
| /> | ||
| )} | ||
| </g> |
There was a problem hiding this comment.
out of curiosity, is needed to return both <rect /> even when isDisabled is true, or can we just return the disabled style <rect /> only when this is true?
There was a problem hiding this comment.
good question! so the inner <rect simulates an inner dashed border for the disabled groups. I tried to add the strokeDashArray on the parent rect, but the dashed border doesn't appear inside, instead appears outside, and in the designs the dashed borders are inside the rectangle.
It basically simulates a container for an inner border when the group is disabled.
mollerjorge
force-pushed
the
jorge/grid-grey-out-groups
branch
from
60a9356 to
4ead2cd
Compare
Passanelli
approved these changes
Nov 27, 2024
mollerjorge
force-pushed
the
jorge/grid-grey-out-groups
branch
from
4ead2cd to
beccc58
Compare
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.
What does this implement/fix?
This PR adds support for showing groups that are disabled (filtered out) in the RFM grid with a greyed out background and a dashed border.
Storybook link
https://dhvi79nyj9utsllw.tunnel.shopifycloud.tech/?path=/story/polaris-viz-charts-grid-playground--missing-groups
Before merging
Check your changes on a variety of browsers and devices.
Update the Changelog's Unreleased section with your changes.
Update relevant documentation, tests, and Storybook.
Make sure you're exporting any new shared Components, Types and Utilities from the top level index file of the package