@mixtint/primer-view-components 0.72.0

package/app/components/primer/alpha/dialog.css

@@ -0,0 +1,377 @@
+/* stylelint-disable selector-max-specificity */
+/* stylelint-disable selector-max-compound-selectors */
+/* stylelint-disable max-nesting-depth */
+/* stylelint-disable primer/responsive-widths */
+/* stylelint-disable primer/spacing */
+/* stylelint-disable selector-no-qualifying-type */
+/* stylelint-disable selector-max-type */
+/* Overlay */
+/* The --dialog-scrollgutter property is used only on the body element to
+ * simulate scrollbar-gutter:stable. This property is not and should not
+ * be used elsewhere in the DOM. There is a performance penalty to
+ * setting inherited properties which can cause a large style recalc to
+ * occur, so it benefits us to prevent inheritance for this property.
+ * See https://web.dev/blog/at-property-performance
+ */
+@property --dialog-scrollgutter {
+  initial-value: 0;
+  inherits: false;
+  syntax: "<length>";
+}
+body:has(dialog:modal.Overlay--disableScroll) {
+  padding-right: var(--dialog-scrollgutter) !important;
+  overflow: hidden !important;
+}
+dialog.Overlay:not([open]) {
+  display: none;
+}
+.Overlay--hidden {
+  display: none !important;
+}
+.Overlay--visibilityHidden {
+  height: 0;
+  overflow: hidden;
+  visibility: hidden;
+  opacity: 0;
+}
+/* This is for @oddbird/popover-polyfill;
+ * A FOUC occurs in browsers which do not support :popover-open.
+ * We can try to hide the popover if :popover-open is not supported.
+ */
+@supports not selector(:popover-open) {
+  [popover]:not(.\:popover-open) {
+    display: none;
+  }
+}
+.Overlay {
+  position: static;
+  display: flex;
+  width: min(var(--overlay-width), 100vw - 2rem);
+  min-width: 192px;
+  max-height: min(calc(100vh - 2rem), var(--overlay-height));
+  padding: 0;
+  margin: auto;
+  color: var(--fgColor-default);
+  white-space: normal;
+  flex-direction: column;
+  background-color: var(--overlay-bgColor);
+  border: 0;
+  border-radius: var(--borderRadius-large);
+  box-shadow: var(--shadow-floating-small);
+  opacity: 1;
+  inset: 0;
+}
+.Overlay.Overlay--size-auto {
+    min-width: 192px;
+    max-width: calc(100vw - 2rem);
+    max-height: calc(100vh - 2rem);
+  }
+.Overlay.Overlay--size-full {
+    width: 100vw;
+    height: 100vh;
+  }
+.Overlay.Overlay--size-xsmall {
+    --overlay-width: 192px;
+
+    max-height: calc(100vh - 2rem);
+  }
+.Overlay.Overlay--size-small {
+    --overlay-height: 256px;
+    --overlay-width: 320px;
+  }
+.Overlay.Overlay--size-small-portrait {
+    --overlay-height: 432px;
+    --overlay-width: 320px;
+  }
+.Overlay.Overlay--size-medium {
+    --overlay-height: 320px;
+    --overlay-width: 480px;
+  }
+.Overlay.Overlay--size-medium-portrait {
+    --overlay-height: 600px;
+    --overlay-width: 480px;
+  }
+.Overlay.Overlay--size-large {
+    --overlay-height: 432px;
+    --overlay-width: 640px;
+  }
+.Overlay.Overlay--size-xlarge {
+    --overlay-height: 600px;
+    --overlay-width: 960px;
+  }
+.Overlay.Overlay--height-auto {
+    height: auto;
+  }
+.Overlay.Overlay--placement-left,.Overlay.Overlay--placement-right {
+    position: fixed;
+    height: 100%;
+    max-height: unset;
+  }
+@media screen and (prefers-reduced-motion: no-preference) {
+.Overlay.Overlay--motion-scaleFade,.Overlay.Overlay--placement-left,.Overlay.Overlay--placement-right {
+      animation: 200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-scaleFade;
+  }
+    }
+.Overlay.Overlay--placement-left {
+    inset: 0 auto 0 0;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    animation-name: Overlay--motion-slideInRight;
+  }
+.Overlay.Overlay--placement-right {
+    inset: 0 0 0 auto;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    animation-name: Overlay--motion-slideInLeft;
+  }
+/* start deprecate in favor of Alpha::Dialog */
+.Overlay.Overlay--height-xsmall {
+    height: min(192px, 100vh - 2rem);
+  }
+.Overlay.Overlay--height-small {
+    height: min(256px, 100vh - 2rem);
+  }
+.Overlay.Overlay--height-medium {
+    height: min(320px, 100vh - 2rem);
+  }
+.Overlay.Overlay--height-large {
+    height: min(432px, 100vh - 2rem);
+  }
+.Overlay.Overlay--height-xlarge {
+    height: min(600px, 100vh - 2rem);
+  }
+.Overlay.Overlay--width-auto {
+    width: auto;
+  }
+.Overlay.Overlay--width-small {
+    width: min(256px, 100vw - 2rem);
+  }
+.Overlay.Overlay--width-medium {
+    width: min(320px, 100vw - 2rem);
+  }
+.Overlay.Overlay--width-large {
+    width: min(480px, 100vw - 2rem);
+  }
+.Overlay.Overlay--width-xlarge {
+    width: min(640px, 100vw - 2rem);
+  }
+.Overlay.Overlay--width-xxlarge {
+    width: min(960px, 100vw - 2rem);
+  }
+/* end deprecate */
+.Overlay:modal {
+  position: fixed;
+}
+@keyframes Overlay--motion-scaleFade {
+  0% {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+/* for <form> element that wraps entire contents of overlay */
+.Overlay-form {
+  display: flex;
+  overflow: auto;
+  flex-direction: column;
+  flex-grow: 1;
+}
+.Overlay-header {
+  z-index: 1;
+  display: flex;
+  color: var(--fgColor-default);
+  flex-direction: column;
+}
+.Overlay-header.Overlay-header--divided {
+    padding-bottom: var(--stack-padding-condensed);
+    /* stylelint-disable-next-line primer/box-shadow */
+    box-shadow: inset 0 calc(var(--borderWidth-thin) * -1) var(--borderColor-default);
+  }
+:is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap {
+        gap: var(--stack-gap-condensed);
+      }
+:is(:is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-title {
+          font-size: var(--text-title-size-medium);
+        }
+:is(:is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-description {
+          font-size: var(--text-body-size-medium);
+        }
+.Overlay-header .Overlay-headerContentWrap {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--stack-gap-condensed);
+    padding: var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed);
+  }
+:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-actionWrap {
+      display: flex;
+      flex-direction: row;
+      gap: var(--stack-gap-condensed);
+    }
+:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap {
+      display: flex;
+      padding: calc(var(--stack-gap-condensed) * 0.75) 0 calc(var(--stack-gap-condensed) * 0.75)
+        var(--stack-gap-condensed);
+      flex-direction: column;
+      flex-grow: 1;
+      gap: var(--control-small-gap);
+    }
+:is(:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-title {
+        margin: 0;
+        font-size: var(--text-body-size-medium);
+        font-weight: var(--base-text-weight-semibold);
+      }
+:is(:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-description {
+        margin: 0;
+        font-size: var(--text-body-size-small);
+        font-weight: var(--base-text-weight-normal);
+        color: var(--fgColor-muted);
+      }
+.Overlay-headerFilter {
+  padding: var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed);
+}
+/* generic body content slot */
+.Overlay-body {
+  padding: var(--stack-padding-normal);
+  overflow-y: auto;
+  scrollbar-width: thin;
+  font-size: var(--text-body-size-medium);
+  flex-grow: 1;
+}
+.Overlay-body.Overlay-body--paddingCondensed {
+    padding: var(--stack-padding-condensed);
+    padding-top: 0;
+  }
+.Overlay-body.Overlay-body--paddingNone {
+    padding: 0;
+  }
+/* generic footer slot */
+.Overlay-footer {
+  z-index: 1;
+  display: flex;
+  padding: 0 var(--stack-padding-normal) var(--stack-padding-normal) var(--stack-padding-normal);
+  flex-direction: row;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+}
+.Overlay-footer.Overlay-footer--divided {
+    padding-top: var(--stack-padding-normal);
+    /* stylelint-disable-next-line primer/box-shadow */
+    box-shadow: inset 0 var(--borderWidth-thin) var(--borderColor-default);
+  }
+.Overlay-footer.Overlay-footer--alignStart {
+    justify-content: flex-start;
+    gap: var(--stack-gap-condensed);
+  }
+.Overlay-footer.Overlay-footer--alignCenter {
+    justify-content: center;
+    gap: var(--stack-gap-condensed);
+  }
+.Overlay-footer.Overlay-footer--alignEnd {
+    justify-content: flex-end;
+    gap: var(--stack-gap-condensed);
+  }
+/* TODO: replace with refactored IconButton */
+.Overlay-closeButton {
+  position: relative;
+  display: grid;
+  width: var(--base-size-32);
+  height: var(--base-size-32);
+  padding: 0;
+  color: var(--fgColor-muted);
+  cursor: pointer;
+  -webkit-user-select: none;
+          user-select: none;
+  background-color: transparent;
+  border: var(--borderWidth-thin) solid transparent;
+  border-radius: var(--borderRadius-medium);
+  transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
+  transition-property: color, background-color, border-color;
+  place-content: center;
+  align-self: flex-start;
+  flex-shrink: 0;
+}
+.Overlay-closeButton:hover,.Overlay-closeButton:focus {
+    background-color: var(--button-default-bgColor-hover);
+    /* stylelint-disable-next-line primer/colors */
+    border: var(--borderWidth-thin) solid var(--control-bgColor-hover);
+  }
+/* Override .close-button's `border: 0` that triggers a border-color transition on hover  */
+.Overlay-closeButton.close-button {
+    border: var(--borderWidth-thin) solid transparent;
+  }
+/* variants must be mixins so we can extend within a media query (@extend is not supported inside media queries) */
+/* border-radius repeats within placement options to ensure the original radius is reset when two classes co-exist */
+/* full width */
+.Overlay--full {
+  width: 100%;
+  max-width: 100vw;
+  height: 100%;
+  max-height: 100vh;
+  border-radius: unset !important;
+  flex-grow: 1;
+}
+/* responsive variants */
+/* --viewportRange-narrowLandscape */
+@media (max-width: 767px) {
+  .Overlay.Overlay--placement-left-whenNarrow, .Overlay--placement-right-whenNarrow {
+    position: fixed;
+    height: 100%;
+    max-height: 100vh;
+  }
+
+  .Overlay.Overlay--placement-left-whenNarrow {
+    inset: 0 auto 0 0;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    animation-name: Overlay--motion-slideInLeft;
+  }
+
+  .Overlay.Overlay--placement-right-whenNarrow {
+    inset: 0 0 0 auto;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    animation-name: Overlay--motion-slideInLeft;
+  }
+
+  .Overlay.Overlay--placement-bottom-whenNarrow {
+    width: 100%;
+    max-width: 100vw;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    animation-name: Overlay--motion-slideUp;
+    inset: auto 0 0;
+  }
+
+  .Overlay--full-whenNarrow {
+    width: 100%;
+    max-width: 100vw;
+    height: 100%;
+    max-height: 100vh;
+    border-radius: unset !important;
+    flex-grow: 1;
+  }
+}
+@keyframes Overlay--motion-slideDown {
+  from {
+    transform: translateY(-100%);
+  }
+}
+@keyframes Overlay--motion-slideUp {
+  from {
+    transform: translateY(100%);
+  }
+}
+@keyframes Overlay--motion-slideInRight {
+  from {
+    transform: translateX(-100%);
+  }
+}
+@keyframes Overlay--motion-slideInLeft {
+  from {
+    transform: translateX(100%);
+  }
+}

package/app/components/primer/alpha/dialog.css.json

@@ -0,0 +1,66 @@
+{
+  "name": "alpha/dialog",
+  "selectors": [
+    "body:has(dialog:modal.Overlay--disableScroll)",
+    "dialog.Overlay:not([open])",
+    ".Overlay--hidden",
+    ".Overlay--visibilityHidden",
+    "[popover]:not(.\\:popover-open)",
+    ".Overlay",
+    ".Overlay.Overlay--size-auto",
+    ".Overlay.Overlay--size-full",
+    ".Overlay.Overlay--size-xsmall",
+    ".Overlay.Overlay--size-small",
+    ".Overlay.Overlay--size-small-portrait",
+    ".Overlay.Overlay--size-medium",
+    ".Overlay.Overlay--size-medium-portrait",
+    ".Overlay.Overlay--size-large",
+    ".Overlay.Overlay--size-xlarge",
+    ".Overlay.Overlay--height-auto",
+    ".Overlay.Overlay--placement-left",
+    ".Overlay.Overlay--placement-right",
+    ".Overlay.Overlay--motion-scaleFade",
+    ".Overlay.Overlay--height-xsmall",
+    ".Overlay.Overlay--height-small",
+    ".Overlay.Overlay--height-medium",
+    ".Overlay.Overlay--height-large",
+    ".Overlay.Overlay--height-xlarge",
+    ".Overlay.Overlay--width-auto",
+    ".Overlay.Overlay--width-small",
+    ".Overlay.Overlay--width-medium",
+    ".Overlay.Overlay--width-large",
+    ".Overlay.Overlay--width-xlarge",
+    ".Overlay.Overlay--width-xxlarge",
+    ".Overlay:modal",
+    ".Overlay-form",
+    ".Overlay-header",
+    ".Overlay-header.Overlay-header--divided",
+    ":is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap",
+    ":is(:is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-title",
+    ":is(:is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-description",
+    ".Overlay-header .Overlay-headerContentWrap",
+    ":is(.Overlay-header .Overlay-headerContentWrap) .Overlay-actionWrap",
+    ":is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap",
+    ":is(:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-title",
+    ":is(:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-description",
+    ".Overlay-headerFilter",
+    ".Overlay-body",
+    ".Overlay-body.Overlay-body--paddingCondensed",
+    ".Overlay-body.Overlay-body--paddingNone",
+    ".Overlay-footer",
+    ".Overlay-footer.Overlay-footer--divided",
+    ".Overlay-footer.Overlay-footer--alignStart",
+    ".Overlay-footer.Overlay-footer--alignCenter",
+    ".Overlay-footer.Overlay-footer--alignEnd",
+    ".Overlay-closeButton",
+    ".Overlay-closeButton:hover",
+    ".Overlay-closeButton:focus",
+    ".Overlay-closeButton.close-button",
+    ".Overlay--full",
+    ".Overlay.Overlay--placement-left-whenNarrow",
+    ".Overlay--placement-right-whenNarrow",
+    ".Overlay.Overlay--placement-right-whenNarrow",
+    ".Overlay.Overlay--placement-bottom-whenNarrow",
+    ".Overlay--full-whenNarrow"
+  ]
+}

package/app/components/primer/alpha/dropdown/menu.d.ts

@@ -0,0 +1 @@
+import '@github/details-menu-element';

package/app/components/primer/alpha/dropdown/menu.js

@@ -0,0 +1 @@
+import '@github/details-menu-element';