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

[Carbon X: Modal]: footer supports only 2 buttons #2325

Closed
elizabethsjudd opened this issue Apr 18, 2019 · 6 comments · Fixed by #2900
Closed

[Carbon X: Modal]: footer supports only 2 buttons #2325

elizabethsjudd opened this issue Apr 18, 2019 · 6 comments · Fixed by #2900

Comments

@elizabethsjudd
Copy link
Contributor

Detailed description

Describe in detail the issue you're having.

We need the modal styles to support a various number of buttons in the footer. We often have modals with only 1 button (and am not sure if it's intended that it's left align in relation to the modal) and we have some scenarios where we need 3 buttons/actions in the modal footer which causes them to overflow the edge of the modal.

Is this issue related to a specific component?

Modal

What did you expect to happen? What happened instead? What would you like to see changed?

The modal footer can support 1 - 3 buttons/actions

What browser are you working in?

Chrome

What version of the Carbon Design System are you using?

v10.0.0

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

Watson Health Pattern & Asset Library

Additional information

Modal with 1 button
Screen Shot 2019-04-18 at 2 12 05 PM

Modal with 3 buttons
Screen Shot 2019-04-17 at 9 28 13 AM

Use-case from actual IBM offering
Screen Shot 2019-04-17 at 10 51 39 AM
@asudoh
Copy link
Contributor

asudoh commented Apr 18, 2019

@IBM/carbon-designers Any thoughts on this...? An interesting thing I see here is that the third button in the above screenshot won't fit in the group of other two.

@aagonzales
Copy link
Member

If a modal only has one button, the button should take up 100% of the container.
Side-note: modals that have no real action to take (like ok) should be using the passive modal if its just informing the user and not asking the user to take an action.

image

Modal should not have 3 buttons. The "help" or other 3 non-primary action should be added as a link in the content of the modal.

image

@elizabethsjudd
Copy link
Contributor Author

@aagonzales Thanks for the input. We're okay at the moment to not support 3 buttons but if Carbon could still update to support the 1 button that is full width that would be greatly appreciated.

@stale
Copy link

stale bot commented May 20, 2019

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

@stale stale bot added the status: inactive Will close if there's no further activity within a given time label May 20, 2019
@aagonzales
Copy link
Member

Not stale

@stale stale bot removed the status: inactive Will close if there's no further activity within a given time label May 21, 2019
@shixiedesign
Copy link
Contributor

q: @carbon-design-system/developers do we already support 1 button modal?

asudoh added a commit to asudoh/carbon-components that referenced this issue May 31, 2019
@asudoh
fix(modal): support different numbers of buttons
0bf0831 
Fixes carbon-design-system#2325.
@asudoh asudoh mentioned this issue May 31, 2019
Merged
joshblack pushed a commit that referenced this issue Jun 3, 2019
@asudoh @joshblack
fix(modal): support different numbers of buttons (#2900)
c3672c8 
Fixes #2325.
@laurenmrice laurenmrice mentioned this issue Jun 3, 2019
Closed
1 task
@shixiedesign shixiedesign mentioned this issue Jun 3, 2019
Closed
@lovemecomputer lovemecomputer mentioned this issue Jun 3, 2019
Closed
52 tasks
harpality pushed a commit to harpality/carbon that referenced this issue Jun 5, 2019
@asudoh @harpality
fix(modal): support different numbers of buttons (carbon-design-syste…
9bf5bc5 
…m#2900)

Fixes carbon-design-system#2325.
joshblack pushed a commit that referenced this issue Jun 12, 2019
@harpality @joshblack
fix(overflow-menu): update aria-label and roles, made ul a sibling (#…
2acc3e3 
…2906)

* fix(overflow-menu): updated aria-label and roles, made ul a sibling

* fix(overflow-menu): removing unused var

* fix(overflow-menu): update snapshots

* chore(project): use yarn policies to set version to 1.16.0 (#2902)

* chore(project): use yarn policies to set version to 1.16.0

* chore(project): update prettier to ignore .yarn folder

* fix(modal): support different numbers of buttons (#2900)

Fixes #2325.

* chore(examples): build examples based on whitelist (#2903)

* chore(release): v10.3.0-rc.2 (#2908)

* fix(overflow-menu): update defaultprops for Menu

* fix(overflow-menu): removed add'l this.props

* fix(overflow-menu): update snapshots

* fix(radio-button): group-level label/button alignment (#2914)

Fixes #2286.

* Fix sass error (#2905)

* chore(deps): bump sshpk in /packages/react/examples/create-react-app (#2915)

Bumps [sshpk](https://github.com/joyent/node-sshpk) from 1.13.1 to 1.16.1.
- [Release notes](https://github.com/joyent/node-sshpk/releases)
- [Commits](TritonDataCenter/node-sshpk@v1.13.1...v1.16.1)

* fix(overflow-menu): rollback ul changes

* fix(tooltip): set width to content max (#2923)

* chore(deps): bump safer-eval (#2930)

Bumps [safer-eval](https://github.com/commenthol/safer-eval) from 1.2.3 to 1.3.3.
- [Release notes](https://github.com/commenthol/safer-eval/releases)
- [Commits](commenthol/safer-eval@v1.2.3...v1.3.3)

Signed-off-by: dependabot[bot] <support@github.com>

* chore(deps): bump safer-eval in /packages/colors/examples/preview (#2931)

Bumps [safer-eval](https://github.com/commenthol/safer-eval) from 1.2.3 to 1.3.3.
- [Release notes](https://github.com/commenthol/safer-eval/releases)
- [Commits](commenthol/safer-eval@v1.2.3...v1.3.3)

Signed-off-by: dependabot[bot] <support@github.com>

* fix(button): require iconDescription for icon-only (#2929)

* fix(Button): require iconDescription for icon-only

Fixes #2884.

* chore(test): update snapshots

* fix(overflow-menu): update snapshots

* Revert "fix(overflow-menu): update snapshots"

This reverts commit 1015db6.

* fix(overflow-menu): update snapshots

* `Revert "fix(overflow-menu): update snapshots"

This reverts commit 6fe35a6.

* fix(overflow-menu): update snapshots

* chore(react): remove redundant version field
joshblack pushed a commit to joshblack/carbon that referenced this issue Jun 12, 2019
@harpality @joshblack
fix(overflow-menu): update aria-label and roles, made ul a sibling (c…
5cc00bb 
…arbon-design-system#2906)

* fix(overflow-menu): updated aria-label and roles, made ul a sibling

* fix(overflow-menu): removing unused var

* fix(overflow-menu): update snapshots

* chore(project): use yarn policies to set version to 1.16.0 (carbon-design-system#2902)

* chore(project): use yarn policies to set version to 1.16.0

* chore(project): update prettier to ignore .yarn folder

* fix(modal): support different numbers of buttons (carbon-design-system#2900)

Fixes carbon-design-system#2325.

* chore(examples): build examples based on whitelist (carbon-design-system#2903)

* chore(release): v10.3.0-rc.2 (carbon-design-system#2908)

* fix(overflow-menu): update defaultprops for Menu

* fix(overflow-menu): removed add'l this.props

* fix(overflow-menu): update snapshots

* fix(radio-button): group-level label/button alignment (carbon-design-system#2914)

Fixes carbon-design-system#2286.

* Fix sass error (carbon-design-system#2905)

* chore(deps): bump sshpk in /packages/react/examples/create-react-app (carbon-design-system#2915)

Bumps [sshpk](https://github.com/joyent/node-sshpk) from 1.13.1 to 1.16.1.
- [Release notes](https://github.com/joyent/node-sshpk/releases)
- [Commits](TritonDataCenter/node-sshpk@v1.13.1...v1.16.1)

* fix(overflow-menu): rollback ul changes

* fix(tooltip): set width to content max (carbon-design-system#2923)

* chore(deps): bump safer-eval (carbon-design-system#2930)

Bumps [safer-eval](https://github.com/commenthol/safer-eval) from 1.2.3 to 1.3.3.
- [Release notes](https://github.com/commenthol/safer-eval/releases)
- [Commits](commenthol/safer-eval@v1.2.3...v1.3.3)

Signed-off-by: dependabot[bot] <support@github.com>

* chore(deps): bump safer-eval in /packages/colors/examples/preview (carbon-design-system#2931)

Bumps [safer-eval](https://github.com/commenthol/safer-eval) from 1.2.3 to 1.3.3.
- [Release notes](https://github.com/commenthol/safer-eval/releases)
- [Commits](commenthol/safer-eval@v1.2.3...v1.3.3)

Signed-off-by: dependabot[bot] <support@github.com>

* fix(button): require iconDescription for icon-only (carbon-design-system#2929)

* fix(Button): require iconDescription for icon-only

Fixes carbon-design-system#2884.

* chore(test): update snapshots

* fix(overflow-menu): update snapshots

* Revert "fix(overflow-menu): update snapshots"

This reverts commit 1015db6.

* fix(overflow-menu): update snapshots

* `Revert "fix(overflow-menu): update snapshots"

This reverts commit 6fe35a6.

* fix(overflow-menu): update snapshots

* chore(react): remove redundant version field
emyarod pushed a commit to emyarod/carbon that referenced this issue Jun 18, 2019
@harpality @emyarod
fix(overflow-menu): update aria-label and roles, made ul a sibling (c…
d515df5 
…arbon-design-system#2906)

* fix(overflow-menu): updated aria-label and roles, made ul a sibling

* fix(overflow-menu): removing unused var

* fix(overflow-menu): update snapshots

* chore(project): use yarn policies to set version to 1.16.0 (carbon-design-system#2902)

* chore(project): use yarn policies to set version to 1.16.0

* chore(project): update prettier to ignore .yarn folder

* fix(modal): support different numbers of buttons (carbon-design-system#2900)

Fixes carbon-design-system#2325.

* chore(examples): build examples based on whitelist (carbon-design-system#2903)

* chore(release): v10.3.0-rc.2 (carbon-design-system#2908)

* fix(overflow-menu): update defaultprops for Menu

* fix(overflow-menu): removed add'l this.props

* fix(overflow-menu): update snapshots

* fix(radio-button): group-level label/button alignment (carbon-design-system#2914)

Fixes carbon-design-system#2286.

* Fix sass error (carbon-design-system#2905)

* chore(deps): bump sshpk in /packages/react/examples/create-react-app (carbon-design-system#2915)

Bumps [sshpk](https://github.com/joyent/node-sshpk) from 1.13.1 to 1.16.1.
- [Release notes](https://github.com/joyent/node-sshpk/releases)
- [Commits](TritonDataCenter/node-sshpk@v1.13.1...v1.16.1)

* fix(overflow-menu): rollback ul changes

* fix(tooltip): set width to content max (carbon-design-system#2923)

* chore(deps): bump safer-eval (carbon-design-system#2930)

Bumps [safer-eval](https://github.com/commenthol/safer-eval) from 1.2.3 to 1.3.3.
- [Release notes](https://github.com/commenthol/safer-eval/releases)
- [Commits](commenthol/safer-eval@v1.2.3...v1.3.3)

Signed-off-by: dependabot[bot] <support@github.com>

* chore(deps): bump safer-eval in /packages/colors/examples/preview (carbon-design-system#2931)

Bumps [safer-eval](https://github.com/commenthol/safer-eval) from 1.2.3 to 1.3.3.
- [Release notes](https://github.com/commenthol/safer-eval/releases)
- [Commits](commenthol/safer-eval@v1.2.3...v1.3.3)

Signed-off-by: dependabot[bot] <support@github.com>

* fix(button): require iconDescription for icon-only (carbon-design-system#2929)

* fix(Button): require iconDescription for icon-only

Fixes carbon-design-system#2884.

* chore(test): update snapshots

* fix(overflow-menu): update snapshots

* Revert "fix(overflow-menu): update snapshots"

This reverts commit 1015db6.

* fix(overflow-menu): update snapshots

* `Revert "fix(overflow-menu): update snapshots"

This reverts commit 6fe35a6.

* fix(overflow-menu): update snapshots

* chore(react): remove redundant version field
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(modal): support different numbers of buttons asudoh/carbon-components
5 participants
@asudoh @elizabethsjudd @aagonzales @shixiedesign @dakahn