diff --git a/src/common/floating-label-utils/hooks.tsx b/src/common/floating-label-utils/hooks.tsx index b0c1fecc..0e73825b 100644 --- a/src/common/floating-label-utils/hooks.tsx +++ b/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}, []) diff --git a/src/ebay-textbox/README.md b/src/ebay-textbox/README.md index 05858a46..b85df051 100644 --- a/src/ebay-textbox/README.md +++ b/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. | diff --git a/src/ebay-textbox/__tests__/__snapshots__/index.spec.tsx.snap b/src/ebay-textbox/__tests__/__snapshots__/index.spec.tsx.snap index 7f0d5cf4..39db5a34 100644 --- a/src/ebay-textbox/__tests__/__snapshots__/index.spec.tsx.snap +++ b/src/ebay-textbox/__tests__/__snapshots__/index.spec.tsx.snap @@ -151,6 +151,50 @@ exports[`Storyshots ebay-textbox Floating label with autofocus 1`] = ` `; +exports[`Storyshots ebay-textbox Floating label with multiline 1`] = ` + + + + +