fixed few rendering issues with the checkbox demo's

Author: prabhuignoto

packages/documentation/components/checkbox-group/widgets.tsx

@@ -26,7 +26,7 @@ function Widgets() {
             language="jsx"
             componentName="CheckBoxGroup"
           >
-            <DemoWidget name="CheckBoxGroup" width={100}>
+            <DemoWidget name="CheckBoxGroup" width={300}>
               {Default}
             </DemoWidget>
           </HeaderCodeToggle.Content>
@@ -45,7 +45,7 @@ function Widgets() {
             language="jsx"
             componentName="CheckBoxGroup"
           >
-            <DemoWidget name="CheckBoxGroup" width={200}>
+            <DemoWidget name="CheckBoxGroup" width={350}>
               {PreSelected}
             </DemoWidget>
           </HeaderCodeToggle.Content>
@@ -64,7 +64,7 @@ function Widgets() {
             language="jsx"
             componentName="CheckBoxGroup"
           >
-            <DemoWidget name="CheckBoxGroup" width={200}>
+            <DemoWidget name="CheckBoxGroup" width={400}>
               {Disabled}
             </DemoWidget>
           </HeaderCodeToggle.Content>
@@ -83,7 +83,7 @@ function Widgets() {
             language="jsx"
             componentName="CheckBoxGroup"
           >
-            <DemoWidget name="CheckBoxGroup" width={150}>
+            <DemoWidget name="CheckBoxGroup" width={300}>
               {CustomStyle}
             </DemoWidget>
           </HeaderCodeToggle.Content>
@@ -103,7 +103,7 @@ function Widgets() {
             language="jsx"
             componentName="CheckBoxGroup"
           >
-            <DemoWidget name="CheckBoxGroup" width={150}>
+            <DemoWidget name="CheckBoxGroup" width={300}>
               {RTL}
             </DemoWidget>
           </HeaderCodeToggle.Content>

packages/documentation/components/checkbox/widgets.tsx

@@ -27,7 +27,7 @@ function widgets() {
             language="jsx"
             componentName="CheckBox"
           >
-            <DemoWidget name="CheckBox" width={220}>
+            <DemoWidget name="CheckBox" width={300}>
               {Default}
             </DemoWidget>
           </HeaderCodeToggle.Content>
@@ -49,7 +49,7 @@ function widgets() {
             language="jsx"
             componentName="CheckBox"
           >
-            <DemoWidget name="CheckBox" width={200}>
+            <DemoWidget name="CheckBox" width={300}>
               {Disabled}
             </DemoWidget>
           </HeaderCodeToggle.Content>
@@ -72,7 +72,7 @@ function widgets() {
             language="jsx"
             componentName="CheckBox"
           >
-            <DemoWidget name="CheckBox" width={200}>
+            <DemoWidget name="CheckBox" width={300}>
               {Large}
             </DemoWidget>
           </HeaderCodeToggle.Content>
@@ -95,7 +95,7 @@ function widgets() {
             language="jsx"
             componentName="CheckBox"
           >
-            <DemoWidget name="CheckBox" width={150}>
+            <DemoWidget name="CheckBox" width={300}>
               {CustomStyle}
             </DemoWidget>
           </HeaderCodeToggle.Content>
@@ -114,13 +114,13 @@ function widgets() {
             language="jsx"
             componentName="CheckBox"
           >
-            <DemoWidget name="CheckBox" width={200}>
+            <DemoWidget name="CheckBox" width={300}>
               {CustomStyle}
             </DemoWidget>
-            <DemoWidget name="CheckBox" width={200}>
+            <DemoWidget name="CheckBox" width={300}>
               {Medium}
             </DemoWidget>
-            <DemoWidget name="CheckBox" width={200}>
+            <DemoWidget name="CheckBox" width={300}>
               {LargeRounded}
             </DemoWidget>
           </HeaderCodeToggle.Content>

packages/lib/components/checkbox/checkbox.module.scss

@@ -55,8 +55,14 @@ $heights: (
 
 // Border styles
 @mixin borderStyles {
+  border-radius: hybrid.$radius-xs;
+
   &:not(.dark) {
-    @extend %border;
+    border: 1px solid rgba(theme.$secondary-rgb, 0.75);
+  }
+
+  &.dark {
+    border: 1px solid rgba(theme.$dark-control-border-rgb, 1);
   }
 }
 
@@ -66,7 +72,7 @@ $heights: (
 
 // Hover styles with interactive feedback
 @mixin hoverStyles {
-  @extend %border-radius;
+  border-radius: hybrid.$radius-xs;
 
   @include hybrid.hover-feedback() {
     &.dark {
@@ -116,7 +122,11 @@ $heights: (
   }
 
   &.round {
-    border-radius: hybrid.$radius-sm;
+    border-radius: hybrid.$radius-xs;
+  }
+
+  &.square {
+    border-radius: hybrid.$radius-xs;
   }
 
   svg {