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.

Sign up for GitHub

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

Jump to bottom

fix(Alert): Update alert to be based on component width #2942

Merged
merged 10 commits into from
Oct 16, 2024
Merged

fix(Alert): Update alert to be based on component width #2942

merged 10 commits into from
Oct 16, 2024

Conversation

aresnik11
Copy link
Contributor

@aresnik11 aresnik11 commented Oct 2, 2024 •
edited
Loading

Overview

Updates alert to be based on component width not screen size, so the button stacks when the alert is xs or smaller

PR Checklist

  • Related to designs:
  • Related to JIRA ticket: GM-868
  • I have run this code to verify it works
  • This PR includes unit tests for the code change
  • This PR includes testing instructions tests for the code change
  • The alpha package of this PR is passing end-to-end tests in all relevant Codecademy repositories

Testing Instructions

  1. View the Alert story here https://6706b76391cf1c0f2ee9213f--gamut-preview.netlify.app/?path=/docs/molecules-alert--usage-guidelines#small-widths
  2. Confirm the alert still looks as expected, but the button stacks when the component width is xs or smaller

PR Links and Envs

Repository PR Link PR Env
Monolith Monolith PR Monolith Env
Portal Portal Link Portal Env

@aresnik11 aresnik11 changed the title update alert to be based on width fix(Alert): Update alert to be based on component width Oct 9, 2024
@codecademydev
Copy link
Collaborator

🚀 Styleguide deploy preview ready!

https://670834c16345d06d6445a3c6--gamut-preview.netlify.app

Deploy Logs

@codecademydev
Copy link
Collaborator

📬Published Alpha Packages:

@codecademy/[email protected]
@codecademy/[email protected]
@codecademy/[email protected]

@aresnik11 aresnik11 marked this pull request as ready for review October 14, 2024 17:37
@aresnik11 aresnik11 requested a review from a team as a code owner October 14, 2024 17:37
dreamwasp
dreamwasp approved these changes Oct 16, 2024
View reviewed changes
Copy link
Contributor

@dreamwasp dreamwasp left a comment

Choose a reason for hiding this comment

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

image

this is a preexisting bug, but do the alerts have a max width somewhere that stop them at this width or is it a storybook thing?

either way, looks awesome!!!! 🔥

@aresnik11
Copy link
Contributor Author

image

this is a preexisting bug, but do the alerts have a max width somewhere that stop them at this width or is it a storybook thing?

either way, looks awesome!!!! 🔥

@dreamwasp this has come up before and is preexisting so lets handle it separately

@aresnik11 aresnik11 added the Ship It :shipit: Automerge this PR when possible label Oct 16, 2024
@codecademydev codecademydev merged commit 9367531 into main Oct 16, 2024
19 of 20 checks passed
@codecademydev codecademydev removed the Ship It :shipit: Automerge this PR when possible label Oct 16, 2024
@codecademydev codecademydev deleted the ajr-fix-alert-button branch October 16, 2024 16:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@dreamwasp dreamwasp dreamwasp approved these changes

@LinKCoding LinKCoding Awaiting requested review from LinKCoding LinKCoding is a code owner automatically assigned from Codecademy/gamut

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@aresnik11 @codecademydev @dreamwasp