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

kacheshmarova · web-flow · commit 6de163884360 · 2025-11-26T16:27:12.000+02:00
fix(checkbox, radio, switch): add gap for wrapper on sample level
diff --git a/samples/inputs/checkbox/label/index.html b/samples/inputs/checkbox/label/index.html
@@ -15,6 +15,7 @@
 <body>
   <div id="root">
     <div class="container sample center">
+      <igc-checkbox label-position="before">Label</igc-checkbox>
       <div class="wrapper">
         <span id="checkbox-label">Label</span>
         <igc-checkbox aria-labelledby="checkbox-label" label-position="before"></igc-checkbox>
diff --git a/samples/inputs/checkbox/label/src/CheckboxLabelStyles.css b/samples/inputs/checkbox/label/src/CheckboxLabelStyles.css
@@ -1,4 +1,5 @@
 .wrapper {
     display: flex;
     align-items: center;
+    gap: 0.5rem;
 }
diff --git a/samples/inputs/radio/label/index.html b/samples/inputs/radio/label/index.html
@@ -33,8 +33,8 @@
         <div style="width: 400px; border: 1px solid gainsboro">
           <igc-radio-group>
             <igc-radio name="fruit" label-position="before" value="apple">Apple</igc-radio>
-            <div style="display: flex; align-items: center">
-              <span id="radio-label">Label</span>
+            <div class="wrapper">
+              <span id="radio-label">Orange</span>
               <igc-radio
                 name="fruit"
                 label-position="before"
diff --git a/samples/inputs/radio/label/src/RadioLabelStyles.css b/samples/inputs/radio/label/src/RadioLabelStyles.css
@@ -0,0 +1,5 @@
+.wrapper {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
diff --git a/samples/inputs/radio/label/src/index.ts b/samples/inputs/radio/label/src/index.ts
@@ -1,5 +1,6 @@
 import {defineComponents, IgcRadioComponent, IgcRadioGroupComponent } from 'igniteui-webcomponents';
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
+import './RadioLabelStyles.css'
 
 defineComponents(IgcRadioComponent, IgcRadioGroupComponent);
 export class RadioLabel {
diff --git a/samples/inputs/switches/label/index.html b/samples/inputs/switches/label/index.html
@@ -15,6 +15,7 @@
 <body>
   <div id="root">
     <div class="container sample center">
+      <igc-switch label-position="before">Label</igc-switch>
       <div class="wrapper">
         <span id="switch-label">Label</span>
         <igc-switch aria-labelledby="switch-label" label-position="before"></igc-switch>
diff --git a/samples/inputs/switches/label/src/SwitchLabelStyles.css b/samples/inputs/switches/label/src/SwitchLabelStyles.css
@@ -1,4 +1,5 @@
 .wrapper {
     display: flex;
     align-items: center;
+    gap: 0.5rem;
 }

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`.wrapper {`
`2`	`2`	`display: flex;`
`3`	`3`	`align-items: center;`
	`4`	`+ gap: 0.5rem;`
`4`	`5`	`}`