fix: select component hide label style (#552)

* feat: add hideLabel property on experimental Select

* fix: hide label style on select component

* fix: bring back stylelint-disable comment

Author: AlanFnz

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);
     }
 `;

src/components/experimental/Select/Select.tsx

@@ -56,7 +56,7 @@ function SelectTriggerWithRef<T extends object>(
     return (
         <FakeButton $isVisuallyFocused={state?.isOpen} ref={forwardedRef} onClick={() => buttonRef.current?.click()}>
             {leadingIcon}
-            <InnerWrapper>
+            <InnerWrapper hideLabel={hideLabel}>
                 {hideLabel ? (
                     <VisuallyHidden>
                         <Label>{label}</Label>