feat(Modal)!: remove top-level sub-component(s) (#1689)

chanzuckerberg · Jul 15, 2023 · d4509eb · d4509eb
1 parent 302297c
commit d4509eb
Show file tree

Hide file tree

Showing 17 changed files with 380 additions and 420 deletions.
diff --git a/src/components/Modal/Modal.module.css b/src/components/Modal/Modal.module.css
@@ -1,3 +1,5 @@
+@import '../../design-tokens/mixins.css';
+
 /*------------------------------------*\
     # MODAL
 \*------------------------------------*/
@@ -160,3 +162,153 @@
 .modal__close-icon--brand {
   color: var(--eds-theme-color-icon-neutral-default-inverse);
 }
+
+/*------------------------------------*\
+    # MODAL BODY
+\*------------------------------------*/
+
+/**
+ * The body of the modal
+ */
+ .modal-body {
+  padding: var(--eds-size-4) var(--modal-horizontal-padding);
+  flex: 1;
+}
+
+.modal-body:focus-visible {
+  @mixin focusInside;
+}
+
+@supports not selector(:focus-visible) {
+  .modal-body:focus {
+    @mixin focusInside;
+  }
+}
+
+/*------------------------------------*\
+    # MODAL FOOTER
+\*------------------------------------*/
+
+/**
+ * Footer for the modal.
+ */
+ .modal-footer {
+  padding-top: var(--eds-size-2-and-half);
+  padding-bottom: var(--eds-size-2-and-half);
+  padding-left: var(--modal-horizontal-padding);
+  padding-right: var(--eds-size-3);
+
+  width: 100%;
+  background-color: var(--eds-theme-color-background-neutral-default);
+
+  border-bottom-left-radius: var(--eds-border-radius-lg);
+  border-bottom-right-radius: var(--eds-border-radius-lg);
+
+  z-index: var(--eds-z-index-100);
+}
+
+/**
+ * Sticky variant of the footer.
+ * Used when the modal variant is scrollable.
+ */
+.modal-footer--sticky {
+  position: sticky;
+  bottom: 0;
+  box-shadow: var(--eds-box-shadow-xl);
+}
+
+/*------------------------------------*\
+    # MODAL HEADER
+\*------------------------------------*/
+
+/**
+ * Header for the modal.
+ */
+ .modal-header {
+  width: 100%;
+  background-color: var(--eds-theme-color-background-neutral-default);
+  padding-top: var(--eds-size-7);
+  padding-left: var(--modal-horizontal-padding);
+  padding-right: var(--modal-horizontal-padding);
+}
+
+/**
+ * Brand variant for the header.
+ */
+.modal-header--brand {
+  display: flex;
+  flex-direction: column;
+
+  min-height: 10.75rem;
+
+  @media all and (min-height: $eds-bp-sm-2) {
+    min-height: 19.75rem;
+  }
+  @media all and (min-width: $eds-bp-md) and (min-height: $eds-bp-sm-2) {
+    flex-direction: row;
+  }
+
+  flex-shrink: 0;
+
+  color: var(--eds-theme-color-text-neutral-default-inverse);
+  background-color: var(--eds-theme-color-modal-brand-header-background);
+  h2 {
+    /**
+     * Brand specific font for the title.
+     */
+    flex: 1;
+    font: var(--eds-theme-typography-headline-secondary-lg);
+
+    @media all and (min-width: $eds-bp-sm-2) {
+      margin-bottom: var(--eds-size-3);
+    }
+    @media all and (min-width: $eds-bp-xl) {
+      font: var(--eds-theme-typography-headline-secondary-md);
+
+    }
+  }
+}
+
+/**
+ * Specific asset placement for brand.
+ */
+.modal-header__brand-asset {
+  align-self: flex-end;
+  position: relative;
+  top: var(--eds-size-2);
+  left: var(--eds-size-2);
+
+  width: 8.5rem;
+  height: 8.5rem;
+
+  /* For mobile landscape orientation. */
+  @media all and (min-width: $eds-bp-sm-2) {
+    display: none;
+  }
+
+  @media all and (min-width: $eds-bp-md) and (min-height: $eds-bp-sm-2) {
+    display: block;
+    width: 14rem;
+    height: 14rem;
+    left: var(--eds-size-3);
+  }
+
+  @media all and (min-width: $eds-bp-xl) {
+    width: 16.5rem;
+    height: 16.5rem;
+    left: 0;
+  }
+}
+
+/*------------------------------------*\
+    # MODAL STEPPER
+\*------------------------------------*/
+
+/**
+ * Stepper that resides in the modal footer.
+ */
+ .modal-stepper {
+  color: var(--eds-theme-color-icon-neutral-default);
+  display: flex;
+  gap: var(--eds-size-1-and-half);
+}