diff --git a/packages/eds-core-react/src/components/SideSheet/SideSheet.test.tsx b/packages/eds-core-react/src/components/SideSheet/SideSheet.test.tsx
index 8613633d13..d3491bc53d 100644
--- a/packages/eds-core-react/src/components/SideSheet/SideSheet.test.tsx
+++ b/packages/eds-core-react/src/components/SideSheet/SideSheet.test.tsx
@@ -11,28 +11,32 @@ const StyledSidesheet = styled(SideSheet)`
describe('SideSheet', () => {
it('Matches snapshot', () => {
- const { asFragment } = render()
+ const { asFragment } = render(
+ ,
+ )
expect(asFragment()).toMatchSnapshot()
})
it('Should pass a11y test', async () => {
- const { container } = render()
+ const { container } = render()
await act(async () => {
const results = await axe(container)
expect(results).toHaveNoViolations()
})
})
it('Has correct width', () => {
- render()
+ render(
+ ,
+ )
expect(screen.getByTestId('sidesheet')).toHaveStyleRule('width', '480px')
})
it('Has provided necessary props', () => {
const title = 'Title'
const variant = 'large'
- render()
+ render()
expect(screen.getByText(title)).toBeDefined()
})
it('Can extend the css for the component', () => {
- render()
+ render()
const sidesheet = screen.getByTestId('sidesheet')
expect(sidesheet).toHaveStyleRule('position', 'relative')
expect(sidesheet).toHaveStyleRule('height', '100px')
diff --git a/packages/eds-core-react/src/components/SideSheet/SideSheet.tsx b/packages/eds-core-react/src/components/SideSheet/SideSheet.tsx
index 4e6f6242b5..a6d194b25b 100644
--- a/packages/eds-core-react/src/components/SideSheet/SideSheet.tsx
+++ b/packages/eds-core-react/src/components/SideSheet/SideSheet.tsx
@@ -25,7 +25,7 @@ export type SideSheetProps = {
/** OnClick function (close) */
onClose?: (Event) => void
/** Open / close Side Sheet */
- open?: boolean
+ open: boolean
/** Override width of Side Sheet */
width?: string
} & HTMLAttributes
@@ -52,19 +52,14 @@ const Header = styled.div`
align-items: center;
padding-bottom: 24px;
padding-right: 10px;
+ & > button {
+ margin-left: auto;
+ }
`
export const SideSheet = forwardRef(
function SideSheet(
- {
- variant = 'medium',
- width,
- title = '',
- children,
- open = true,
- onClose,
- ...rest
- },
+ { variant = 'medium', width, title, children, open, onClose, ...rest },
ref,
) {
const props = {
@@ -73,21 +68,24 @@ export const SideSheet = forwardRef(
width: width || variants[variant],
}
- // Controller must set open={false} when pressing the close button
return (
open && (
-
+ {(title || onClose) && (
+
+ {title && {title}}
+ {onClose && (
+
+ )}
+
+ )}
{children}
)
diff --git a/packages/eds-core-react/src/components/SideSheet/__snapshots__/SideSheet.test.tsx.snap b/packages/eds-core-react/src/components/SideSheet/__snapshots__/SideSheet.test.tsx.snap
index f430452490..cf1311327d 100644
--- a/packages/eds-core-react/src/components/SideSheet/__snapshots__/SideSheet.test.tsx.snap
+++ b/packages/eds-core-react/src/components/SideSheet/__snapshots__/SideSheet.test.tsx.snap
@@ -141,6 +141,10 @@ exports[`SideSheet Matches snapshot 1`] = `
padding-right: 10px;
}
+.c1>button {
+ margin-left: auto;
+}
+
@media (hover:hover) and (pointer:fine) {
.c3:hover {
background: var(--eds_interactive_primary__hover_alt, rgba(222, 237, 238, 1));