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

style: add selector for icon-only buttons to not rely on icon name #2046

Merged
merged 2 commits into from
Jan 30, 2025

Conversation

pixelflips
Copy link
Member

Description

Since we no longer update the icon list in Sage, this has caused a padding issue on the icon-only buttons when new icons are added to the system.

Currently, the generated class names include the icon name. We should adjust the style selector so the icon name is unnecessary since we no longer update the list of icons in Sage.

This PR adjusts the CSS selector so the icon name is not required.

Screenshots

Before After
Screenshot 2025-01-30 at 12 06 54 PM Screenshot 2025-01-30 at 12 06 38 PM

Testing in sage-lib

  • Navigate to docs site
  • On one of the icon-only buttons change the class name to an icon that does not exist (sage-btn--icon-only-file-search)
  • Verify that the padding is correct on the button and it remains round.

Testing in kajabi-products

  1. (LOW) style fix for icon-only buttons that have new icons.

Related

https://kajabi.atlassian.net/browse/DSS-1249

@pixelflips pixelflips self-assigned this Jan 30, 2025
@pixelflips pixelflips requested a review from a team January 30, 2025 20:28
Copy link
Collaborator

@ju-Skinner ju-Skinner left a comment

Choose a reason for hiding this comment

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

🔥

@ju-Skinner ju-Skinner requested a review from a team January 30, 2025 21:15
@pixelflips pixelflips merged commit 437c663 into develop Jan 30, 2025
7 checks passed
ju-Skinner added a commit that referenced this pull request Jan 31, 2025
* style: update Font Family's to match the system installed font name (#2038)

Co-authored-by: Julian Skinner <[email protected]>

* style: add border to only catalog item child (#2040)

* style: update rtl positioning (#2043)

* fix: remove button role from react modal (#2044)

* fix: remove rtl logical wrapper (#2041)

* fix: add text dotted underline (#2045)

* fix: add new dotted underline classes

* style: add dotted underline styles

* docs: update docs to include dotted underline

* fix: hello linter my old friend

* style: correct underline dotted styles for better safari support

* style: add selector for icon-only buttons to not rely on icon name (#2046)

* style: add selector for icon-only buttons to not rely on icon name

* style: correct lint error

---------

Co-authored-by: Julian Skinner <[email protected]>
Co-authored-by: Quinton Jason <[email protected]>
Co-authored-by: Phillip Lovelace <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants