feat(Label): update styling

Ref UXD-1651
securityscorecard · Oct 11, 2024 · 5b8a38c · 5b8a38c
1 parent 4e4e415
commit 5b8a38c
Show file tree

Hide file tree

Showing 8 changed files with 14 additions and 17 deletions.
diff --git a/.storybook/image-snapshots/expected/components_forms_Label_Default.png b/.storybook/image-snapshots/expected/components_forms_Label_Default.png
diff --git a/.storybook/image-snapshots/expected/components_forms_Message_Error Message.png b/.storybook/image-snapshots/expected/components_forms_Message_Error Message.png
diff --git a/.storybook/image-snapshots/expected/components_forms_Message_Note Message.png b/.storybook/image-snapshots/expected/components_forms_Message_Note Message.png
diff --git a/...rybook/image-snapshots/expected/components_forms_MultiValueInput_Validation.png b/...rybook/image-snapshots/expected/components_forms_MultiValueInput_Validation.png
diff --git a/src/components/forms/Checkbox/Checkbox.tsx b/src/components/forms/Checkbox/Checkbox.tsx
@@ -110,6 +110,7 @@ const getLabelStyles = css`
   min-height: ${getRemToggleSize};
   line-height: ${getRemToggleSize};
   margin-left: ${({ theme }) => `-${getRemToggleSize({ theme })}`};
+  font-weight: var(--sscds-font-weight-body-default);
 `;
 
 const CheckboxLabel = styled(Label)<{ isDisabled: boolean }>`

diff --git a/src/components/forms/Label/Label.tsx b/src/components/forms/Label/Label.tsx
@@ -2,16 +2,14 @@ import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import styled from 'styled-components';
 import cls from 'classnames';
 
-import { SpaceSizes } from '../../../theme';
-import { getSpace } from '../../../utils';
 import { CLX_COMPONENT } from '../../../theme/constants';
-import { Text } from '../../Text';
+import ElementLabel from '../../ElementLabel/ElementLabel';
 
-const LabelRoot = styled(Text)`
+const LabelRoot = styled(ElementLabel)`
   display: block;
-  padding-top: ${getSpace(SpaceSizes.xs)};
-  padding-bottom: ${getSpace(SpaceSizes.xs)};
-  cursor: 'inherit';
+  padding-inline: var(--sscds-space-1x);
+  padding-block-end: var(--sscds-space-2x);
+  cursor: inherit;
 
   > * {
     margin: 0;
@@ -23,10 +21,12 @@ const Label = ({
   htmlFor,
   className,
   ...props
-}: ComponentPropsWithoutRef<'label'> & { children: ReactNode }) => (
+}: Omit<ComponentPropsWithoutRef<'label'>, 'color'> & {
+  children: ReactNode;
+}) => (
   <LabelRoot
-    as="label"
     className={cls(CLX_COMPONENT, className)}
+    forwardedAs="label"
     htmlFor={htmlFor}
     {...props}
   >

diff --git a/src/components/forms/Message/Message.tsx b/src/components/forms/Message/Message.tsx
@@ -1,16 +1,13 @@
 import styled from 'styled-components';
 
-import { SpaceSizes } from '../../../theme';
-import { getSpace } from '../../../utils';
 import { Paragraph } from '../../Paragraph';
-import { TextSizes } from '../../Text/Text.enums';
 import { MessageVariants } from './Message.enums';
 import { MessageProps } from './Message.types';
 import { CLX_COMPONENT } from '../../../theme/constants';
 
 const MessageContainer = styled.div`
-  padding-top: ${getSpace(SpaceSizes.sm)};
-  padding-bottom: ${getSpace(SpaceSizes.sm)};
+  padding-inline: var(--sscds-space-1x);
+  padding-block-start: var(--sscds-space-1x);
 
   > * {
     margin: 0;
@@ -22,9 +19,7 @@ const Message = ({
   variant = MessageVariants.note,
 }: MessageProps) => (
   <MessageContainer className={CLX_COMPONENT}>
-    <Paragraph size={TextSizes.md} variant={variant}>
-      {children}
-    </Paragraph>
+    <Paragraph variant={variant}>{children}</Paragraph>
   </MessageContainer>
 );
 

diff --git a/src/components/forms/Radio/Radio.tsx b/src/components/forms/Radio/Radio.tsx
@@ -21,6 +21,7 @@ const RadioLabel = styled(Label)<
   margin-bottom: 0;
   padding-top: 0;
   padding-bottom: 0;
+  font-weight: var(--sscds-font-weight-body-default);
 
   ${({ theme, hasLabel }) => {
     const toggleSize = getFormStyle('toggleSize')({ theme });