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

Change widths of components inside card to be their contents width #2827

Merged
merged 5 commits into from
Oct 12, 2023

Conversation

adi-unni
Copy link
Contributor

@adi-unni adi-unni commented Oct 5, 2023

What is the context of this PR?

Fixes: #2818

Issue was within the card component. Previously, card's components would scale to the width of the whole card, but now scale to just their contents. Additionally, incorrect margin's were being applied to headings within the card, so removing that bring design back in line with other components when tabbing.

How to review this PR

Pressing tab on the card components should reveal new boundaries for focussed states within the card.

Before and After for components changed when focussed:

Screenshot 2023-10-05 at 10 52 07
Screenshot 2023-10-05 at 10 53 29

Screenshot 2023-10-05 at 10 52 22
Screenshot 2023-10-05 at 10 53 42

Checklist

This needs to be completed by the person raising the PR.

  • I have selected the correct Project for this PR (Design System) and selected the correct status
  • I have selected the correct Assignee
  • I have linked the correct Issue

@adi-unni adi-unni linked an issue Oct 5, 2023 that may be closed by this pull request
@netlify
Copy link

netlify bot commented Oct 5, 2023

Deploy Preview for ons-design-system-preview ready!

Name Link
🔨 Latest commit 7fe6eb0
🔍 Latest deploy log https://app.netlify.com/sites/ons-design-system-preview/deploys/652682c93f7869000842704b
😎 Deploy Preview https://deploy-preview-2827--ons-design-system-preview.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@adi-unni adi-unni self-assigned this Oct 5, 2023
@adi-unni adi-unni added the Bug Something isn't working label Oct 5, 2023
@adi-unni adi-unni marked this pull request as ready for review October 5, 2023 10:15
src/components/card/_card.scss Outdated Show resolved Hide resolved
src/components/card/_macro.njk Outdated Show resolved Hide resolved
src/components/card/_macro.njk Outdated Show resolved Hide resolved
@adi-unni adi-unni merged commit f776232 into main Oct 12, 2023
8 checks passed
@adi-unni adi-unni deleted the fix/2818/focus-states-are-too-wide-on-card-components branch October 12, 2023 16:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bug Something isn't working
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Focus states are too wide on card components
3 participants