diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx index 710b2626..778a4b82 100644 --- a/src/components/Modal.tsx +++ b/src/components/Modal.tsx @@ -88,6 +88,8 @@ const ModalContentSC = styled.div<{ $scrollable: boolean $hasActions: boolean }>(({ theme, $scrollable, $hasActions }) => ({ + position: 'relative', + zIndex: 0, margin: theme.spacing.large, marginBottom: $hasActions ? 0 : theme.spacing.large, ...theme.partials.text.body1, diff --git a/src/stories/Modal.stories.tsx b/src/stories/Modal.stories.tsx index 8a29f9de..37fcb137 100644 --- a/src/stories/Modal.stories.tsx +++ b/src/stories/Modal.stories.tsx @@ -1,9 +1,9 @@ -import { Div, H3, P } from 'honorable' +import { Div, Flex, H3, P } from 'honorable' import { useState } from 'react' import styled from 'styled-components' -import { Button, Card, Code, FormField, Input, Modal } from '..' +import { Button, Card, Code, FormField, Input2, Modal, SearchIcon } from '..' import { SEVERITIES } from '../components/Modal' import { jsCode } from '../constants' @@ -104,26 +104,18 @@ function Template(args: any) { )} {args.form && ( - <> - - + + + - - - + + - - - + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus @@ -138,7 +130,10 @@ function Template(args: any) { interdum, placerat dolor. Pellentesque et semper massa. Aliquam nec nisl eu nibh fringilla vehicula. Suspendisse a purus quam.

- + + } /> + +
)} - +
- + - +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus