Merge branch 'main' into noPreselectedOption

eBay · Oct 12, 2023 · 21e8ced · 21e8ced
2 parents cc05413 + 5548893
commit 21e8ced
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 25 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ebay/ui-core-react",
-  "version": "5.2.1",
+  "version": "5.3.0",
   "description": "Skin components build off React",
   "publishConfig": {
     "registry": "https://registry.npmjs.org"

diff --git a/src/ebay-dialog-base/README.md b/src/ebay-dialog-base/README.md
@@ -4,33 +4,34 @@
 
 ```react
 <DialogBase
-    open
-    a11yClosetext = "Close DialogBase"
-    onCloseBtnClick={ handleCloseBtnClick }>
-
-        <h1>Hello World</h1>
-
+  open
+  a11yCloseText="Close Dialog Base"
+  onCloseBtnClick={handleCloseBtnClick}
+>
+  <h1>Hello World</h1>
 </DialogBase>
 ```
 
 ## Attributes
 
-| Name             | Type                      | Stateful | Required | Description                                                                                  |
-|------------------|---------------------------|----------|----------|----------------------------------------------------------------------------------------------|
-| `baseEl`         | string                    | No       | No       | ---  div' , 'span', 'aside'                                                                  |
-| `open`           | Boolean                   | Yes      | No       | Whether drawer is open.                                                                      |
-| `classPrefix`    | drawer or toast or dialog | No       | No       | "" (default) / modifies the base prefix for all  classes in the component                    |
-| `windowClass`    | String                    | No       | No       | "" (default) / modifies the base prefix for all Skin classes in the component                |
-| `header`         | String                    | No       | No       | element placeholder                                                                          |
-| `footer`         | String                    | No       | No       | element placeholder                                                                          |
-| `isModal`        | Boolean                   | No       | No       | Whether drawer is model.                                                                     |
-| `top`            | ---                       | ---      | ---      | ---                                                                                          |
-| `buttonPosition` | string                    | ---      | ---      | top or right or bottom or left                                                               |
-| `a11yCloseText`  | String                    | No       | No*      | A11y text for close button and mask. Required only when close button exists.                 |
-| `animated`       | Boolean                   | Yes      | No       | Renders the dialog with an animation. Note that the dialog will always be present in the DOM |
+| Name               | Type                        | Stateful | Required | Description                                                                                  |
+| ------------------ | --------------------------- | -------- | -------- | -------------------------------------------------------------------------------------------- |
+| `baseEl`           | String                      | No       | No       | 'div', 'span', 'aside'                                                                       |
+| `open`             | Boolean                     | Yes      | No       | Whether drawer is open.                                                                      |
+| `classPrefix`      | 'drawer', 'toast', 'dialog' | No       | No       | "" (default) / modifies the base prefix for all classes in the component                     |
+| `windowClass`      | String                      | No       | No       | "" (default) / modifies the base prefix for all Skin classes in the component                |
+| `header`           | String                      | No       | No       | element placeholder                                                                          |
+| `footer`           | String                      | No       | No       | element placeholder                                                                          |
+| `isModal`          | Boolean                     | No       | No       | Whether drawer is model.                                                                     |
+| `top`              | ---                         | ---      | ---      | ---                                                                                          |
+| `buttonPosition`   | String                      | ---      | ---      | top or right or bottom or left                                                               |
+| `a11yCloseText`    | String                      | No       | No\*     | A11y text for close button and mask. Required only when close button exists.                 |
+| `animated`         | Boolean                     | Yes      | No       | Renders the dialog with an animation. Note that the dialog will always be present in the DOM |
+| `closeButtonClass` | String                      | No       | No       | Sets custom className on a close button element                                              |
 
 ## Events
 
-Event | Data | Description
-`onCloseBtnClick` | --- | --- | --- | ---
-`OnBackgroundClick` | --- | --- | --- | ---
+| Event               | Data | Description |
+| ------------------- | ---- | ----------- |
+| `onCloseBtnClick`   | ---  | ---         |
+| `onBackgroundClick` | ---  | ---         |
diff --git a/src/ebay-dialog-base/__tests__/index.spec.tsx b/src/ebay-dialog-base/__tests__/index.spec.tsx
@@ -45,14 +45,17 @@ describe('DialogBase', () => {
         let wrapper: RenderResult
 
         beforeEach(() => {
-            wrapper = render(<HeaderFooterDialog classPrefix="drawer-dialog" className="custom-class" open />);
+            wrapper = render(<HeaderFooterDialog classPrefix="drawer-dialog" closeButtonClass="closeButtonClass" className="custom-class" open />);
         })
         it('should render a DialogBase', () => {
             expect(wrapper.container.querySelector('.custom-class')).toBeInTheDocument();
         });
         it('should render a DialogBase with custom classNames', () => {
             expect(wrapper.container.firstChild).toHaveClass('custom-class');
         });
+        it('should render a close button with a custom className', () => {
+            expect(wrapper.container.querySelector(".closeButtonClass")).toBeInTheDocument();
+        });
         describe('click events', () => {
             let spyCloseBtnClick = jest.fn();
             let spyBackgroundClick = jest.fn();

diff --git a/src/ebay-dialog-base/components/dialogBase.tsx b/src/ebay-dialog-base/components/dialogBase.tsx
@@ -50,6 +50,7 @@ export interface DialogBaseProps<T> extends HTMLProps<T> {
     previousButton?: ReactElement;
     focus?: RefObject<HTMLAnchorElement & HTMLButtonElement>;
     animated?: boolean;
+    closeButtonClass?: string;
     transitionElement?: TransitionElement;
     children?: ReactNode;
 }
@@ -81,6 +82,7 @@ export const DialogBase: FC<DialogBaseProps<HTMLElement>> = ({
     focus,
     transitionElement,
     animated,
+    closeButtonClass,
     ...props
 }) => {
     const dialogRef = useRef(null)
@@ -167,7 +169,7 @@ export const DialogBase: FC<DialogBaseProps<HTMLElement>> = ({
     const closeButtonContent = buttonPosition !== 'hidden' && (
         <button
             ref={closeButtonRef}
-            className={classNames(`icon-btn`, `${classPrefix}__close`, {
+            className={classNames(`icon-btn`, closeButtonClass, `${classPrefix}__close`, {
                 'icon-btn--transparent': classPrefix === `toast-dialog`
             })}
             type="button"