Merge branch 'main' into noPreselectedOption

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebay/ui-core-react",
-  "version": "5.0.0",
+  "version": "5.2.0",
   "description": "Skin components build off React",
   "publishConfig": {
     "registry": "https://registry.npmjs.org"

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-carousel/__tests__/__snapshots__/index.spec.tsx.snap

@@ -15,12 +15,12 @@ exports[`Storyshots ebay-carousel Continuous 1`] = `
       >
         <svg
           aria-hidden="true"
-          class="icon icon--carousel-prev icon icon--chevron-left-24"
+          class="icon icon--carousel-prev icon icon--chevron-left-12"
           focusable="false"
           xmlns="http://www.w3.org/2000/svg"
         >
           <use
-            xlink:href="#icon-chevron-left-24"
+            xlink:href="#icon-chevron-left-12"
           />
         </svg>
       </button>
@@ -110,12 +110,12 @@ exports[`Storyshots ebay-carousel Continuous 1`] = `
       >
         <svg
           aria-hidden="true"
-          class="icon icon--carousel-next icon icon--chevron-right-24"
+          class="icon icon--carousel-next icon icon--chevron-right-12"
           focusable="false"
           xmlns="http://www.w3.org/2000/svg"
         >
           <use
-            xlink:href="#icon-chevron-right-24"
+            xlink:href="#icon-chevron-right-12"
           />
         </svg>
       </button>
@@ -139,12 +139,12 @@ exports[`Storyshots ebay-carousel Items Per Slide 1`] = `
       >
         <svg
           aria-hidden="true"
-          class="icon icon--carousel-prev icon icon--chevron-left-24"
+          class="icon icon--carousel-prev icon icon--chevron-left-12"
           focusable="false"
           xmlns="http://www.w3.org/2000/svg"
         >
           <use
-            xlink:href="#icon-chevron-left-24"
+            xlink:href="#icon-chevron-left-12"
           />
         </svg>
       </button>
@@ -234,12 +234,12 @@ exports[`Storyshots ebay-carousel Items Per Slide 1`] = `
       >
         <svg
           aria-hidden="true"
-          class="icon icon--carousel-next icon icon--chevron-right-24"
+          class="icon icon--carousel-next icon icon--chevron-right-12"
           focusable="false"
           xmlns="http://www.w3.org/2000/svg"
         >
           <use
-            xlink:href="#icon-chevron-right-24"
+            xlink:href="#icon-chevron-right-12"
           />
         </svg>
       </button>

src/ebay-carousel/carousel-control-button.tsx

@@ -12,8 +12,8 @@ type CarouselControlProps = {
 }
 
 const icon: Record<CarouselControlType, Icon> = {
-    prev: 'chevronLeft24',
-    next: 'chevronRight24'
+    prev: 'chevronLeft12',
+    next: 'chevronRight12'
 }
 
 const typeToDirection: Record<CarouselControlType, MovementDirection> = {

src/ebay-dialog-base/components/dialog-close-button.tsx

@@ -1,9 +1,9 @@
 import React, { FC, ReactNode } from 'react'
 
-type EbayDialogFooterProps = {
+type EbayDialogCloseButtonProps = {
     children?: ReactNode;
 }
 
-const EbayDialogCloseButton: FC = ({ children }: EbayDialogFooterProps) => <>{children}</>
+const EbayDialogCloseButton: FC = ({ children }: EbayDialogCloseButtonProps) => <>{children}</>
 
 export default EbayDialogCloseButton

src/ebay-dialog-base/components/dialog-previous-button.tsx

@@ -0,0 +1,23 @@
+import React, { FC, KeyboardEventHandler, MouseEventHandler } from 'react'
+import classNames from 'classnames'
+import { EbayIconButton } from '../../ebay-icon-button'
+import { Icon } from '../../ebay-icon'
+
+type EbayDialogPreviousButtonProps = {
+    icon?: Icon;
+    className?: string
+    onClick?: MouseEventHandler & KeyboardEventHandler
+}
+
+const EbayDialogPreviousButton: FC<EbayDialogPreviousButtonProps> = ({
+    className,
+    icon,
+    ...rest
+}: EbayDialogPreviousButtonProps) => (
+    <EbayIconButton
+        {...rest}
+        icon={icon || 'chevronLeft16'}
+        className={classNames(className, 'lightbox-dialog__prev')} />
+)
+
+export default EbayDialogPreviousButton

src/ebay-dialog-base/components/dialogBase.tsx

@@ -47,6 +47,7 @@ export interface DialogBaseProps<T> extends HTMLProps<T> {
     mainId?: string;
     ignoreEscape?: boolean;
     closeButton?: ReactElement;
+    previousButton?: ReactElement;
     focus?: RefObject<HTMLAnchorElement & HTMLButtonElement>;
     animated?: boolean;
     transitionElement?: TransitionElement;
@@ -74,6 +75,7 @@ export const DialogBase: FC<DialogBaseProps<HTMLElement>> = ({
     onBackgroundClick = () => {},
     ignoreEscape,
     closeButton,
+    previousButton,
     isModal,
     role = 'dialog',
     focus,
@@ -198,6 +200,7 @@ export const DialogBase: FC<DialogBaseProps<HTMLElement>> = ({
                 {top}
                 {dialogHeader && (
                     <div className={`${classPrefix}__header`}>
+                        {previousButton}
                         {buttonPosition === 'right' && dialogHeader}
                         {buttonPosition !== 'bottom' && closeButtonContent}
                         {(buttonPosition === 'left' || buttonPosition === 'hidden') && dialogHeader}

src/ebay-dialog-base/dialog-base-with-state.tsx

@@ -1,7 +1,13 @@
 import React, { Children, ReactElement } from 'react'
 import { RemoveScroll } from 'react-remove-scroll'
 import { DialogBase, DialogBaseProps } from './components/dialogBase'
-import { EbayDialogCloseButton, EbayDialogFooter, EbayDialogHeader, EbayDialogActions } from './index'
+import {
+    EbayDialogCloseButton,
+    EbayDialogFooter,
+    EbayDialogHeader,
+    EbayDialogActions,
+    EbayDialogPreviousButton
+} from './index'
 
 export const DialogBaseWithState = ({
     isModal,
@@ -17,8 +23,15 @@ export const DialogBaseWithState = ({
     const footer = childrenArray.find((child: ReactElement) => child.type === EbayDialogFooter)
     const actions = childrenArray.find((child: ReactElement) => child.type === EbayDialogActions)
     const closeButton = childrenArray.find((child: ReactElement) => child.type === EbayDialogCloseButton)
+    const previousButton = childrenArray.find((child: ReactElement) => child.type === EbayDialogPreviousButton)
     const content = childrenArray.filter((child: ReactElement) =>
-        ![EbayDialogHeader, EbayDialogFooter, EbayDialogCloseButton, EbayDialogActions].some(c => c === child.type))
+        ![
+            EbayDialogHeader,
+            EbayDialogFooter,
+            EbayDialogCloseButton,
+            EbayDialogActions,
+            EbayDialogPreviousButton
+        ].some(c => c === child.type))
 
     const dialogBase = (
         <DialogBase
@@ -29,6 +42,7 @@ export const DialogBaseWithState = ({
             footer={footer}
             actions={actions}
             closeButton={closeButton}
+            previousButton={previousButton}
             animated={animated}
         >
             {content}

src/ebay-dialog-base/index.ts

@@ -4,3 +4,4 @@ export { default as EbayDialogCloseButton } from './components/dialog-close-butt
 export { WindowType, DialogBaseProps } from './components/dialogBase'
 export { default as DialogBaseWithState } from './dialog-base-with-state'
 export { default as EbayDialogActions } from './components/dialog-actions'
+export { default as EbayDialogPreviousButton } from './components/dialog-previous-button'