FEAT: Add support for opaqueLabel on floating labels

src/common/floating-label-utils/hooks.tsx

@@ -12,6 +12,7 @@ type FloatingLabelHookProps = {
     className?: string;
     placeholder?: string;
     invalid?: boolean;
+    opaqueLabel?: boolean;
     onMount?: () => void;
 }
 
@@ -76,6 +77,7 @@ export function useFloatingLabel({
     inputValue,
     placeholder,
     invalid,
+    opaqueLabel,
     onMount = () => {}
 } : FloatingLabelHookProps): FloatingLabelHookReturn {
     const _internalInputRef = useRef(null)
@@ -123,7 +125,8 @@ export function useFloatingLabel({
     })
 
     const floatingLabelClassName = classNames(`floating-label`, {
-        'floating-label--large': inputSize === `large`
+        'floating-label--large': inputSize === `large`,
+        'floating-label--opaque': opaqueLabel
     })
 
     const FragmentContainer = useCallback(({ children }) => <>{children}</>, [])

src/ebay-textbox/README.md

@@ -34,6 +34,7 @@ import "@ebay/skin/textbox.css";
 | --------------- | -------- | -------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `fluid`         | Boolean  | No       | No       | Takes the full width of the container
 | `multiline`     | Boolean  | No       | No       | Renders a multi-line textbox if true                                                                                                                      |
+| `opaqueLabel`   | Boolean  | No       | No       | Only works with floating label. If set, then background is obscured of the floating label. Used with textarea to prevent label overlap                                                                                                                      |
 | `invalid`       | Boolean  | No       | No       | Indicates a field-level error with red border if true                                                                                                     |
 | `type`          | String   | No       | No       | Default: `text`, can be `password` if needed                                                                                                              |
 | `value`         | String   | No       | No       | Indicates the value of the input element, required for a controlled component.                                                                            |

src/ebay-textbox/__tests__/__snapshots__/index.spec.tsx.snap

@@ -151,6 +151,50 @@ exports[`Storyshots ebay-textbox Floating label with autofocus 1`] = `
 </DocumentFragment>
 `;
 
+exports[`Storyshots ebay-textbox Floating label with multiline 1`] = `
+<DocumentFragment>
+  <span
+    class="floating-label"
+  >
+    <label
+      class="floating-label__label"
+    >
+      Floating label
+    </label>
+    <span
+      class="textbox"
+    >
+      <textarea
+        class="textbox__control"
+        type="text"
+      />
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`Storyshots ebay-textbox Floating label with multiline and opaque label 1`] = `
+<DocumentFragment>
+  <span
+    class="floating-label floating-label--opaque"
+  >
+    <label
+      class="floating-label__label"
+    >
+      Floating label
+    </label>
+    <span
+      class="textbox"
+    >
+      <textarea
+        class="textbox__control"
+        type="text"
+      />
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
 exports[`Storyshots ebay-textbox Floating label with placeholder, controlled 1`] = `
 <DocumentFragment>
   <p>

src/ebay-textbox/__tests__/index.stories.tsx

@@ -187,3 +187,18 @@ storiesOf('ebay-textbox', module)
 
         return <><Component/></>
     })
+    .add('Floating label with multiline', () => (
+        <EbayTextbox
+            onChange={action('textbox-changed')}
+            floatingLabel="Floating label"
+            multiline
+        />
+    ))
+    .add('Floating label with multiline and opaque label', () => (
+        <EbayTextbox
+            onChange={action('textbox-changed')}
+            floatingLabel="Floating label"
+            multiline
+            opaqueLabel
+        />
+    ))

src/ebay-textbox/textbox.tsx

@@ -38,6 +38,7 @@ export type EbayTextboxProps = {
     onButtonClick?: EbayKeyboardEventHandler<HTMLInputElement, TextboxEventProps> &
         EbayMouseEventHandler<HTMLInputElement, TextboxEventProps>;
     forwardedRef?: Ref<HTMLTextAreaElement | HTMLInputElement>;
+    opaqueLabel?: boolean;
 } & Omit<TextInputProps, 'onFocus' | 'onBlur' | 'onChange' | 'onKeyPress' | 'onKeyUp' | 'onKeyDown' | 'onInvalid'>;
 
 const EbayTextbox: FC<EbayTextboxProps> = ({
@@ -63,6 +64,7 @@ const EbayTextbox: FC<EbayTextboxProps> = ({
     floatingLabel,
     children,
     placeholder,
+    opaqueLabel,
     ...rest
 }) => {
     const [value, setValue] = useState(defaultValue)
@@ -84,6 +86,7 @@ const EbayTextbox: FC<EbayTextboxProps> = ({
         inputValue: controlledValue || inputValue,
         placeholder,
         invalid,
+        opaqueLabel,
         onMount: onFloatingLabelInit
     })