Skip to content

fix: Making the hidden input on Radio only cover the indicator and not also the label #25025

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

Merged
khmakoto merged 5 commits into from
Sep 30, 2022
Merged

fix: Making the hidden input on Radio only cover the indicator and not also the label #25025

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6864c8e
fix: Making the hidden input on Radio only cover the indicator and no…
Sep 29, 2022
f4d5702
Updating to latest patterns.
Sep 29, 2022
8e00741
Adding change file.
Sep 29, 2022
e04f711
Addressing PR feedback
Sep 29, 2022
d7708a2
Addressing PR feedback.
Sep 29, 2022
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
7 changes: 7 additions & 0 deletions change/@fluentui-react-radio-8d11e9d2-7b87-4a02-bbc2-7b443528252a.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "fix: Making the hidden input only cover the indicator and not also the label.",
"packageName": "@fluentui/react-radio",
"email": "humberto_makoto@hotmail.com",
"dependentChangeType": "patch"
}
30 changes: 24 additions & 6 deletions packages/react-components/react-radio/src/components/Radio/useRadioStyles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ const useRootStyles = makeStyles({
base: {
display: 'inline-flex',
position: 'relative',
...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),
},

vertical: {
Expand Down Expand Up @@ -116,6 +115,15 @@ const useInputStyles = makeStyles({
},
},
},

after: {
height: '100%',
width: `calc(${indicatorSize} + 2 * ${tokens.spacingHorizontalS})`,
},
below: {
height: `calc(${indicatorSize} + ${tokens.spacingVerticalS})`,
Comment thread
khmakoto marked this conversation as resolved.
Outdated
width: '100%',
},
Comment thread
khmakoto marked this conversation as resolved.
});

const useIndicatorStyles = makeStyles({
Expand All @@ -133,6 +141,7 @@ const useIndicatorStyles = makeStyles({

...shorthands.border(tokens.strokeWidthThin, 'solid'),
...shorthands.borderRadius(tokens.borderRadiusCircular),
...shorthands.margin(tokens.spacingVerticalS, tokens.spacingHorizontalS),
fill: 'currentColor',
pointerEvents: 'none',
},
Expand All @@ -141,10 +150,12 @@ const useIndicatorStyles = makeStyles({
const useLabelStyles = makeStyles({
base: {
alignSelf: 'center',

...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),
},

after: {
marginLeft: tokens.spacingHorizontalM,
paddingLeft: tokens.spacingHorizontalXS,

// Use a (negative) margin to account for the difference between the indicator's height and the label's line height.
// This prevents the label from expanding the height of the Radio, but preserves line height if the label wraps.
Expand All @@ -153,7 +164,7 @@ const useLabelStyles = makeStyles({
},

below: {
marginTop: tokens.spacingVerticalM,
paddingTop: tokens.spacingVerticalXS,
textAlign: 'center',
},
});
Expand All @@ -162,17 +173,24 @@ const useLabelStyles = makeStyles({
* Apply styling to the Radio slots based on the state
*/
export const useRadioStyles_unstable = (state: RadioState) => {
const { label, labelPosition } = state;
Comment thread
khmakoto marked this conversation as resolved.
Outdated

const rootStyles = useRootStyles();
state.root.className = mergeClasses(
radioClassNames.root,
rootStyles.base,
rootStyles.focusIndicator,
state.labelPosition === 'below' && rootStyles.vertical,
labelPosition === 'below' && rootStyles.vertical,
state.root.className,
);

const inputStyles = useInputStyles();
state.input.className = mergeClasses(radioClassNames.input, inputStyles.base, state.input.className);
state.input.className = mergeClasses(
radioClassNames.input,
inputStyles.base,
inputStyles[labelPosition],
state.input.className,
);

const indicatorStyles = useIndicatorStyles();
state.indicator.className = mergeClasses(radioClassNames.indicator, indicatorStyles.base, state.indicator.className);
Expand All @@ -182,7 +200,7 @@ export const useRadioStyles_unstable = (state: RadioState) => {
state.label.className = mergeClasses(
radioClassNames.label,
labelStyles.base,
labelStyles[state.labelPosition],
labelStyles[labelPosition],
state.label.className,
);
}
Expand Down