🏷️ Label: change "meta" field type to ReactNode (#3341)

* 🏷️ Label: change "meta" field type to ReactNode * update snapshots
equinor · Mar 12, 2024 · bd0a838 · bd0a838
1 parent ca0f4da
commit bd0a838
Show file tree

Hide file tree

Showing 7 changed files with 9 additions and 5 deletions.
diff --git a/packages/eds-core-react/src/components/Autocomplete/Autocomplete.tsx b/packages/eds-core-react/src/components/Autocomplete/Autocomplete.tsx
@@ -217,7 +217,7 @@ export type AutocompleteProps<T> = {
   /** Variants */
   variant?: Variants
   /** Meta text, for instance unit */
-  meta?: string
+  meta?: ReactNode
   /** Disabled state
    * @default false
    */

diff --git a/packages/eds-core-react/src/components/Label/Label.tsx b/packages/eds-core-react/src/components/Label/Label.tsx
@@ -10,6 +10,7 @@ type LabelBaseType = {
 const LabelBase = styled.label<LabelBaseType>`
   display: flex;
   justify-content: space-between;
+  align-items: flex-end;
   position: relative;
   ${typographyTemplate(tokens.typography)}
   margin-left: ${tokens.spacings.left};
@@ -26,7 +27,7 @@ const Text = styled.span`
 
 export type LabelProps = {
   label: ReactNode
-  meta?: string
+  meta?: ReactNode
   disabled?: boolean
 } & LabelHTMLAttributes<HTMLLabelElement>
 

diff --git a/packages/eds-core-react/src/components/Label/__snapshots__/Label.test.tsx.snap b/packages/eds-core-react/src/components/Label/__snapshots__/Label.test.tsx.snap
@@ -5,6 +5,7 @@ exports[`Label Matches snapshot 1`] = `
   .c0 {
   display: flex;
   justify-content: space-between;
+  align-items: flex-end;
   position: relative;
   margin: 0;
   color: var(--eds_text__static_icons__tertiary, rgba(111, 111, 111, 1));

diff --git a/packages/eds-core-react/src/components/Select/NativeSelect.tsx b/packages/eds-core-react/src/components/Select/NativeSelect.tsx
@@ -1,4 +1,4 @@
-import { forwardRef, SelectHTMLAttributes } from 'react'
+import { forwardRef, SelectHTMLAttributes, ReactNode } from 'react'
 import styled, { css, ThemeProvider } from 'styled-components'
 import { Label } from '../Label'
 import { nativeselect as tokens } from './NativeSelect.tokens'
@@ -73,7 +73,7 @@ export type NativeSelectProps = {
   /** Label for the select element */
   label: string
   /** Meta text, for instance unit */
-  meta?: string
+  meta?: ReactNode
   /** Disabled state */
   disabled?: boolean
   /** The user can choose multiple items */

diff --git a/packages/eds-core-react/src/components/Select/__snapshots__/NativeSelect.test.tsx.snap b/packages/eds-core-react/src/components/Select/__snapshots__/NativeSelect.test.tsx.snap
@@ -5,6 +5,7 @@ exports[`NativeSelect Matches snapshot 1`] = `
   .c1 {
   display: flex;
   justify-content: space-between;
+  align-items: flex-end;
   position: relative;
   margin: 0;
   color: var(--eds_text__static_icons__tertiary, rgba(111, 111, 111, 1));

diff --git a/packages/eds-core-react/src/components/TextField/TextField.tsx b/packages/eds-core-react/src/components/TextField/TextField.tsx
@@ -33,7 +33,7 @@ type SharedTextFieldProps = {
   /** Label text */
   label?: ReactNode
   /** Meta text */
-  meta?: string
+  meta?: ReactNode
   /** Unit text */
   unit?: string
   /** Helper text */

diff --git a/packages/eds-core-react/src/components/TextField/__snapshots__/TextField.test.tsx.snap b/packages/eds-core-react/src/components/TextField/__snapshots__/TextField.test.tsx.snap
@@ -5,6 +5,7 @@ exports[`TextField Matches snapshot 1`] = `
   .c0 {
   display: flex;
   justify-content: space-between;
+  align-items: flex-end;
   position: relative;
   margin: 0;
   color: var(--eds_text__static_icons__tertiary, rgba(111, 111, 111, 1));