diff --git a/.changeset/nine-candles-share.md b/.changeset/nine-candles-share.md new file mode 100644 index 000000000..140bfa6d8 --- /dev/null +++ b/.changeset/nine-candles-share.md @@ -0,0 +1,5 @@ +--- +"@cube-dev/ui-kit": patch +--- + +Condense the UI of Dialog component. diff --git a/src/components/overlays/Dialog/Dialog.tsx b/src/components/overlays/Dialog/Dialog.tsx index 90c1ad0fa..2702b901e 100644 --- a/src/components/overlays/Dialog/Dialog.tsx +++ b/src/components/overlays/Dialog/Dialog.tsx @@ -23,7 +23,7 @@ import { tasty, } from '../../../tasty'; import { mergeProps, SlotProvider } from '../../../utils/react'; -import { Button } from '../../actions'; +import { Button, ItemButton } from '../../actions'; import { useOpenTransitionContext } from '../Modal/OpenTransition'; import { useDialogContext } from './context'; @@ -73,45 +73,35 @@ const DialogElement = tasty({ '[data-type="panel"]': 'auto', }, '$dialog-title-padding-v': { - '': '2x', + '': '1.5x', '[data-type="popover"]': '1x', }, '$dialog-content-padding-v': { - '': '2x', - '[data-type="popover"]': '2x', + '': '1.5x', + '[data-type="popover"]': '1x', }, '$dialog-padding-h': { - '': '2x', - '[data-type="popover"]': '2x', + '': '1.5x', + '[data-type="popover"]': '1x', }, '$dialog-footer-v': { - '': '2x', + '': '1.5x', + '[data-type="popover"]': '1x', + }, + '$dialog-content-gap': { + '': '1.5x', '[data-type="popover"]': '1x', }, - '$dialog-content-gap': '2x', }, }); -const CloseButton = tasty(Button, { +const CloseButton = tasty(ItemButton, { qa: 'ModalCloseButton', type: 'neutral', - size: 'large', styles: { - display: 'flex', position: 'absolute', top: '1x', right: '1x', - placeContent: 'center', - fill: { - '': '#dark.0', - hovered: '#dark.04', - pressed: '#dark.05', - }, - color: { - '': '#dark-02', - hovered: '#dark-02', - pressed: '#purple', - }, }, }); @@ -261,7 +251,7 @@ const DialogContent = forwardRef(function DialogContent( display: 'flex', flow: 'row', gap: '1x', - placeItems: 'baseline stretch', + placeItems: 'center stretch', placeContent: 'space-between', padding: `$dialog-title-padding-v ${ isDismissable ? '($dialog-padding-h + 4x)' : '$dialog-padding-h' @@ -300,7 +290,7 @@ const DialogContent = forwardRef(function DialogContent( {isDismissable && ( } + icon={closeIcon || } label={formatMessage('dismiss')} onPress={() => onDismiss && onDismiss()} />