Review afixes

kronostechnologies · Jul 12, 2024 · 8826151 · 8826151
1 parent ecd820a
commit 8826151
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 28 deletions.
diff --git a/packages/react/src/components/radio-button/radio-button.test.tsx.snap b/packages/react/src/components/radio-button/radio-button.test.tsx.snap
@@ -14,6 +14,10 @@ exports[`Radio button matches snapshot 1`] = `
   margin: 0;
   position: relative;
   width: var(--size-1x);
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  margin-top: var(--spacing-half);
 }
 
 .c1 + {
@@ -57,10 +61,10 @@ exports[`Radio button matches snapshot 1`] = `
 }
 
 .c0 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;

diff --git a/packages/react/src/components/radio-button/radio-button.tsx b/packages/react/src/components/radio-button/radio-button.tsx
@@ -1,7 +1,6 @@
 import { ChangeEvent, FunctionComponent } from 'react';
 import styled from 'styled-components';
 import { focus } from '../../utils/css-state';
-import { VisuallyHidden } from '../visually-hidden/visuallyhidden';
 import { useId } from '../../hooks/use-id';
 
 const StyledInput = styled.input<{ disabled?: boolean }>`
@@ -15,6 +14,8 @@ const StyledInput = styled.input<{ disabled?: boolean }>`
     margin: 0;
     position: relative;
     width: var(--size-1x);
+    flex-shrink: 0;
+    margin-top: var(--spacing-half);
     
     ${(theme) => focus(theme, { selector: '+' })}
      
@@ -46,7 +47,7 @@ const StyledLabel = styled.label`
 `;
 
 const StyledContainer = styled.div`
-    align-items: center;
+    align-items: flex-start;
     display: inline-flex;
     margin-top: var(--spacing-1x);
     position: relative;
@@ -59,12 +60,10 @@ interface RadioButtonProps {
     className?: string;
     defaultChecked?: boolean;
     disabled?: boolean;
-    externalLabelId?: string;
     id?: string;
     label?: string;
     name?: string;
     value?: string;
-    visuallyHidden?: boolean;
 
     onChange?(event: ChangeEvent<HTMLInputElement>): void;
 }
@@ -76,18 +75,14 @@ export const RadioButton: FunctionComponent<RadioButtonProps> = ({
     className,
     defaultChecked,
     disabled,
-    externalLabelId,
     id,
     label,
     name,
     value,
-    visuallyHidden,
     onChange,
 }) => {
     const generatedId = useId();
     const inputId = id || generatedId;
-    const externalLabel = externalLabelId ? document.getElementById(externalLabelId)?.innerText : '';
-    const inputLabel = externalLabelId ? `${label} ${externalLabel}` ?? '' : label;
 
     return (
         <StyledContainer>
@@ -111,11 +106,7 @@ export const RadioButton: FunctionComponent<RadioButtonProps> = ({
                         data-testid={`radiobutton-${inputId}_label`}
                         htmlFor={inputId}
                     >
-                        {
-                            visuallyHidden
-                                ? <VisuallyHidden>{inputLabel}</VisuallyHidden>
-                                : inputLabel
-                        }
+                        {label}
                     </StyledLabel>
                 )
             }

diff --git a/packages/storybook/stories/radio-button.mdx b/packages/storybook/stories/radio-button.mdx
@@ -39,10 +39,6 @@ Radio buttons display mutually exclusive options from which a user selects exact
 ### Checked and disabled
 <Canvas of={RadioButtonStories.CheckedAndDisabled}/>
 
-### Labelling with text from another DOM element
-<p hidden id="idPotato">Mr. Potato</p>
-<Canvas of={RadioButtonStories.WithExternalLabel} />
-
 ## Properties
 <ArgTypes of={RadioButton} />
 

diff --git a/packages/storybook/stories/radio-button.stories.tsx b/packages/storybook/stories/radio-button.stories.tsx
@@ -16,13 +16,6 @@ export const Default: Story = {
     },
 };
 
-export const WithExternalLabel: Story = {
-    args: {
-        label: 'Merge contact: ',
-        externalLabelId: 'idPotato',
-    },
-};
-
 export const Checked: Story = {
     args: {
         label: 'Merge contact',