feat(Overlay): Convert Overlay to CSS modules behind team feature flag (

#5310) * feat(Overlay): Convert Overlay to CSS modules behind team feature flag * Create nice-boxes-sell.md * fix(Overlay): types and format * fix(Overlay): correct typos and add aria-label to dialog stories * fix(Overlay): use sentence-case for aria-label in stories * Update packages/react/src/Overlay/Overlay.module.css Co-authored-by: Katie Langerman <[email protected]> * fix(Overlay): pull keyframes out of class definition * test(Overlay): skip story setup in e2e testing * test(Overlay): re-add empty line * test(vrt): update snapshots * fix(Overlay): separate concerns between BaseOverlay and Overlay * test(vrt): update snapshots * fix(Overlay): fix maxHeight maxWidth visual regression * test(vrt): update snapshots * Revert "test(vrt): update snapshots" This reverts commit 4950b60. * Revert "test(vrt): update snapshots" This reverts commit 5779a79. * Revert "test(vrt): update snapshots" This reverts commit 4f5237e. --------- Co-authored-by: Katie Langerman <[email protected]> Co-authored-by: francinelucca <[email protected]>
primer · Dec 11, 2024 · 13ce9a3 · 13ce9a3
1 parent 1dcc534
commit 13ce9a3
Show file tree

Hide file tree

Showing 4 changed files with 334 additions and 88 deletions.
diff --git a/.changeset/nice-boxes-sell.md b/.changeset/nice-boxes-sell.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+feat(Overlay): Convert Overlay to CSS modules behind team feature flag
diff --git a/packages/react/src/Overlay/Overlay.module.css b/packages/react/src/Overlay/Overlay.module.css
@@ -0,0 +1,158 @@
+@keyframes overlay-appear {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.Overlay {
+  position: absolute;
+  width: auto;
+  min-width: 192px;
+  height: auto;
+  overflow: hidden;
+  background-color: var(--overlay-bgColor);
+  border-radius: var(--borderRadius-large);
+  box-shadow: var(--shadow-floating-small);
+  animation: overlay-appear 200ms cubic-bezier(0.33, 1, 0.68, 1);
+
+  &:focus {
+    outline: none;
+  }
+
+  @media (forced-colors: active) {
+    /* Support for Windows high contrast https://sarahmhigley.com/writing/whcm-quick-tips */
+    outline: solid 1px transparent;
+  }
+
+  &:where([data-reflow-container='true']) {
+    max-width: calc(100vw - 2rem);
+  }
+
+  &:where([data-overflow-auto]) {
+    overflow: auto;
+  }
+
+  &:where([data-overflow-hidden]) {
+    overflow: hidden;
+  }
+
+  &:where([data-overflow-scroll]) {
+    overflow: scroll;
+  }
+
+  &:where([data-overflow-visible]) {
+    overflow: visible;
+  }
+
+  &:where([data-height-xsmall]) {
+    height: 192px;
+  }
+
+  &:where([data-height-small]) {
+    height: 256px;
+  }
+
+  &:where([data-height-medium]) {
+    height: 320px;
+  }
+
+  &:where([data-height-large]) {
+    height: 432px;
+  }
+
+  &:where([data-height-xlarge]) {
+    height: 600px;
+  }
+
+  &:where([data-height-auto]),
+  &:where([data-height-initial]) {
+    height: auto;
+  }
+
+  &:where([data-height-fit-content]) {
+    height: fit-content;
+  }
+
+  &:where([data-max-height-xsmall]) {
+    max-height: 192px;
+  }
+
+  &:where([data-max-height-small]) {
+    max-height: 256px;
+  }
+
+  &:where([data-max-height-medium]) {
+    max-height: 320px;
+  }
+
+  &:where([data-max-height-large]) {
+    max-height: 432px;
+  }
+
+  &:where([data-max-height-xlarge]) {
+    max-height: 600px;
+  }
+
+  &:where([data-max-height-fit-content]) {
+    max-height: fit-content;
+  }
+
+  &:where([data-width-small]) {
+    width: 256px;
+  }
+
+  &:where([data-width-medium]) {
+    width: 320px;
+  }
+
+  &:where([data-width-large]) {
+    /* stylelint-disable-next-line primer/responsive-widths */
+    width: 480px;
+  }
+
+  &:where([data-width-xlarge]) {
+    /* stylelint-disable-next-line primer/responsive-widths */
+    width: 640px;
+  }
+
+  &:where([data-width-xxlarge]) {
+    /* stylelint-disable-next-line primer/responsive-widths */
+    width: 960px;
+  }
+
+  &:where([data-width-auto]) {
+    width: auto;
+  }
+
+  &:where([data-max-width-small]) {
+    max-width: 256px;
+  }
+
+  &:where([data-max-width-medium]) {
+    max-width: 320px;
+  }
+
+  &:where([data-max-width-large]) {
+    max-width: 480px;
+  }
+
+  &:where([data-max-width-xlarge]) {
+    max-width: 640px;
+  }
+
+  &:where([data-max-width-xxlarge]) {
+    max-width: 960px;
+  }
+
+  &:where([data-visibility-visible]) {
+    visibility: visible;
+  }
+
+  &:where([data-visibility-hidden]) {
+    visibility: hidden;
+  }
+}