[ToggleButtons] Add toggle buttons #10144

phallguy · 2018-02-02T17:04:34Z

Adding support for toggle buttons.

phallguy · 2018-02-02T17:09:01Z

This is still WIP but wanted to give y'all a chance to make some early comments. Still need to flesh out the docs and specs.

I have a much better appreciation for how hard it is to build 'on spec'. So much of the spec is left undefined and open to interpretation. I tried to follow general style and spacing guidelines I've seen in the other components in the spec but this one specifically does not have redlines or text opacity guidelines.

Right now the behavior is completely controlled - it is incumbent on the developer to manage the selected state of both the buttons and the group. I want to add 'auto' support on the group to show selected if any of the child buttons are selected as well as manage an aggregate onChange event where the toggle group would manage the state of the child buttons. Before pursuing that route though I wanted to check if that would fit with the design guidelines for the project.

Love any feedback anyone would like to offer before I make this ready for production.

oliviertassinari · 2018-02-03T11:48:28Z

@phallguy Thank you for working on it! I will find some time to look at it. @mbrookes Raised a good point. It's now more important than ever to push the lab repository story forward to host components like this one—#9673.

caub · 2018-02-04T00:31:00Z

docs/src/pages/demos/buttons/ToggleButtonsControlledState.js

+    return (
+      <div className={ classes.toggleContainer }>
+        <ToggleButtonGroup selected={ alignment.length > 0 }>
+          <ToggleButtonWithValue value="left" values={ alignment } onClick={ this.handleToggleAlignment }><FormatAlignLeft /></ToggleButtonWithValue>


jsx attributes shouldn't be spaced: prop={value} I don't think it'll pass npm run lint like so (try to have your editor format/eslint --fix on save)

Thanks for the note. This is currently WIP. I'll be sure to lint everything when it's totally ready. (normally have editor do it automatically but haven't set it up for this project).

phallguy · 2018-02-07T04:15:44Z

src/ToggleButton/ToggleButtonGroup.js

+
+      return React.cloneElement(child, {
+        selected,
+        onChange: exclusive ? this.handleExclusiveChange : this.handleChange,


In this implementation the signature for the call to onChange changes slightly based on the exclusive prop. When exclusive onChange is called with a single value and when false it is called with an array of values. I don't have a really strong opinion on best approach. The adaptive implementation is really convenient for consumers of the component but the variable signature might have surprising results later. Happy to entertain other perspectives.

oliviertassinari · 2018-02-14T21:23:27Z

@phallguy Hey, thank you for this pull-request! I'm sorry I haven't provided a feedback earlier. I'm focusing on addressing the last issues before releasing v1. Reviewing this pull and merging can sensibly delay v1. I won't make it a priority until we ship v1.

mbrookes · 2018-02-14T21:30:02Z

@phallguy We'll have a new home once this gets merged: #10288.

phallguy · 2018-02-14T23:35:59Z

Sounds good. Looking forward to the 1.0 ship!

mbrookes · 2018-03-10T14:42:58Z

@phallguy The lab package is up and running (packages/material-ui/lab). You could move ToggleButtons there.

mbrookes · 2018-03-26T12:46:51Z

@phallguy How goes it? 👋 Just checking in to see if you're still working on this, or need any help moving it to the lab package?

phallguy · 2018-03-26T19:02:47Z

Thanks for your patience. Been distracted with some other work. I haven't spent any time looking into moving into the lab. Is there any resource or guides available for submitting to the lab?

mbrookes · 2018-03-26T21:28:46Z

@phallguy No worries, just checking in, no rush at alI.

I need to write that up, but basically it's exactly the same as for the main package, except the files go in the packages/material-ui-lab/src directory. We've also adopted the flat directory structure that v1-beta will move to. The demos go in a subdirectory of docs/pages/lab.

You could look at the Slider PR to get an idea of the structure:

phallguy · 2018-03-26T21:35:38Z

Ok seems easy enough. I'll try and grab some time this week.

mbrookes · 2018-07-04T02:35:29Z

@phallguy My sincere apologies that it has taken so long to merge this. I had allowed time for @oliviertassinari to review the PR, but he has been tied up with support, bug fixes, and performance enhancements for core components, both before and since releasing v1, so hasn't had the opportunity, so I'm going to merge it, and take the responsibility for anything I've overlooked.

Thanks for your hard work pulling this together!

phallguy · 2018-07-04T02:43:09Z

No worries I really appreciate all the work you guys have done. Ping me if you need help cleaning anything up. Glad to help.

mbrookes · 2018-07-05T23:06:32Z

@phallguy We keep forgetting to ask people, but would you be interested in any MUI logo stickers as a small token of appreciation?

phallguy · 2018-07-06T17:09:19Z

Yeah that'd be pretty cool.

mbrookes · 2018-07-06T17:31:02Z

Cool. Ping me a note on gitter with your address and how many you'd like.

phallguy mentioned this pull request Feb 2, 2018

IconButton: Recommended approach to showing toggle state #9941

Closed

1 task

mbrookes added the [ToggleButton] label Feb 2, 2018

oliviertassinari added the package: lab Specific to @mui/lab label Feb 3, 2018

caub reviewed Feb 4, 2018

View reviewed changes

phallguy force-pushed the phallguy/toggle-buttons branch 5 times, most recently from ac1096c to 94a1688 Compare February 7, 2018 04:11

phallguy commented Feb 7, 2018

View reviewed changes

phallguy changed the title ~~[ToggleButtons]: Add toggle buttons (WIP)~~ [ToggleButtons]: Add toggle buttons Feb 7, 2018

phallguy force-pushed the phallguy/toggle-buttons branch 2 times, most recently from 63a3aca to 27d2f3f Compare February 7, 2018 04:39

oliviertassinari added this to the post v1 milestone Feb 11, 2018

phallguy force-pushed the phallguy/toggle-buttons branch 2 times, most recently from a3b8fb9 to b8c9f1d Compare April 25, 2018 15:17

This comment has been minimized.

Sign in to view

oliviertassinari mentioned this pull request Apr 26, 2018

[lab] Fix the tests #11160

Merged

phallguy force-pushed the phallguy/toggle-buttons branch from b8c9f1d to 636dbfb Compare April 29, 2018 20:28

oliviertassinari changed the base branch from v1-beta to master May 12, 2018 18:20

Paul Alexander added 12 commits July 4, 2018 01:20

Moved to /lab folders

f999e71

Toggle button specs

05a5b8f

Run yarn docs:api:lab

e4486c5

yarn prettier

31592ef

sorting props

8e674e7

Fix strict equality

3dca2ff

Wrapping up tests

3990a9f

Rebase to master

7e20ca6

Cleanup tests after rebase

ff3f41b

Rebuild API docs

9c3a5a6

Bump docs allowed size limit

bee7aaf

Fixup icon imports

919213b

mbrookes force-pushed the phallguy/toggle-buttons branch from 84d3f38 to 2fa762f Compare July 4, 2018 00:47

Update docs for new requirements

b02145d

mbrookes force-pushed the phallguy/toggle-buttons branch from 2fa762f to b02145d Compare July 4, 2018 01:15

mbrookes merged commit 263b428 into mui:master Jul 4, 2018

phallguy deleted the phallguy/toggle-buttons branch July 4, 2018 02:43

acroyear pushed a commit to acroyear/material-ui that referenced this pull request Jul 14, 2018

[ToggleButtons]: Add toggle buttons (mui#10144)

b6959a6

oliviertassinari changed the title ~~[ToggleButtons]: Add toggle buttons~~ [ToggleButtons] Add toggle buttons Jul 14, 2018

snyk-bot mentioned this pull request Sep 30, 2019

[Snyk] Upgrade @material-ui/core from 1.0.0 to 1.5.1 Matthelonianxl/nifty-wallet#7

Open

This was referenced Mar 26, 2020

[Snyk] Upgrade @material-ui/core from 1.0.0 to 1.5.1 AndreiShybin/metamask-extension#9

Merged

[Snyk] Upgrade @material-ui/core from 1.0.0 to 1.5.1 baophucct/metamask-extension#5

Open

oliviertassinari added component: toggle button This is the name of the generic UI component, not the React module! new feature New feature or request and removed package: lab Specific to @mui/lab labels Jan 9, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ToggleButtons] Add toggle buttons #10144

[ToggleButtons] Add toggle buttons #10144

phallguy commented Feb 2, 2018 •

edited

Loading

phallguy commented Feb 2, 2018

oliviertassinari commented Feb 3, 2018

caub Feb 4, 2018 •

edited

Loading

phallguy Feb 5, 2018

phallguy Feb 7, 2018

oliviertassinari commented Feb 14, 2018

mbrookes commented Feb 14, 2018

phallguy commented Feb 14, 2018

mbrookes commented Mar 10, 2018

mbrookes commented Mar 26, 2018

phallguy commented Mar 26, 2018

mbrookes commented Mar 26, 2018

phallguy commented Mar 26, 2018

This comment has been minimized.

mbrookes commented Jul 4, 2018 •

edited

Loading

phallguy commented Jul 4, 2018

mbrookes commented Jul 5, 2018

phallguy commented Jul 6, 2018

mbrookes commented Jul 6, 2018

[ToggleButtons] Add toggle buttons #10144

[ToggleButtons] Add toggle buttons #10144

Conversation

phallguy commented Feb 2, 2018 • edited Loading

phallguy commented Feb 2, 2018

oliviertassinari commented Feb 3, 2018

caub Feb 4, 2018 • edited Loading

Choose a reason for hiding this comment

phallguy Feb 5, 2018

Choose a reason for hiding this comment

phallguy Feb 7, 2018

Choose a reason for hiding this comment

oliviertassinari commented Feb 14, 2018

mbrookes commented Feb 14, 2018

phallguy commented Feb 14, 2018

mbrookes commented Mar 10, 2018

mbrookes commented Mar 26, 2018

phallguy commented Mar 26, 2018

mbrookes commented Mar 26, 2018

phallguy commented Mar 26, 2018

This comment has been minimized.

mbrookes commented Jul 4, 2018 • edited Loading

phallguy commented Jul 4, 2018

mbrookes commented Jul 5, 2018

phallguy commented Jul 6, 2018

mbrookes commented Jul 6, 2018

phallguy commented Feb 2, 2018 •

edited

Loading

caub Feb 4, 2018 •

edited

Loading

mbrookes commented Jul 4, 2018 •

edited

Loading