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

Adjusted alignment of button within new grid #3502

Open
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

SriHV
Copy link
Contributor

@SriHV SriHV commented Feb 17, 2025

What is the context of this PR?

ONSDESYS-137

As per Dina's suggestion. increased height of the button to sit in the 8px grid
Removed CSS set for IE11 High Contrast mode which adjusted the button size.

How to review this PR

Inspect any of the button examples and check that button's height is rounder

Checklist

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

  • I have selected the correct Assignee
  • I have linked the correct Issue

Copy link

netlify bot commented Feb 17, 2025

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

Name Link
🔨 Latest commit d000253
🔍 Latest deploy log https://app.netlify.com/sites/ons-design-system-preview/deploys/67b61916ce5d250008ab306d
😎 Deploy Preview https://deploy-preview-3502--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.

@SriHV SriHV changed the title Removed css for IE11 High Contrast mode to adjust alignment of button Adjusted alignment of button within new grid Feb 17, 2025
@SriHV SriHV marked this pull request as ready for review February 17, 2025 17:45
@SriHV SriHV requested a review from a team as a code owner February 17, 2025 17:45
@SriHV SriHV added the Enhancement Change of existing feature label Feb 17, 2025
@SriHV SriHV self-assigned this Feb 17, 2025
@@ -42,7 +34,7 @@ $button-shadow-size: 3px;
color: var(--ons-color-text-inverse);
display: flex;
align-items: center;
padding: 0.75rem 1rem;
padding: 0.875rem 1rem;
Copy link
Contributor

Choose a reason for hiding this comment

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

Why was this change made? If I revert it, the button is still on the grid

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Dina told to increase the height of the buttons to fit the 8px grid. I changed padding to increase the height. Small button height is changed from 32 to 36 and large button's height from 52 to 56.
image

@rmccar rmccar added the Breaking changes This PR contains at least one breaking change label Feb 20, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Breaking changes This PR contains at least one breaking change Enhancement Change of existing feature
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants