feat: support absent label in fields

lena.rashkovan · lena.rashkovan · commit b75e0d9dbead · 2025-05-21T16:00:02.000+02:00
diff --git a/src/components/experimental/ComboBox/ComboBox.tsx b/src/components/experimental/ComboBox/ComboBox.tsx
@@ -7,7 +7,6 @@ import {
 } from 'react-aria-components';
 import { useIsSSR } from 'react-aria';
 import { useResizeObserver } from '@react-aria/utils';
-import styled from 'styled-components';
 import { Popover } from '../Popover/Popover';
 import { ListBox } from '../ListBox/ListBox';
 import { FakeInput } from '../Field/FakeInput';
@@ -27,11 +26,8 @@ const defaultAriaStrings = {
     messageFieldIsCleared: 'The field is cleared'
 };
 
-const StyledPopover = styled(Popover)`
-    overflow: auto;
-`;
-
-interface ComboBoxFieldProps extends Pick<FieldProps, 'label' | 'description' | 'errorMessage' | 'leadingIcon'> {
+interface ComboBoxFieldProps extends Pick<FieldProps, 'description' | 'errorMessage' | 'leadingIcon'> {
+    label: string;
     placeholder?: string;
     /**
      * If your project supports multiple languages,
@@ -135,12 +131,9 @@ function ComboBoxComponent<T extends Record<string, unknown>>(
                         />
                         <Footer>{isInvalid ? <FieldError>{errorMessage}</FieldError> : description}</Footer>
                     </Wrapper>
-                    <StyledPopover
-                        triggerRef={triggerRef}
-                        style={{ '--trigger-width': menuWidth } as React.CSSProperties}
-                    >
+                    <Popover triggerRef={triggerRef} style={{ '--trigger-width': menuWidth } as React.CSSProperties}>
                         <ListBox>{children}</ListBox>
-                    </StyledPopover>
+                    </Popover>
                 </>
             )}
         </BaseComboBox>
diff --git a/src/components/experimental/DateField/DateField.tsx b/src/components/experimental/DateField/DateField.tsx
@@ -24,7 +24,7 @@ const DateField = React.forwardRef<HTMLDivElement, DateFieldProps>(
                         <FakeInput $isVisuallyFocused={isVisuallyFocused}>
                             {leadingIcon}
                             <InnerWrapper>
-                                <Label $flying>{label}</Label>
+                                {label && <Label $flying>{label}</Label>}
                                 <DateInput>{segment => <DateSegment segment={segment} />}</DateInput>
                             </InnerWrapper>
                             {actionIcon}
diff --git a/src/components/experimental/DatePicker/DatePicker.tsx b/src/components/experimental/DatePicker/DatePicker.tsx
@@ -15,7 +15,7 @@ import { Button } from '../Field/Button';
 import { FieldProps } from '../Field/Props';
 
 interface DatePickerProps extends Pick<FieldProps, 'description' | 'errorMessage'>, BaseDatePickerProps<DateValue> {
-    label: string;
+    label?: string;
 }
 
 const StyledPopover = styled(Popover)`
diff --git a/src/components/experimental/Field/FakeInput.ts b/src/components/experimental/Field/FakeInput.ts
@@ -15,7 +15,7 @@ const focusStyles = css`
 `;
 
 export const FakeInput = styled.div<{ $isVisuallyFocused: boolean }>`
-    box-sizing: content-box;
+    box-sizing: border-box;
     cursor: text;
 
     color: ${getSemanticValue('on-surface-variant')};
@@ -25,15 +25,15 @@ export const FakeInput = styled.div<{ $isVisuallyFocused: boolean }>`
     border-color: ${getSemanticValue('outline-variant')};
     border-radius: ${get('radii.4')};
 
-    padding: ${get('space.2')} ${get('space.3')} ${get('space.2')} ${get('space.4')};
+    min-height: 3.5rem;
+    padding: 0 ${get('space.3')} 0 ${get('space.4')};
     display: flex;
-    align-items: start;
+    align-items: center;
     gap: ${get('space.3')};
 
     /* stylelint-disable selector-type-case, selector-type-no-unknown */
     & > :not(${InnerWrapper}) {
         flex-shrink: 0;
-        margin-top: ${get('space.2')};
         color: ${getSemanticValue('on-surface-variant')};
     }
 
diff --git a/src/components/experimental/Field/Field.ts b/src/components/experimental/Field/Field.ts
@@ -1,9 +1,13 @@
 import styled, { css } from 'styled-components';
 import { DateInput as BaseDateInput, Input as BaseInput, TextArea as BaseTextArea } from 'react-aria-components';
 import { getSemanticValue } from '../../../essentials/experimental';
-import { textStyles } from '../Text/Text';
 
-export const fieldTextStyles = textStyles.variants.body1;
+export const fieldTextStyles = css`
+    font-family: inherit;
+    font-size: var(--wave-exp-typescale-body-1-size);
+    font-weight: var(--wave-exp-typescale-body-1-weight);
+    line-height: var(--wave-exp-typescale-body-1-line-height);
+`;
 
 export const fieldStyles = css`
     border: none;
@@ -38,7 +42,7 @@ export const TextArea = styled(BaseTextArea).attrs({ rows: 1 })`
     ${fieldStyles};
 
     resize: none;
-    min-height: ${fieldTextStyles.lineHeight};
+    min-height: var(--wave-exp-typescale-body-1-line-height);
 `;
 
 export const DateInput = styled(BaseDateInput)`
diff --git a/src/components/experimental/Field/InnerWrapper.ts b/src/components/experimental/Field/InnerWrapper.ts
@@ -1,10 +1,15 @@
 import styled from 'styled-components';
-import { get } from '../../../utils/experimental/themeGet';
+import { Label } from './Label';
 
 export const InnerWrapper = styled.div`
-    width: 100%;
-    padding-top: ${get('space.4')};
-
     position: relative;
     overflow: hidden;
+
+    box-sizing: border-box;
+    width: 100%;
+
+    /* stylelint-disable selector-type-no-unknown */
+    &:has(${Label}) {
+        padding-top: var(--wave-exp-typescale-label-2-line-height);
+    }
 `;
diff --git a/src/components/experimental/Field/Label.ts b/src/components/experimental/Field/Label.ts
@@ -1,24 +1,28 @@
 import { Label as BaseLabel } from 'react-aria-components';
 import styled, { css } from 'styled-components';
 import { getSemanticValue } from '../../../essentials/experimental';
-import { textStyles } from '../Text/Text';
 
 export const flyingLabelStyles = css`
     top: 0;
-    transform: translate3d(0, 0, 0);
+    transform: none;
 
-    ${textStyles.variants.label2}
+    font-size: var(--wave-exp-typescale-label-2-size);
+    font-weight: var(--wave-exp-typescale-label-2-weight);
+    line-height: var(--wave-exp-typescale-label-2-line-height);
 `;
 
 export const Label = styled(BaseLabel)<{ $flying: boolean }>`
     position: absolute;
     top: 50%;
     color: currentColor;
 
-    ${textStyles.variants.body1}
+    font-family: inherit;
+    font-size: var(--wave-exp-typescale-body-1-size);
+    font-weight: var(--wave-exp-typescale-body-1-weight);
+    line-height: var(--wave-exp-typescale-body-1-line-height);
     white-space: nowrap;
 
-    transform: translate3d(0, calc(-${textStyles.variants.body1.lineHeight} / 2), 0);
+    transform: translateY(-50%);
     transform-origin: 0;
 
     transition: top 200ms ease, font-size 200ms ease, transform 200ms ease;
diff --git a/src/components/experimental/Field/Props.ts b/src/components/experimental/Field/Props.ts
@@ -1,7 +1,7 @@
 import React from 'react';
 
 export interface FieldProps {
-    label: string;
+    label?: string;
     leadingIcon?: React.ReactNode;
     actionIcon?: React.ReactNode;
     description?: string;
diff --git a/src/components/experimental/NumberField/NumberField.tsx b/src/components/experimental/NumberField/NumberField.tsx
@@ -61,7 +61,7 @@ const NumberField = React.forwardRef<HTMLDivElement, NumberFieldProps>(
                     <>
                         <FakeInput $isVisuallyFocused={isVisuallyFocused}>
                             <InnerWrapper>
-                                <Label $flying>{label}</Label>
+                                {label && <Label $flying>{label}</Label>}
                                 <Input />
                             </InnerWrapper>
                             <GroupControl>
diff --git a/src/components/experimental/NumberField/docs/NumberField.stories.tsx b/src/components/experimental/NumberField/docs/NumberField.stories.tsx
@@ -14,10 +14,7 @@ const meta: Meta = {
                 <Story />
             </div>
         )
-    ],
-    args: {
-        label: 'Group size'
-    }
+    ]
 };
 
 export default meta;
@@ -28,12 +25,14 @@ export const Default: Story = {};
 
 export const WithDefaultValue: Story = {
     args: {
+        label: 'Group size',
         defaultValue: 5
     }
 };
 
 export const WithDescription: Story = {
     args: {
+        label: 'Group size',
         description: 'Number of passengers'
     }
 };
diff --git a/src/components/experimental/RadioButton/RadioButton.tsx b/src/components/experimental/RadioButton/RadioButton.tsx
@@ -27,7 +27,7 @@ const Radio = styled(BaseRadio)`
     gap: ${themeGet('space.2')};
     cursor: pointer;
 
-    font-family: var(--wave-exp-typescale-body-1-font), sans-serif;
+    font-family: inherit;
     font-size: var(--wave-exp-typescale-body-1-size);
     font-weight: var(--wave-exp-typescale-body-1-weight);
     line-height: var(--wave-exp-typescale-body-1-line-height);
diff --git a/src/components/experimental/Select/Select.tsx b/src/components/experimental/Select/Select.tsx
@@ -24,16 +24,12 @@ import DropupSelectIcon from '../../../icons/arrows/DropupSelectIcon';
 import { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';
 import { fieldStyles, fieldTextStyles } from '../Field/Field';
 
-const StyledPopover = styled(Popover)`
-    overflow: auto;
-`;
-
 const FakeButton = styled(FakeInput)`
     cursor: pointer;
 
     ${Button} {
         text-align: start;
-        height: ${fieldTextStyles.lineHeight};
+        height: var(--wave-exp-typescale-body-1-line-height);
         ${fieldStyles};
     }
 
@@ -43,6 +39,7 @@ const FakeButton = styled(FakeInput)`
 `;
 
 interface SelectFieldProps<T> extends Pick<FieldProps, 'label' | 'description' | 'errorMessage' | 'leadingIcon'> {
+    label: string;
     placeholder?: string;
     renderValue?: (props: SelectValueRenderProps<T> & { defaultChildren: React.ReactNode }) => React.ReactNode;
 }
@@ -128,12 +125,12 @@ function Select<T extends Record<string, unknown>>({
                         />
                         <Footer>{isInvalid ? <FieldError>{errorMessage}</FieldError> : description}</Footer>
                     </Wrapper>
-                    <StyledPopover
+                    <Popover
                         triggerRef={triggerRef}
                         style={{ '--trigger-width': menuWidth } as React.CSSProperties}
                     >
                         <ListBox items={props.items}>{children}</ListBox>
-                    </StyledPopover>
+                    </Popover>
                 </>
             )}
         </BaseSelect>
diff --git a/src/components/experimental/TextField/TextField.tsx b/src/components/experimental/TextField/TextField.tsx
@@ -111,7 +111,7 @@ const TextField = React.forwardRef<HTMLDivElement, TextFieldProps>(
                 </Button>
             ) : null;
 
-        const flyingLabel = <Label $flying={Boolean(placeholder || text.length > 0)}>{label}</Label>;
+        const flyingLabel = label && <Label $flying={Boolean(placeholder || text.length > 0)}>{label}</Label>;
 
         return (
             <Wrapper>
diff --git a/src/components/experimental/TimeField/TimeField.tsx b/src/components/experimental/TimeField/TimeField.tsx
@@ -33,7 +33,7 @@ const TimeField = React.forwardRef<HTMLDivElement, TimeFieldProps>(
                         <FakeInput $isVisuallyFocused={isVisuallyFocused}>
                             {leadingIcon}
                             <InnerWrapper>
-                                <Label $flying>{label}</Label>
+                                {label && <Label $flying>{label}</Label>}
                                 <DateInput>{segment => <DateSegment segment={segment} />}</DateInput>
                             </InnerWrapper>
                             {actionIcon}
diff --git a/src/components/experimental/TimeField/docs/TimeField.stories.tsx b/src/components/experimental/TimeField/docs/TimeField.stories.tsx
@@ -19,9 +19,6 @@ const meta: Meta = {
             </div>
         )
     ],
-    args: {
-        label: 'Appointment time'
-    }
 };
 
 export default meta;
@@ -34,12 +31,14 @@ const NOW = now(getLocalTimeZone());
 
 export const WithDefaultValue: Story = {
     args: {
+        label: 'Appointment time',
         defaultValue: NOW
     }
 };
 
 export const WithPlaceholderValue: Story = {
     args: {
+        label: 'Appointment time',
         description: 'I will start from 9:00',
         placeholderValue: parseTime('09:00')
     }
diff --git a/src/essentials/experimental/globalStyles.ts b/src/essentials/experimental/globalStyles.ts
@@ -37,10 +37,12 @@ export const createThemeGlobalStyle = (
     ${semanticCssVariablesForLightTheme}
     ${generateCssVariables(
         {
-            'body-1-font': 'Roboto Flex',
             'body-1-size': '1rem',
-            'body-1-weight': 400,
-            'body-1-line-height': '1.5rem'
+            'body-1-weight': 'normal',
+            'body-1-line-height': '1.5rem',
+            'label-2-size': '0.875rem',
+            'label-2-weight': 'normal',
+            'label-2-line-height': '1.25rem'
         },
         'typescale'
     )}

Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@ import { Button } from '../Field/Button';`
`15`	`15`	`import { FieldProps } from '../Field/Props';`
`16`	`16`
`17`	`17`	`interface DatePickerProps extends Pick<FieldProps, 'description' \| 'errorMessage'>, BaseDatePickerProps<DateValue> {`
`18`		`- label: string;`
	`18`	`+ label?: string;`
`19`	`19`	`}`
`20`	`20`
`21`	`21`	const StyledPopover = styled(Popover)`