Skip to content

Commit

Permalink
fix(RadioGroup.jsx): Inline prop arranges elements horizontally
Browse files Browse the repository at this point in the history
  • Loading branch information
MarcosViniciusPC committed Dec 12, 2024
1 parent 98b46f8 commit 72fd509
Show file tree
Hide file tree
Showing 4 changed files with 194 additions and 2 deletions.
19 changes: 18 additions & 1 deletion components/RadioGroup/Radio.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,21 @@ const RadioLabel = styled(Label)`
}
}
${({
inline,
theme: {
spacing: { medium },
},
}) =>
inline &&
`
display: inline-flex;
margin-right: ${medium}px;
&:last-child {
margin-right: 0;
}`}
&:hover,
&:focus {
${RadioMark} {
Expand Down Expand Up @@ -231,9 +246,10 @@ const Radio = ({
value,
theme = { colors, spacing },
required = false,
inline = false,
...rest
}) => (
<RadioLabel error={error} disabled={disabled} theme={theme}>
<RadioLabel inline={inline} error={error} disabled={disabled} theme={theme}>
<HiddenInput
type="radio"
disabled={disabled}
Expand All @@ -252,6 +268,7 @@ Radio.displayName = 'RadioGroup.Radio';
Radio.propTypes = {
disabled: PropTypes.bool,
error: PropTypes.bool,
inline: PropTypes.bool,
children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
label: PropTypes.string,
value: PropTypes.string.isRequired,
Expand Down
13 changes: 13 additions & 0 deletions components/RadioGroup/RadioGroup.unit.test.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -182,6 +182,19 @@ describe('<RadioGroup />', () => {
);
expect(container.firstChild).toMatchSnapshot();
});

it('with inline', () => {
const options = [
{ value: 'Foo', label: 'Foo' },
{ value: 'Bar', label: 'Bar' },
{ value: 'Baz', label: 'Baz' },
];

const { container } = render(
<RadioGroup inline name="foo" options={options} />,
);
expect(container.firstChild).toMatchSnapshot();
});
});

_childrenTest(RadioGroup.Radio);
Expand Down
162 changes: 162 additions & 0 deletions components/RadioGroup/__snapshots__/RadioGroup.unit.test.jsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -813,6 +813,168 @@ exports[`<RadioGroup /> snapshot with an error 1`] = `
</div>
`;
exports[`<RadioGroup /> snapshot with inline 1`] = `
.c2 {
display: block;
margin-bottom: 5px;
}
.c0 {
position: relative;
margin-bottom: 20px;
min-width: 250px;
width: 100%;
color: #424242;
}
.c5 {
border: 0;
height: 0;
margin: 0;
opacity: 0;
overflow: hidden;
padding: 0;
position: absolute;
width: 0;
}
.c7 {
border-radius: 50%;
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
height: 24px;
position: relative;
top: 6px;
width: 24px;
background-color: #ffffff;
border: 2px solid #999999;
margin-right: 8px;
}
.c7:after {
border-radius: 50%;
content: '';
display: none;
height: 60%;
left: 20%;
position: absolute;
top: 20%;
width: 60%;
background-color: #1250C4;
}
.c3 {
-webkit-align-items: baseline;
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
margin-right: 16px;
}
.c3 .c4:checked ~ .c6 {
border-color: #1250C4;
}
.c3 .c4:checked ~ .c6:after {
background-color: #1250C4;
display: block;
}
.c3 .c4:focus ~ .c6 {
border-color: #1250C4;
box-shadow: 0px 3px 5px -1px rgba(18,80,196,0.2),0px 5px 8px 0px rgba(18,80,196,0.14),0px 1px 14px 0px rgba(18,80,196,0.12);
}
.c3:last-child {
margin-right: 0;
}
.c3:hover .c6,
.c3:focus .c6 {
border-color: #1250C4;
box-shadow: 0px 3px 5px -1px rgba(18,80,196,0.2),0px 5px 8px 0px rgba(18,80,196,0.14),0px 1px 14px 0px rgba(18,80,196,0.12);
}
.c3 .c4:checked:disabled ~ .c6 {
background-color: #999999;
border-color: #999999;
box-shadow: inset 0 0 0 3.5px #ffffff;
}
.c1 {
position: relative;
}
<div
class="c0 c1"
role="radiogroup"
>
<label
class="c2 c3"
>
<input
class="c4 c5"
name="foo"
type="radio"
value="Foo"
/>
<span
class="c6 c7"
/>
<span>
Foo
</span>
</label>
<label
class="c2 c3"
>
<input
class="c4 c5"
name="foo"
type="radio"
value="Bar"
/>
<span
class="c6 c7"
/>
<span>
Bar
</span>
</label>
<label
class="c2 c3"
>
<input
class="c4 c5"
name="foo"
type="radio"
value="Baz"
/>
<span
class="c6 c7"
/>
<span>
Baz
</span>
</label>
</div>
`;
exports[`<RadioGroup /> snapshot with required 1`] = `
.c2 {
display: block;
Expand Down
2 changes: 1 addition & 1 deletion stories/RadioGroup/RadioGroup.stories.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,6 @@ Button.args = {

export const Inline = Template.bind({});
Inline.args = {
...Button.args,
options: buttonOptions,
inline: true,
};

0 comments on commit 72fd509

Please sign in to comment.