```
## 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' && (