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(modal): set half width single buttons #5502

Merged
merged 5 commits into from
Mar 3, 2020
Merged

fix(modal): set half width single buttons #5502

merged 5 commits into from
Mar 3, 2020

Conversation

emyarod
Copy link
Member

@emyarod emyarod commented Mar 2, 2020

Closes #5344
Closes #5345
Closes #5346
Refs #4607, more research needed for expected 3 button modal layout

This PR sets a single button within modal footers to span half of the modal width while maintaining default 2 button modal layout

Testing / Reviewing

Ensure single button modals appear correct

@emyarod emyarod requested a review from aagonzales March 2, 2020 16:19
@emyarod emyarod requested a review from a team as a code owner March 2, 2020 16:19
@ghost ghost requested review from asudoh and joshblack March 2, 2020 16:19
@netlify
Copy link

netlify bot commented Mar 2, 2020

Deploy preview for carbon-elements ready!

Built with commit 851463a

https://deploy-preview-5502--carbon-elements.netlify.com

@netlify
Copy link

netlify bot commented Mar 2, 2020

Deploy preview for carbon-components-react ready!

Built with commit 851463a

https://deploy-preview-5502--carbon-components-react.netlify.com

@aagonzales
Copy link
Member

@emyarod is there a knob to see it?

@netlify
Copy link

netlify bot commented Mar 2, 2020 •
edited
Loading

Deploy preview for carbon-elements ready!

Built with commit d5fd167

https://deploy-preview-5502--carbon-elements.netlify.com

@netlify
Copy link

netlify bot commented Mar 2, 2020 •
edited
Loading

Deploy preview for carbon-components-react ready!

Built with commit d5fd167

https://deploy-preview-5502--carbon-components-react.netlify.com

@emyarod
Copy link
Member Author

emyarod commented Mar 2, 2020

@aagonzales the ComposedModal story contains some single button modal examples

@aagonzales
Copy link
Member

Got it, was only looking under "modal".
Side question: what's the difference between "compose modal" "modal" and "modal wrapper"

aagonzales
aagonzales requested changes Mar 2, 2020
View reviewed changes
Copy link
Member

@aagonzales aagonzales left a comment

Choose a reason for hiding this comment

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

Empty space beside the single primary button should be the same color as the modal content area, not darker.

image

@emyarod
Copy link
Member Author

emyarod commented Mar 2, 2020

The Modal component is just the modal by itself. Composed modal allows users to create their own modals with only the pieces they need. The ModalWrapper story just shows the modal launching UX. All three share the same styles (modal component styles)

it looks like the modal footer color was carried over from v9 so I will deprecate that token

@emyarod emyarod requested a review from aagonzales March 2, 2020 17:47
aagonzales
aagonzales approved these changes Mar 2, 2020
View reviewed changes
Copy link
Member

@aagonzales aagonzales left a comment

Choose a reason for hiding this comment

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

Look good!

abbeyhrt
abbeyhrt approved these changes Mar 2, 2020
View reviewed changes
Copy link
Contributor

@abbeyhrt abbeyhrt left a comment

Choose a reason for hiding this comment

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

LGTM! 🎉

asudoh
asudoh approved these changes Mar 2, 2020
View reviewed changes
Copy link
Contributor

@asudoh asudoh left a comment

Choose a reason for hiding this comment

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

LGTM 👍 - Thanks @emyarod!

@asudoh asudoh merged commit 9bc8635 into carbon-design-system:master Mar 3, 2020
@emyarod emyarod deleted the modal-button-enhancements branch March 4, 2020 16:12
joshblack pushed a commit to joshblack/carbon that referenced this pull request Mar 10, 2020
@emyarod @joshblack
fix(modal): set half width single buttons (carbon-design-system#5502)
80903ac
This was referenced Mar 10, 2020
Closed
Closed
@joshblack joshblack mentioned this pull request Mar 31, 2020
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@abbeyhrt abbeyhrt abbeyhrt approved these changes

@aagonzales aagonzales aagonzales approved these changes

@asudoh asudoh asudoh approved these changes

@joshblack joshblack Awaiting requested review from joshblack

Assignees
No one assigned
Labels
status: ready to merge 🎉
Projects
None yet
Milestone
No milestone
5 participants
@emyarod @aagonzales @asudoh @abbeyhrt @tw15egan