Merge pull request #967 from IgniteUI/bpachilova/label-position-before-fix

fix(checkbox, radio, switch): add gap for wrapper on sample level

Author: kacheshmarova

samples/inputs/checkbox/label/src/CheckboxLabelStyles.css

@@ -1,4 +1,5 @@
 .wrapper {
     display: flex;
     align-items: center;
+    gap: 0.5rem;
 }

samples/inputs/checkbox/label/src/index.tsx

@@ -14,6 +14,7 @@ export default class CheckboxLabel extends React.Component<any, any> {
     public render(): JSX.Element {
         return (
             <div className="sample">
+                <IgrCheckbox labelPosition="before">Label</IgrCheckbox>
                 <div className="wrapper">
                     <span id="checkbox-label">Label</span>
                     <IgrCheckbox aria-labelledby="checkbox-label" labelPosition="before"></IgrCheckbox>

samples/inputs/radio/label/src/RadioLabelStyles.css

@@ -0,0 +1,5 @@
+.wrapper {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}

samples/inputs/radio/label/src/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
+import './RadioLabelStyles.css';
 import { IgrRadio, IgrRadioGroup } from 'igniteui-react';
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
@@ -16,8 +17,8 @@ export default class RadioLabel extends React.Component<any, any> {
                 <div className="container" style={{width: "430px", height:"60px", border: "1px solid gainsboro"}}>
                     <IgrRadioGroup alignment="vertical">
                         <IgrRadio name="fruit" value="apple" labelPosition="before"><span>Apple</span></IgrRadio>
-                        <div style={{display: "flex", alignItems: "center"}}>
-                        <span id="radio-label">Label</span>
+                        <div className="wrapper">
+                        <span id="radio-label">Orange</span>
                         <IgrRadio
                             name="fruit"
                             labelPosition="before"

samples/inputs/switches/label/src/SwitchLabelStyles.css

@@ -0,0 +1,5 @@
+.wrapper {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}

samples/inputs/switches/label/src/index.tsx

@@ -1,14 +1,18 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
+import './SwitchLabelStyles.css';
 import { IgrSwitch } from 'igniteui-react';
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
 export default function SwitchLabel() {
 
     return (
         <div className="sample">
-            <IgrSwitch aria-labelledby="switchLabel" labelPosition="before"><span id="switch-label">Label</span></IgrSwitch>
+            <IgrSwitch labelPosition="before">Label</IgrSwitch>
+            <div className="wrapper">
+                <IgrSwitch aria-labelledby="switchLabel" labelPosition="before"><span id="switch-label">Label</span></IgrSwitch>
+            </div>
         </div>
     );
 }