[Joy] Miscellaneous fixes #33750

siriwatknp · 2022-08-02T04:35:16Z

Found styling issues and improvements from building [Experiment] Add Joy variant studio #33680
Add more demos and examples

I have followed (at least) the PR section of the contributing guide.

mui-bot · 2022-08-02T04:37:57Z

Details of bundle changes

@mui/joy: parsed: +0.73% , gzip: +0.25%

Generated by 🚫 dangerJS against 8dd6ab7

danilo-leal

Great changes! Just a few copywriting tweaks.

danilo-leal · 2022-08-02T05:26:10Z

docs/data/joy/components/button/button.md

@@ -93,3 +93,9 @@ Since links are the most appropriate component for navigating through pages, tha
 Doing so will automatically change the rendered HTML tag from `<button>` to `<a>`.

 {{"demo": "ButtonLink.js"}}
+
+## CSS Variables
+


Suggested change

Play around with all the CSS variables available in the slider component to see how the design changes.

You can use those to customize the component on both the `sx` prop and the theme.

Just so we have consistent pages throughout!

danilo-leal · 2022-08-02T05:26:17Z

docs/data/joy/components/list/list.md

@@ -77,6 +77,10 @@ The `ListDivider` component comes with four `inset` patterns:

 {{"demo": "DividedList.js"}}

+For horizontal list, only `inset="gutter"` works on list divider.


Suggested change

For horizontal list, only `inset="gutter"` works on list divider.

When in a horizontal list, the only available pattern for the divider is `inset="gutter"`.

danilo-leal · 2022-08-02T05:26:23Z

docs/data/joy/components/radio/radio.md

@@ -117,9 +117,15 @@ Visit the [WAI-ARIA documentation](https://www.w3.org/WAI/ARIA/apg/patterns/radi

 ## Common examples

+### Alignment buttons
+
+Simply provide an icon as a label to the `Radio` to make the radio buttons concise. You need to provide `aria-label` to the input slot for users who rely on screen readers.


Suggested change

Simply provide an icon as a label to the `Radio` to make the radio buttons concise. You need to provide `aria-label` to the input slot for users who rely on screen readers.

For this example, we're using an icon as a label making the `Radio` component concise.

Note that we're also using a meaningful `aria-label` on the input slot, ensuring proper accessibility.

danilo-leal · 2022-08-02T05:26:26Z

docs/data/joy/components/radio/radio.md

 ### Payment methods

-Mix raddio buttons with the [`List`](/joy-ui/react-list/)-related components to create a commonly seen vertical or horizontal payment method list.
+Mix radio buttons with the [`List`](/joy-ui/react-list/)-related components to create a commonly seen vertical or horizontal payment method list.


Suggested change

Mix radio buttons with the [`List`](/joy-ui/react-list/)-related components to create a commonly seen vertical or horizontal payment method list.

In this example, we mixed radio buttons with [`List`](/joy-ui/react-list/)-related components to create a vertical or horizontal radio button list, commonly seen in payment method sort of forms.

danilo-leal · 2022-08-02T05:26:34Z

docs/data/joy/components/slider/slider.md

@@ -47,6 +47,12 @@ To make the thumb label always visible, toggle on the `valueLabelDisplay` prop.

 {{"demo": "AlwaysVisibleLabelSlider.js"}}

+### Vertical
+
+Set `orientation="vertical"` to display the vertical slider.


Suggested change

Set `orientation="vertical"` to display the vertical slider.

To display the slider vertically, use the `orientation` prop with `vertical` as the value.

siriwatknp added 26 commits August 1, 2022 13:16

fix dom mismatch

8d0baf2

add inset gutter to ListDivider for horizontal list

7d2f80b

make IconButton icon scalable

06effd8

add default color to Radio and Checkbox

8b39edb

add viewport demo

f977c3a

switch track should not shrink

da11a0d

add vertical slider demo

1c9a0b7

revert

21a45dd

fix select bg

bf23e73

don't add negative margin for nested typography

477bb02

fix componentsProps input component

41bdd9c

add group demo

054df09

add stickyTop variable to ListItem

2919a34

add MenuListGroup demo

c844615

move logic to ListProvider

a726adf

add display none to TabPanel

cac3283

gap follows orientation

aedcf5c

inherit size

06c28f7

remove scoped prop

51587ce

use context to inherit size

0a02b06

update demo

870ce15

reset variables in scope

21b2bc8

fix demo

6cc6f0c

fix proptype

6e45d38

add radio example

c64ce94

fix radio usage

7b44aa9

siriwatknp added the package: joy-ui Specific to @mui/joy label Aug 2, 2022

siriwatknp added 2 commits August 2, 2022 11:46

fix lint

b6ffb34

fix demos

8dd6ab7

siriwatknp merged commit cac7c8b into mui:master Aug 2, 2022

danilo-leal reviewed Aug 2, 2022

View reviewed changes

cherewaty mentioned this pull request Aug 10, 2022

[IconButton][Joy] Fix large IconButton scaling #33885

Merged

1 task

daniel-rabe pushed a commit to daniel-rabe/material-ui that referenced this pull request Nov 29, 2022

[Joy] Miscellaneous fixes (mui#33750)

118ab7b

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Joy] Miscellaneous fixes #33750

[Joy] Miscellaneous fixes #33750

siriwatknp commented Aug 2, 2022 •

edited

Loading

mui-bot commented Aug 2, 2022 •

edited

Loading

danilo-leal left a comment

danilo-leal Aug 2, 2022

danilo-leal Aug 2, 2022

danilo-leal Aug 2, 2022

danilo-leal Aug 2, 2022

danilo-leal Aug 2, 2022



	Play around with all the CSS variables available in the slider component to see how the design changes.

	You can use those to customize the component on both the `sx` prop and the theme.

		@@ -77,6 +77,10 @@ The `ListDivider` component comes with four `inset` patterns:

		{{"demo": "DividedList.js"}}

		For horizontal list, only `inset="gutter"` works on list divider.

	For horizontal list, only `inset="gutter"` works on list divider.
	When in a horizontal list, the only available pattern for the divider is `inset="gutter"`.

	Simply provide an icon as a label to the `Radio` to make the radio buttons concise. You need to provide `aria-label` to the input slot for users who rely on screen readers.
	For this example, we're using an icon as a label making the `Radio` component concise.
	Note that we're also using a meaningful `aria-label` on the input slot, ensuring proper accessibility.

	Mix radio buttons with the [`List`](/joy-ui/react-list/)-related components to create a commonly seen vertical or horizontal payment method list.
	In this example, we mixed radio buttons with [`List`](/joy-ui/react-list/)-related components to create a vertical or horizontal radio button list, commonly seen in payment method sort of forms.

	Set `orientation="vertical"` to display the vertical slider.
	To display the slider vertically, use the `orientation` prop with `vertical` as the value.

[Joy] Miscellaneous fixes #33750

[Joy] Miscellaneous fixes #33750

Conversation

siriwatknp commented Aug 2, 2022 • edited Loading

mui-bot commented Aug 2, 2022 • edited Loading

danilo-leal left a comment

Choose a reason for hiding this comment

danilo-leal Aug 2, 2022

Choose a reason for hiding this comment

danilo-leal Aug 2, 2022

Choose a reason for hiding this comment

danilo-leal Aug 2, 2022

Choose a reason for hiding this comment

danilo-leal Aug 2, 2022

Choose a reason for hiding this comment

danilo-leal Aug 2, 2022

Choose a reason for hiding this comment

siriwatknp commented Aug 2, 2022 •

edited

Loading

mui-bot commented Aug 2, 2022 •

edited

Loading