fix: lower z-index; add icon + text support; add pointer events to ch…

…ecked option
gravity-ui · Aug 21, 2024 · 6019da2 · 6019da2
1 parent 580e0ed
commit 6019da2
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/src/components/RadioButton/RadioButton.scss b/src/components/RadioButton/RadioButton.scss
@@ -36,7 +36,7 @@ $block: '.#{variables.$ns}radio-button';
         &::after {
             content: '';
             position: absolute;
-            z-index: -2;
+            z-index: -1;
             inset: 0;
             border: var(--_--border-width) solid var(--g-color-line-generic);
             border-radius: 0;
@@ -108,7 +108,10 @@ $block: '.#{variables.$ns}radio-button';
         }
 
         &-text {
-            display: inline-block;
+            display: inline-flex;
+            justify-content: center;
+            align-items: center;
+            gap: 8px;
             white-space: nowrap;
             color: var(--g-color-text-complementary);
             overflow: hidden;
@@ -122,7 +125,6 @@ $block: '.#{variables.$ns}radio-button';
 
         &_checked {
             cursor: default;
-            pointer-events: none;
             border-color: var(--g-color-line-brand);
 
             #{$block}__option-text {

diff --git a/src/components/RadioButton/__stories__/RadioButtonShowcase.tsx b/src/components/RadioButton/__stories__/RadioButtonShowcase.tsx
@@ -16,7 +16,16 @@ export function RadioButtonShowcase() {
     ];
 
     const iconOptions: RadioButtonOption[] = [
-        {value: 'Value 1', content: <Icon data={TriangleExclamationFill} />, title: 'Warning'},
+        {
+            value: 'Value 1',
+            content: (
+                <React.Fragment>
+                    <Icon data={TriangleExclamationFill} />
+                    <span>Warning</span>
+                </React.Fragment>
+            ),
+            title: 'Warning',
+        },
         {value: 'Value 2', content: <Icon data={CircleInfoFill} />, title: 'Info'},
     ];