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

[docs] Improve settings toggle button styling #23754

Merged
merged 5 commits into from
Nov 30, 2020
Merged

[docs] Improve settings toggle button styling #23754

Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3414659
[docs] Improve settings toggle button styling
mbrookes Nov 28, 2020
49d11a8
prettier
mbrookes Nov 28, 2020
c8d9a42
lint
mbrookes Nov 28, 2020
f6fe445
Add hover opacity
mbrookes Nov 28, 2020
626bbc7
make hover bacbground color same as active
mbrookes Nov 29, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions docs/src/modules/components/AppSettingsDrawer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,9 @@ const styles = (theme) => ({
'&$toggleButtonSelected': {
color: `${theme.palette.primary.main}`,
backgroundColor: `${alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)}`,
'&:hover': {
backgroundColor: `${alpha(theme.palette.primary.main, 0.12)}`,
Copy link
Member

Choose a reason for hiding this comment

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

See https://github.com/mui-org/material-ui/blob/6f56be2a07185be06984476aed9f518cbbd6b87d/packages/material-ui-lab/src/TreeItem/TreeItem.js#L50-L58 for a good approach, I think that we miss the hover none and the design tokens for the alpha value.

Copy link
Member Author

@mbrookes mbrookes Nov 29, 2020 •
edited
Loading

Choose a reason for hiding this comment

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

theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity

Ah, I didn't think of summing them. 👍

By comparison, an active list item doesn't change shade when hovered.

Perhaps there should be a distinction between a toggle button that can be deselected (changes shade when hovered), and one that can't (doesn't change shade when hovered)?

Copy link
Member

@oliviertassinari oliviertassinari Nov 29, 2020 •
edited by mbrookes
Loading

Choose a reason for hiding this comment

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

By comparison, an active list item doesn't change shade when hovered.

It seems to do in my case: https://next.material-ui.com/components/lists/#selected-listitem. We marked it as handled in #10870.

Perhaps there should be a distinction between a toggle button that can be deselected (changes shade when hovered), and one that can't (doesn't change shade when hovered)?

Why not. This new design makes me think about https://ant.design/components/radio/#Radio/Radio.Button

},
},
},
toggleButtonSelected: {},
Expand Down