diff --git a/.changeset/nasty-camels-glow.md b/.changeset/nasty-camels-glow.md new file mode 100644 index 00000000..4a50e6f8 --- /dev/null +++ b/.changeset/nasty-camels-glow.md @@ -0,0 +1,6 @@ +--- +"@igloo-ui/dialog": patch +"@igloo-ui/modal": patch +--- + +Fixed the spacing for titles and buttons inside the Modal and Dialog components to match figma. diff --git a/packages/Dialog/src/dialog.scss b/packages/Dialog/src/dialog.scss index ad3fd8a6..0313b74f 100644 --- a/packages/Dialog/src/dialog.scss +++ b/packages/Dialog/src/dialog.scss @@ -41,12 +41,12 @@ --ids-dialog-content-padding: 0 var(--hop-space-inset-md) var(--hop-space-inset-md); --ids-dialog-sub-title-line-height: var(--hop-body-md-line-height); --ids-dialog-sub-title-color: var(--hop-neutral-text-weak); - --ids-dialog-sub-title-padding-top: var(--hop-space-stack-sm); + --ids-dialog-sub-title-padding-top: var(--hop-space-inset-md); --ids-dialog-close-margin: 0; --ids-dialog-close-align: flex-end; --ids-dialog-close-position: relative; --ids-dialog-close-padding-x: var(--hop-space-inset-xl); - --ids-dialog-buttons-margin: var(--hop-space-stack-lg) 0 calc(-1 * var(--hop-space-inset-md)); + --ids-dialog-buttons-margin: var(--hop-space-stack-xl) 0 calc(-1 * var(--hop-space-inset-sm)); --ids-dialog-button-margin: var(--hop-space-stack-sm) 0; --ids-dialog-button-width: 2rem; } @@ -70,7 +70,7 @@ --ids-dialog-close-margin: 0; --ids-dialog-close-position: absolute; --ids-dialog-content-padding: 0 var(--hop-space-inset-lg) var(--hop-space-inset-lg); - --ids-dialog-buttons-margin: var(--hop-space-stack-lg) calc(-1 * var(--hop-space-inset-sm)) 0; + --ids-dialog-buttons-margin: var(--hop-space-stack-xl) calc(-1 * var(--hop-space-inset-sm)) 0; --ids-dialog-button-margin: 0 var(--hop-space-inset-sm); --ids-dialog-header-font-size: var(--hop-heading-lg-font-size); --ids-dialog-header-line-height: var(--hop-heading-lg-line-height); diff --git a/packages/Modal/src/modal.scss b/packages/Modal/src/modal.scss index f5beca28..f036a1b9 100644 --- a/packages/Modal/src/modal.scss +++ b/packages/Modal/src/modal.scss @@ -11,6 +11,8 @@ --ids-modal-background: #{tokens.$samoyed}; --ids-modal-text: #{tokens.$black}; --ids-modal-padding: #{tokens.$space-3}; + --ids-modal-padding-with-header: #{tokens.$space-3}; + --ids-modal-padding-full-content: #{tokens.$space-3}; --ids-modal-index: #{tokens.$z-index-100}; --ids-modal-shadow: none; --ids-modal-radius: 0; @@ -47,6 +49,8 @@ --ids-modal-background: var(--hop-neutral-surface); --ids-modal-text: var(--hop-neutral-text); --ids-modal-padding: var(--hop-space-inset-md); + --ids-modal-padding-with-header: var(--hop-space-inset-md); + --ids-modal-padding-full-content: var(--hop-space-inset-md); --ids-modal-index: 100; --ids-modal-shadow: none; --ids-modal-radius: 0; @@ -103,6 +107,7 @@ --ids-modal-close-margin: -#{tokens.$space-2} -#{tokens.$space-2} #{tokens.$space-0} #{tokens.$space-0}; --ids-modal-close-align: flex-end; --ids-modal-padding: #{tokens.$space-4}; + --ids-modal-padding-with-header: #{tokens.$space-4}; --ids-modal-full-content-display: none; } @@ -130,6 +135,7 @@ --ids-modal-close-margin: var(--hop-space-inset-lg); --ids-modal-close-align: flex-end; --ids-modal-padding: var(--hop-space-inset-lg); + --ids-modal-padding-with-header: var(--hop-space-inset-md) var(--hop-space-inset-lg) var(--hop-space-inset-lg); --ids-modal-full-content-display: none; } } @@ -275,8 +281,13 @@ .ids-modal__content { padding: var(--ids-modal-padding); + .ids-modal--with-title &, + .ids-modal--closable & { + padding: var(--ids-modal-padding-with-header); + } + .ids-modal--full-content & { - --ids-modal-padding: #{tokens.$space-3}; + padding: var(--ids-modal-padding-full-content); } }