Skip to content

Commit

Permalink
Merge pull request #1166 from securityscorecard/ajkl2533@UXD-1651-03
Browse files Browse the repository at this point in the history
feat(Label): update styling
  • Loading branch information
ajkl2533 authored Oct 14, 2024
2 parents 4e4e415 + 5b8a38c commit 03a6843
Show file tree
Hide file tree
Showing 8 changed files with 14 additions and 17 deletions.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/components/forms/Checkbox/Checkbox.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 }>`
Expand Down
18 changes: 9 additions & 9 deletions src/components/forms/Label/Label.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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}
>
Expand Down
11 changes: 3 additions & 8 deletions src/components/forms/Message/Message.tsx
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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>
);

Expand Down
1 change: 1 addition & 0 deletions src/components/forms/Radio/Radio.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 });
Expand Down

0 comments on commit 03a6843

Please sign in to comment.