fix(dialog): remove pfe dependency (#1392)

* fix(dialog): remove pfe dependency * fix(dialog): css * fix: restore icon color
RedHat-UX · Jan 8, 2024 · 8c5559c · 8c5559c
1 parent 27c0b18
commit 8c5559c
Show file tree

Hide file tree

Showing 3 changed files with 406 additions and 17 deletions.
diff --git a/.changeset/itchy-lands-design.md b/.changeset/itchy-lands-design.md
@@ -0,0 +1,5 @@
+---
+"@rhds/elements": patch
+---
+`<rh-dialog>`: remove the dependency on `@patternfly/elements`.
+*NOTE*: The `open`, `close`, and `cancel` events are no longer the same object constructor type as `<pf-modal>`, so `instanceof` checks may fail.
diff --git a/elements/rh-dialog/rh-dialog.css b/elements/rh-dialog/rh-dialog.css
@@ -1,36 +1,152 @@
-#rhds-wrapper {
-  display: contents;
-  font-family: "Red Hat Text", RedHatText, Overpass, Helvetica, sans-serif;
+:host {
+  display: block;
+  position: relative;
 
-  --offset: var(--rh-space-md, 8px);
-  --offset-top: var(--offset);
-  --offset-right: var(--offset);
+  --_spacer-align-top: var(--rh-space-md, 8px);
+  --_height-offset: min(var(--_spacer-align-top), var(--rh-space-3xl, 48px));
 }
 
-header ::slotted(:is(h1, h2, h3, h4, h5, h6)[slot="header"]) {
-  font-family: "Red Hat Display", RedHatDisplay, Overpass, Helvetica, sans-serif;
+[hidden] {
+  display: none !important;
+}
+
+section {
+  display: flex;
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+  align-items: center;
+  justify-content: center;
+  z-index: 500;
+}
+
+#container {
+  position: relative;
+  max-height: inherit;
+}
+
+[part="overlay"] {
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+  background-color: rgba(3, 3, 3, 0.62);
 }
 
 [part="dialog"] {
+  position: relative;
+  margin: 0 auto;
+  width: var(--_box-width, calc(100% - var(--rh-space-2xl, 32px)));
+  max-height: var(--_box-max-height, calc(100% - var(--rh-space-3xl, 48px)));
+  box-shadow:
+    0 1rem 2rem 0 rgba(3, 3, 3, 0.16),
+    0 0 0.5rem 0 rgba(3, 3, 3, 0.1);
+  padding: var(--rh-space-xl, 24px);
+  margin-inline: var(--rh-space-lg, 16px);
   background-color: var(--rh-color-surface-lightest, #ffffff);
   max-width: min(90%, 1140px);
   border-radius: var(--rh-border-radius-default, 3px);
   color: var(--rh-color-text-primary-on-light, #151515);
   font-family: inherit;
 }
 
+:host([width]) [part="dialog"],
+:host([variant]) [part="dialog"] {
+  margin-inline: 0;
+}
+
+:host([width="small"]) [part="dialog"],
+:host([variant="small"]) [part="dialog"] {
+  --_box-width: 35rem;
+}
+
+:host([width="medium"]) [part="dialog"],
+:host([variant="medium"]) [part="dialog"] {
+  --_box-width: 52.5rem;
+}
+
+:host([width="large"]) [part="dialog"],
+:host([variant="large"]) [part="dialog"] {
+  --_box-width: 70rem;
+}
+
 [part="content"] {
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  max-height: var(--_box-max-height, calc(100vh - var(--rh-space-3xl, 48px)));
+  box-sizing: border-box;
   border-radius: var(--rh-border-radius-default, 3px);
 }
 
+[part="content"] ::slotted([slot="header"]) {
+  margin-top: 0 !important;
+}
+
+header {
+  position: sticky;
+  top: 0;
+  background-color: var(--rh-color-surface-lightest, #ffffff);
+}
+
+header ::slotted(:is(h1,h2,h3,h4,h5,h6)[slot="header"]) {
+  font-size: var(--rh-font-size-heading-sm, 1.5rem);
+  font-weight: var(--rh-font-weight-body-text-regular, 400);
+  font-family: "Red Hat Display", RedHatDisplay, Overpass, Helvetica, sans-serif;
+}
+
 [part="close-button"] {
   color: var(--rh-color-icon-subtle, #707070);
+  background-color: transparent;
+  border: none;
+  margin: 0;
+  padding: 0;
+  text-align: left;
+  position: absolute;
+  cursor: pointer;
+  line-height: 24px;
+  padding-block: 0.375rem;
+  padding-inline: var(--rh-space-lg, 16px);
+  top: 0;
+  right: calc(var(--rh-space-xl, 24px) / -3);
+}
+
+[part="close-button"] > svg {
+  font-size: 16px;
+  width: var(--rh-space-lg, 16px);
+  aspect-ratio: 1/1;
 }
 
 [part="close-button"]:is(:hover, :focus-within, :focus-visible) svg:is(svg, :hover) {
   fill: var(--rh-color-icon-secondary-on-light, #151515);
 }
 
+:host([position="top"]) #dialog {
+  align-self: start;
+  margin-block: var(--rh-space-2xl, 32px);
+  margin-inline: var(--rh-space-lg, 16px);
+  width: 100%;
+  max-width: calc(100% - min(var(--rh-space-2xl, 32px) * 2, var(--rh-space-2xl, 32px)));
+  max-height: calc(100% - var(--_height-offset) - var(--_spacer-align-top));
+}
+
+footer {
+  display: flex;
+  align-items: center;
+  gap: var(--rh-space-md, 8px);
+}
+
+#rhds-wrapper {
+  display: contents;
+  font-family: "Red Hat Text", RedHatText, Overpass, Helvetica, sans-serif;
+
+  --offset: var(--rh-space-md, 8px);
+  --offset-top: var(--offset);
+  --offset-right: var(--offset);
+}
+
 :host([type="video"]) {
   --rh-dialog-close-button-color: var(--rh-color-icon-secondary-on-dark, #ffffff);
 }