diff --git a/src/components/Label/Label.module.css b/src/components/Label/Label.module.css index b5aa230c2..78a0f1e5f 100644 --- a/src/components/Label/Label.module.css +++ b/src/components/Label/Label.module.css @@ -10,7 +10,8 @@ * Labels can sometimes be marked up as legends for field groups (i.e. radio field). */ .label { - @mixin labelStyles; + @mixin eds-theme-typography-form-label; + display: inline-block; } /** diff --git a/src/components/Select/Select.module.css b/src/components/Select/Select.module.css index 3d56f7e16..746dc86af 100644 --- a/src/components/Select/Select.module.css +++ b/src/components/Select/Select.module.css @@ -24,10 +24,19 @@ /** * Label on top of the select trigger button to label the select field. */ -.label { - @mixin eds-theme-typography-label-md; - color: var(--eds-theme-color-form-label); +.select__label { + @mixin eds-theme-typography-form-label; + display: inline-block; +} + +/** + * Wraps the Label and the optional/required indicator. + */ +.select__overline { + display: flex; + justify-content: space-between; margin-bottom: var(--eds-size-half); + color: var(--eds-theme-color-form-label); } /** diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx index 57d11b19b..70415c61d 100644 --- a/src/components/Select/Select.tsx +++ b/src/components/Select/Select.tsx @@ -229,9 +229,12 @@ const SelectContext = React.createContext<{ const SelectLabel = (props: { className?: string; children: ReactNode }) => { const { children, className } = props; - const componentClassName = clsx(styles['label'], className); + const componentClassName = clsx(styles['select__label'], className); + const overlineClassName = clsx(styles['select__overline']); return ( - {children} +
+ {children} +
); }; diff --git a/src/components/Select/__snapshots__/Select.test.tsx.snap b/src/components/Select/__snapshots__/Select.test.tsx.snap index 2c0629df7..ccb283b98 100644 --- a/src/components/Select/__snapshots__/Select.test.tsx.snap +++ b/src/components/Select/__snapshots__/Select.test.tsx.snap @@ -394,13 +394,17 @@ exports[`