material-components / material-components-android

Modular and customizable Material Design UI components for Android
Apache License 2.0
16.36k stars 3.07k forks source link

[RadioButton] Update RadioButton docs to have m3 screenshots #4282

Closed nikclayton closed 1 month ago

nikclayton commented 1 month ago

Description: Radiobuttons have inconsistent spacing between the drawable and the text, depending on where they're used.

This is visible in the screenshots in the repository.

This is the first screenshot from https://github.com/material-components/material-components-android/blob/master/docs/components/RadioButton.md

radiobutton_hero

Observe the wide space between the drawable and the text.

This is the second screenshot in the same document:

radiobutton_example

The screenshots for radio buttons in the M3 radio button guidelines (https://m3.material.io/components/radio-button/guidelines) show them with spacing more like the first screenshot than the second. For example,

l7kqp7hw- 1P  Alternate selection controls

Expected behavior: The spacing between the drawable and the radio button text should not depend on where the radio button is used, and should follow the M3 guidelines.

Source code: The example layout in https://github.com/material-components/material-components-android/blob/master/docs/components/RadioButton.md#radio-buttons-example.

Android API version: 14

Material Library version: 1.12

Device: Pixel 4a 5G

imhappi commented 1 month ago

Hi @nikclayton ! The first screenshot on https://github.com/material-components/material-components-android/blob/master/docs/components/RadioButton.md is old and is using M2 mocks, we will update that to the m3 mocks

There are no m3 specs specified for what the spacing in between the button and the text should be, will clarify with design, but in the meanwhile I'll update our catalog (and subsequently the doc screenshots) to have some space in between to more closely match with the m3 mocks

However do keep in mind that these paddings will not be specified in the Material Theme, and users should add their own padding if they desire