Skip to content

Commit

Permalink
refactor(dialog): header/footer overflow and edge cases
Browse files Browse the repository at this point in the history 
the header and the footer should now be flexible enough to handle having
no title, no additional header content, no buttonGroup, no additional
footer content, dismissible vs. no dismissible, inline sizing for all
text components in header/footer
  • Loading branch information
@marissahuysentruyt
marissahuysentruyt committed Jul 8, 2024
1 parent eff80b9 commit d8cd82f
Showing 1 changed file with 39 additions and 41 deletions.
80 changes: 39 additions & 41 deletions components/dialog/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,7 @@ governing permissions and limitations under the License.
inline-size: 100%;
}

/* the dialog's heading/title */
.spectrum-Dialog-heading {
grid-area: heading;

Expand All @@ -135,6 +136,9 @@ governing permissions and limitations under the License.
color: var(--mod-standard-dialog-heading-text-color, var(--spectrum-standard-dialog-heading-text-color));
outline: none; /* Hide focus outline */

/* prevent the heading from moving out of the header element if additional content is long */
min-inline-size: 50%;

&.spectrum-Dialog-heading--noHeader {
grid-area: heading-start / heading-start / header-end / header-end;
padding-inline-end: 0;
Expand All @@ -146,24 +150,25 @@ governing permissions and limitations under the License.
}
}

/* the container for the heading and any additional header content */
.spectrum-Dialog-header {
grid-area: header;
display: flex;
inline-size: fit-content;
max-inline-size: 100%;
margin-block-end: var(--spectrum-standard-dialog-spacing-title-to-description);

/* Without this, buttons will be stretched */
align-items: flex-start;
justify-content: flex-end;
justify-content: flex-start;

box-sizing: border-box;

outline: none; /* Hide focus outline around header */

.spectrum-Body {
/* additional header content should grow/shrink with the text. */
min-inline-size: fit-content;
> .spectrum-Body {
/* additional header content should grow/shrink with the text, but only until it takes up half of the footer */
inline-size: fit-content;
max-inline-size: 50%;

/* Remove the default margin on the Typography in the header */
margin-block: 0;
Expand Down Expand Up @@ -197,6 +202,7 @@ governing permissions and limitations under the License.

.spectrum-Dialog-footer {
grid-area: footer;
max-inline-size: 100%;

/* this padding isn't built into the grid because it disappears with this footer */
padding-block-start: var(--mod-standard-dialog-spacing-description-to-footer, var(--spectrum-standard-dialog-spacing-description-to-footer));
Expand All @@ -214,31 +220,23 @@ governing permissions and limitations under the License.

.spectrum-Body {
/* To keep the footer text from wrapping prematurely */
min-inline-size: fit-content;
inline-size: fit-content;
max-inline-size: 50%;

/* Remove the default margin on the Typography in the footer content */
margin-block-end: 0;
}
}

.spectrum-Dialog-buttonGroup--noFooter {
padding-block-start: var(--mod-standard-dialog-spacing-description-to-footer, var(--spectrum-standard-dialog-spacing-description-to-footer));
}

.spectrum-Dialog-buttonGroup {
grid-area: buttonGroup;

/* this padding should be safe as button group is always end aligned */
padding-inline-start: var(--mod-standard-dialog-spacing-footer-to-button-group, var(--spectrum-standard-dialog-spacing-footer-to-button-group));
}

&.spectrum-Dialog-buttonGroup--noFooter {
grid-area: footer-start / footer-start / buttonGroup-end / buttonGroup-end;
}

/* overrides ButtonGroup's justify-content: normal */
.spectrum-ButtonGroup {
justify-content: flex-end;
}
.spectrum-Dialog-buttonGroup--noFooter {
padding-block-start: var(--mod-standard-dialog-spacing-description-to-footer, var(--spectrum-standard-dialog-spacing-description-to-footer));
}

/* Dismissible Dialog (with close button) */
Expand All @@ -248,8 +246,7 @@ governing permissions and limitations under the License.
auto
1fr
auto
minmax(0, auto)
minmax(0, calc(var(--spectrum-standard-dialog-spacing-edge-to-content) - var(--spectrum-standard-dialog-spacing-edge-to-close-button)))
minmax(0, var(--spectrum-standard-dialog-spacing-edge-to-header-content-inline-end))
var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding));
grid-template-rows:
auto
Expand All @@ -259,19 +256,19 @@ governing permissions and limitations under the License.
auto
var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding));
grid-template-areas:
"hero hero hero hero hero hero hero"
". . . . . closeButton closeButton"
". heading header header typeIcon closeButton closeButton"
". content content content content content ."
". footer footer . . . ."
". . . . . . .";

.spectrum-Dialog-header {
margin-inline-end: var(--spectrum-standard-dialog-spacing-edge-to-header-content-inline-end);
}
"hero hero hero hero hero hero"
". . . . closeButton closeButton"
". heading header header closeButton closeButton"
". content content content content ."
". footer footer footer footer ."
". . . . . .";

.spectrum-Dialog-footer {
grid-area: footer;

> .spectrum-Body {
max-inline-size: 100%;
}
}
}

Expand Down Expand Up @@ -336,11 +333,6 @@ governing permissions and limitations under the License.
max-block-size: none;
}

.spectrum-Dialog-footer,
.spectrum-Dialog-buttonGroup .spectrum-Dialog-buttonGroup--noFooter {
padding-block-start: 0;
}

.spectrum-Dialog-footer {
display: none;
}
Expand Down Expand Up @@ -401,12 +393,19 @@ governing permissions and limitations under the License.
". heading heading heading heading closeButton closeButton"
". header header header header header ."
". content content content content content ."
". footer footer . . . ."
". footer footer footer footer footer ."
". . . . . . .";
}

.spectrum-Dialog .spectrum-Dialog-header {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;

> .spectrum-Body {
max-inline-size: unset;
}
}

.spectrum-Dialog--fullscreen,
Expand All @@ -432,12 +431,11 @@ governing permissions and limitations under the License.
". buttonGroup ."
". . .";
}
}

.spectrum-Dialog-header {
display: flex;
flex-direction: column;
align-items: flex-start;
.spectrum-Dialog-buttonGroup > .spectrum-ButtonGroup {
/* to override ButtonGroup's justify-content: normal and handle not having footer content */
justify-content: flex-end;
}
}

.spectrum-Dialog-heading {
Expand Down

0 comments on commit d8cd82f

Please sign in to comment.