diff --git a/src/components/experimental/Field/InnerWrapper.ts b/src/components/experimental/Field/InnerWrapper.ts index 32aea5f5..36402fdb 100644 --- a/src/components/experimental/Field/InnerWrapper.ts +++ b/src/components/experimental/Field/InnerWrapper.ts @@ -1,15 +1,22 @@ import styled from 'styled-components'; import { Label } from './Label'; -export const InnerWrapper = styled.div` +export const InnerWrapper = styled.div<{ hideLabel?: boolean }>` position: relative; overflow: hidden; box-sizing: border-box; width: 100%; + ${props => + !props.hideLabel && + ` + padding-top: var(--wave-exp-typescale-label-2-line-height); + `} + + /* For browsers that support :has(), we use this as a fallback */ /* stylelint-disable selector-type-case, selector-type-no-unknown */ - &:has(${Label}) { + &:has(${Label}:not(.visually-hidden)) { padding-top: var(--wave-exp-typescale-label-2-line-height); } `; diff --git a/src/components/experimental/Select/Select.tsx b/src/components/experimental/Select/Select.tsx index 1b184e97..9566f0da 100644 --- a/src/components/experimental/Select/Select.tsx +++ b/src/components/experimental/Select/Select.tsx @@ -56,7 +56,7 @@ function SelectTriggerWithRef( return ( buttonRef.current?.click()}> {leadingIcon} - + {hideLabel ? (