fix: (core/blind and core/push-card) Added margin for variants and updated the outline variant to figma design.#2520
fix: (core/blind and core/push-card) Added margin for variants and updated the outline variant to figma design.#25201307-Dev wants to merge 17 commits into
Conversation
🦋 Changeset detectedLatest commit: e642b18 The changes in this PR will be included in the next version bump. This PR includes changesets to release 5 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request refactors the styling for the blind and push-card components, introducing a new header wrapper and specific styles for various variants like outline, alarm, and warning. The feedback identifies that a changeset is required for these user-facing changes and that axe-based accessibility tests should be added to cover the new interaction states. Additionally, the border-radius calculations in both components should be corrected to ensure visual symmetry between the top and bottom corners.
1307-Dev
changed the title
Co-authored-by: Copilot <copilot@github.com>
Co-authored-by: Copilot <copilot@github.com>
Co-authored-by: Copilot <copilot@github.com>
| } | ||
|
|
||
| @if $variant == 'filled' { | ||
| background-color: var(--theme-blind-base--background); |
There was a problem hiding this comment.
Seems like a redundant statement (filled != outline).
| // Handle collapsed state for outline variant | ||
| // When collapsed, header wrapper needs bottom border and full border-radius |
There was a problem hiding this comment.
| // Handle collapsed state for outline variant | |
| // When collapsed, header wrapper needs bottom border and full border-radius |
| } | ||
| } | ||
|
|
||
| // Header wrapper with borders (only for outline variant) |
There was a problem hiding this comment.
| // Header wrapper with borders (only for outline variant) |
| } | ||
| } | ||
|
|
||
| // Blind content with borders (non-reactive, stays default) |
There was a problem hiding this comment.
| // Blind content with borders (non-reactive, stays default) |
| grid-template-rows: 14.75rem; | ||
| opacity: 1; | ||
| border-radius: var(--ix-card-accordion-expand-content--border-radius, 0); | ||
| overflow: var(--ix-card-accordion-expand-content--overflow, visible); |
There was a problem hiding this comment.
Why is this neccessary?
|
|
||
| .expand-content.show { | ||
| border: var( | ||
| --theme-push-card-#{$variant}-accordion-frame--border-width, |
There was a problem hiding this comment.
Why did we change border width var?
| border-top: none; | ||
| } | ||
|
|
||
| &.hide { |
There was a problem hiding this comment.
border vanishes during close animation which looks weird and is distracting
| --theme-push-card-#{$variant}-accordion--background--hover: var(--theme-push-card-#{$variant}-accordion--background); | ||
| --theme-push-card-#{$variant}-accordion--background--active: var(--theme-push-card-#{$variant}-accordion--background); | ||
| --theme-push-card-#{$variant}-accordion-frame--border-color: var(--theme-push-card-#{$variant}-accordion--background); |
There was a problem hiding this comment.
Why are they all the same. This removes the mouse state visual feedback
There was a problem hiding this comment.
End of closing animation has a bouncy effect now.
✅ Deploy Preview for ix-storybook ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
2 participants
💡 What is the current behavior?
No borders present for alarm, success, other validation variants.
Outline variant behavior is different from figma design.
GitHub Issue Number: #
Jira Ticket- IX-4047
🆕 What is the new behavior?
Added CSS changes to reflect figma design better
🏁 Checklist
A pull request can only be merged if all of these conditions are met (where applicable):
pnpm test)pnpm lint)pnpm build, changes pushed)👨💻 Help & support