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

[SAGE-780] SageGrid column class fix #1566

Merged
merged 2 commits into from
Aug 29, 2022

Conversation

teenwolfblitzer
Copy link
Member

@teenwolfblitzer teenwolfblitzer commented Aug 22, 2022

Description

SAGE-780

Addresses a bug in the 12-column grid when using Rails SageGridCol component by removing the duplicate sage-col class when a responsive breakpoint is provided. In certain cases, this caused irregular sizing issues due to conflicting media queries.

Most easily noticeable when the lg breakpoint is in use. For example, open the "Help & Feedback" modal in the KP sidebar, and note that the sage-col--lg-6 columns follow the sage-col-6 media query when resized.

Screenshots

Before After
before-grid-col after-grid-col

Testing in sage-lib

  1. Navigate to the Sage docs homepage
  2. Inspect any of the content columns (within .docs-section)
  3. Confirm the grid columns are only rendering responsive grid column classes (ex. sage-col--md-4)

Testing in kajabi-products

  1. (HIGH) Modifies output of SageGridCol component
    • Website -> Blog posts -> Edit post
    • Sidebar -> "Help & Feedback" modal

Related

@teenwolfblitzer teenwolfblitzer added the bug Something isn't working label Aug 22, 2022
@teenwolfblitzer teenwolfblitzer self-assigned this Aug 22, 2022
elsif !col.breakpoint.present? && !col.size.present? && grid_col_legacy(col)
# or if a legacy individual breakpoint is provided
grid_col_breakpoint_individual(col, column_classes)
else
Copy link
Member Author

Choose a reason for hiding this comment

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

Providing a breakpoint value without a size constraint will output the plain sage-col since a size is required for these columns to be useful.

@teenwolfblitzer teenwolfblitzer marked this pull request as ready for review August 23, 2022 01:13
@teenwolfblitzer teenwolfblitzer force-pushed the SAGE-780_grid_helper_breakpoint_patch branch from 923a5f9 to 18f19c6 Compare August 25, 2022 18:58
Copy link
Contributor

@QuintonJason QuintonJason left a comment

Choose a reason for hiding this comment

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

Looks and works great!

@teenwolfblitzer teenwolfblitzer requested a review from a team August 26, 2022 18:54
Copy link
Contributor

@philschanely philschanely left a comment

Choose a reason for hiding this comment

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

Love it! Nice work. Not a blocker, but I wonder if this could/should be a method on the Grid component itself rather than in a helper?

@philschanely philschanely requested a review from a team August 26, 2022 18:58
@teenwolfblitzer
Copy link
Member Author

teenwolfblitzer commented Aug 29, 2022

Love it! Nice work. Not a blocker, but I wonder if this could/should be a method on the Grid component itself rather than in a helper?

That's a great point, my primary goal was to decouple the conditionals from the markup, but creating a new helper is probably unnecessary. Since this was intended as a somewhat temporary patch until the 12-col grid situation is fleshed out, I'm inclined to wait to fold it in until we have a chance to refactor the component.

@teenwolfblitzer teenwolfblitzer force-pushed the SAGE-780_grid_helper_breakpoint_patch branch from 18f19c6 to 537cc26 Compare August 29, 2022 17:02
@teenwolfblitzer teenwolfblitzer merged commit 70f4bab into develop Aug 29, 2022
@teenwolfblitzer teenwolfblitzer deleted the SAGE-780_grid_helper_breakpoint_patch branch August 29, 2022 21:52
@teenwolfblitzer teenwolfblitzer mentioned this pull request Aug 29, 2022
4 tasks
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.

4 participants