From 72fd509c523f92745ede7fe2bda64d3887ce8a42 Mon Sep 17 00:00:00 2001
From: Marcos Conceicao <marcos.conceicao@catho.com>
Date: Thu, 12 Dec 2024 16:14:56 -0300
Subject: [PATCH] fix(RadioGroup.jsx): Inline prop arranges elements
 horizontally

---
 components/RadioGroup/Radio.jsx               |  19 +-
 .../RadioGroup/RadioGroup.unit.test.jsx       |  13 ++
 .../RadioGroup.unit.test.jsx.snap             | 162 ++++++++++++++++++
 stories/RadioGroup/RadioGroup.stories.jsx     |   2 +-
 4 files changed, 194 insertions(+), 2 deletions(-)

diff --git a/components/RadioGroup/Radio.jsx b/components/RadioGroup/Radio.jsx
index d846e1e0f..3e3a8396a 100644
--- a/components/RadioGroup/Radio.jsx
+++ b/components/RadioGroup/Radio.jsx
@@ -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} {
@@ -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}
@@ -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,
diff --git a/components/RadioGroup/RadioGroup.unit.test.jsx b/components/RadioGroup/RadioGroup.unit.test.jsx
index 6824f12b1..69be540e8 100644
--- a/components/RadioGroup/RadioGroup.unit.test.jsx
+++ b/components/RadioGroup/RadioGroup.unit.test.jsx
@@ -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);
diff --git a/components/RadioGroup/__snapshots__/RadioGroup.unit.test.jsx.snap b/components/RadioGroup/__snapshots__/RadioGroup.unit.test.jsx.snap
index 46c3b753d..87ef34aa1 100644
--- a/components/RadioGroup/__snapshots__/RadioGroup.unit.test.jsx.snap
+++ b/components/RadioGroup/__snapshots__/RadioGroup.unit.test.jsx.snap
@@ -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;
diff --git a/stories/RadioGroup/RadioGroup.stories.jsx b/stories/RadioGroup/RadioGroup.stories.jsx
index b11ec84f0..173f91615 100644
--- a/stories/RadioGroup/RadioGroup.stories.jsx
+++ b/stories/RadioGroup/RadioGroup.stories.jsx
@@ -59,6 +59,6 @@ Button.args = {
 
 export const Inline = Template.bind({});
 Inline.args = {
-  ...Button.args,
+  options: buttonOptions,
   inline: true,
 };