Wrapping Radio Group in ChartSettings (#22264)

* Adding Wrap to Radio Groups in ChartSettings

frontend/src/metabase/core/components/Radio/Radio.tsx

@@ -17,7 +17,6 @@ import {
   RadioLabelBubble,
   RadioLabelNormal,
   RadioLabelText,
-  RadioGroup,
   RadioGroupBubble,
   RadioGroupNormal,
 } from "./Radio.styled";
@@ -223,5 +222,11 @@ function isDefaultOption<TValue>(
 }
 
 export default Object.assign(Radio, {
-  RadioGroup,
+  RadioGroupVariants: [RadioGroupBubble, RadioGroupNormal],
+  RadioLabelVariants: [RadioLabelBubble, RadioLabelNormal, RadioLabelText],
+  RadioContainerVariants: [
+    RadioContainerBubble,
+    RadioContainerNormal,
+    RadioContainerUnderlined,
+  ],
 });

frontend/src/metabase/query_builder/components/DatasetEditor/DatasetFieldMetadataSidebar/DatasetFieldMetadataSidebar.styled.jsx

@@ -26,7 +26,7 @@ export const AnimatableContent = styled.div`
 const CONTENT_PADDING = "24px";
 
 const FormContainer = styled.div`
-  ${Radio.RadioGroup} {
+  ${Radio.RadioGroupVariants.join(", ")} {
     color: ${color("text-dark")};
   }
 

frontend/src/metabase/visualizations/components/ChartSettings.jsx

@@ -8,6 +8,7 @@ import Warnings from "metabase/query_builder/components/Warnings";
 
 import Button from "metabase/core/components/Button";
 import Radio from "metabase/core/components/Radio";
+import { SectionContainer } from "./ChartSettings.styled";
 
 import Visualization from "metabase/visualizations/components/Visualization";
 import ChartSettingsWidget from "./ChartSettingsWidget";
@@ -242,15 +243,17 @@ class ChartSettings extends Component {
     };
 
     const sectionPicker = (
-      <Radio
-        value={currentSection}
-        onChange={this.handleShowSection}
-        options={sectionNames}
-        optionNameFn={v => v}
-        optionValueFn={v => v}
-        optionKeyFn={v => v}
-        variant="bubble"
-      />
+      <SectionContainer>
+        <Radio
+          value={currentSection}
+          onChange={this.handleShowSection}
+          options={sectionNames}
+          optionNameFn={v => v}
+          optionValueFn={v => v}
+          optionKeyFn={v => v}
+          variant="bubble"
+        />
+      </SectionContainer>
     );
 
     const widgetList = visibleWidgets.map(widget => (
@@ -297,7 +300,7 @@ class ChartSettings extends Component {
           <div className="flex flex-no-shrink pl4 pt2 pb1">{sectionPicker}</div>
         )}
         {noPreview ? (
-          <div className="full-height relative scroll-y scroll-show py4">
+          <div className="full-height relative scroll-y scroll-show pt3 pb4">
             {widgetList}
           </div>
         ) : (

frontend/src/metabase/visualizations/components/ChartSettings.styled.tsx

+import styled from "@emotion/styled";
+import Radio from "metabase/core/components/Radio";
+
+export const SectionContainer = styled.div`
+  ${Radio.RadioGroupVariants.join(", ")} {
+    flex-wrap: wrap;
+  }
+
+  ${Radio.RadioContainerVariants.join(", ")} {
+    margin-bottom: 0.5rem;
+  }
+`;