diff --git a/package.json b/package.json index 16d84231..77dc4cdb 100644 --- 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 index af4174f6..ac077300 100644 --- a/src/ebay-dialog-base/README.md +++ b/src/ebay-dialog-base/README.md @@ -4,33 +4,34 @@ ```react - -

Hello World

- + open + a11yCloseText="Close Dialog Base" + onCloseBtnClick={handleCloseBtnClick} +> +

Hello World

``` ## 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 index 29e5d569..0368452c 100644 --- a/src/ebay-dialog-base/__tests__/index.spec.tsx +++ b/src/ebay-dialog-base/__tests__/index.spec.tsx @@ -45,7 +45,7 @@ describe('DialogBase', () => { let wrapper: RenderResult beforeEach(() => { - wrapper = render(); + wrapper = render(); }) it('should render a DialogBase', () => { expect(wrapper.container.querySelector('.custom-class')).toBeInTheDocument(); @@ -53,6 +53,9 @@ describe('DialogBase', () => { 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 index 661bf3c2..27ee857f 100644 --- a/src/ebay-dialog-base/components/dialogBase.tsx +++ b/src/ebay-dialog-base/components/dialogBase.tsx @@ -50,6 +50,7 @@ export interface DialogBaseProps extends HTMLProps { previousButton?: ReactElement; focus?: RefObject; animated?: boolean; + closeButtonClass?: string; transitionElement?: TransitionElement; children?: ReactNode; } @@ -81,6 +82,7 @@ export const DialogBase: FC> = ({ focus, transitionElement, animated, + closeButtonClass, ...props }) => { const dialogRef = useRef(null) @@ -167,7 +169,7 @@ export const DialogBase: FC> = ({ const closeButtonContent = buttonPosition !== 'hidden' && (