From 67ab7826bea2a0ba47dba1f37504ee342a4dad65 Mon Sep 17 00:00:00 2001 From: Keith Cirkel Date: Thu, 11 Jan 2024 14:44:59 +0000 Subject: [PATCH] css refactor --- app/components/primer/alpha/dialog.pcss | 202 ++++++----------------- app/components/primer/alpha/dialog.rb | 20 +-- app/components/primer/alpha/overlay.pcss | 6 - 3 files changed, 61 insertions(+), 167 deletions(-) diff --git a/app/components/primer/alpha/dialog.pcss b/app/components/primer/alpha/dialog.pcss index 2e0270390f..95f31f7309 100644 --- a/app/components/primer/alpha/dialog.pcss +++ b/app/components/primer/alpha/dialog.pcss @@ -4,18 +4,6 @@ dialog.Overlay:not([open]) { display: none; } -/* override dialog user agent styles */ -dialog.Overlay { - position: initial; - display: initial; - inset: initial; - margin: initial; - border: initial; - padding: initial; - color: initial; -} - - .Overlay--hidden { display: none !important; } @@ -29,12 +17,18 @@ dialog.Overlay { .Overlay { display: flex; + inset: 0; + position: static; + margin: auto; + padding: 0; width: min(var(--overlay-width), 100vw - 2rem); min-width: 192px; max-height: min(calc(100vh - 2rem), var(--overlay-height)); white-space: normal; flex-direction: column; background-color: var(--overlay-bgColor); + color: var(--fgColor-default); + border: 0; border-radius: var(--borderRadius-large); box-shadow: var(--shadow-floating-small); opacity: 1; @@ -90,6 +84,23 @@ dialog.Overlay { height: auto; } + &.Overlay--placement-left, &.Overlay--placement-right { + height: 100%; + max-height: unset; + } + + &.Overlay--placement-left { + inset: 0 auto 0 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + &.Overlay--placement-right { + inset: 0 0 0 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + /* start deprecate in favor of Alpha::Dialog */ &.Overlay--height-xsmall { height: min(192px, 100vh - 2rem); @@ -311,121 +322,50 @@ dialog.Overlay { } } -@define-mixin Overlay-backdrop { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 999; - display: flex; - background-color: var(--overlay-backdrop-bgColor, var(--color-neutral-muted)); -} - -@define-mixin Overlay-backdrop--transparent { - position: absolute; - z-index: 999; - background-color: 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 */ -/* center */ -@define-mixin Overlay-backdrop--center { - @mixin Overlay-backdrop; - - align-items: center; - justify-content: center; -} - -/* anchor */ -@define-mixin Overlay-backdrop--anchor { - @mixin Overlay-backdrop--transparent; +/* full width */ +.Overlay--full { + width: 100%; + max-width: 100vw; + height: 100%; + max-height: 100vh; + border-radius: unset !important; + flex-grow: 1; } -/* anchor side(s) */ -@define-mixin Overlay-backdrop--side $responsiveVariant { - @mixin Overlay-backdrop; - - /* default left */ - align-items: center; - justify-content: left; - - &.Overlay-backdrop--placement-left$(responsiveVariant) { - align-items: center; - justify-content: left; - - & > .Overlay$(responsiveVariant) { - height: 100vh; - max-height: unset; - border-radius: var(--borderRadius-large); - border-top-left-radius: 0; - border-bottom-left-radius: 0; +/* responsive variants */ - @media screen and (prefers-reduced-motion: no-preference) { - animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideInRight; - } - } +/* --viewportRange-narrowLandscape */ +@media (max-width: 767px) { + .Overlay--placement-left-whenNarrow, .Overlay--placement-right-whenNarrow { + height: 100%; + max-height: 100vh; } - &.Overlay-backdrop--placement-right$(responsiveVariant) { - align-items: center; - justify-content: right; - - & > .Overlay$(responsiveVariant) { - height: 100vh; - max-height: unset; - border-radius: var(--borderRadius-large); - border-top-right-radius: 0; - border-bottom-right-radius: 0; - - @media screen and (prefers-reduced-motion: no-preference) { - animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideInLeft; - } - } + .Overlay--placement-left-whenNarrow { + inset: 0 auto 0 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; } - &.Overlay-backdrop--placement-bottom$(responsiveVariant) { - align-items: end; - justify-content: center; - - & > .Overlay$(responsiveVariant) { - width: 100vw; - height: auto; - max-height: calc(100vh - 2rem); - border-radius: var(--borderRadius-large); - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; - - @media screen and (prefers-reduced-motion: no-preference) { - animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideUp; - } - } + .Overlay--placement-right-whenNarrow { + inset: 0 0 0 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; } - &.Overlay-backdrop--placement-top$(responsiveVariant) { - align-items: start; - justify-content: center; - - & > .Overlay$(responsiveVariant) { - border-radius: var(--borderRadius-large); - border-top-left-radius: 0; - border-top-right-radius: 0; - - @media screen and (prefers-reduced-motion: no-preference) { - animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideDown; - } - } + .Overlay--placement-bottom-whenNarrow { + width: 100%; + max-width: 100vw; + inset: auto 0 0 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; } -} -/* full width */ -@define-mixin Overlay-backdrop--full { - @mixin Overlay-backdrop; - - & .Overlay { + .Overlay--full-whenNarrow { width: 100%; max-width: 100vw; height: 100%; @@ -435,44 +375,6 @@ dialog.Overlay { } } -/* Overlay variant classnames */ -.Overlay-backdrop--center { - @mixin Overlay-backdrop--center; -} - -.Overlay-backdrop--anchor { - @mixin Overlay-backdrop--anchor; -} - -.Overlay-backdrop--side { - @mixin Overlay-backdrop--side; -} - -.Overlay-backdrop--full { - @mixin Overlay-backdrop--full; -} - -/* responsive variants */ - -/* --viewportRange-narrowLandscape */ -@media (max-width: 767px) { - .Overlay-backdrop--center-whenNarrow { - @mixin Overlay-backdrop--center; - } - - .Overlay-backdrop--anchor-whenNarrow { - @mixin Overlay-backdrop--anchor; - } - - .Overlay-backdrop--side-whenNarrow { - @mixin Overlay-backdrop--side -whenNarrow; - } - - .Overlay-backdrop--full-whenNarrow { - @mixin Overlay-backdrop--full; - } -} - @keyframes Overlay--motion-slideDown { from { transform: translateY(-100%); diff --git a/app/components/primer/alpha/dialog.rb b/app/components/primer/alpha/dialog.rb index 58ebf5afd3..5ff5feed70 100644 --- a/app/components/primer/alpha/dialog.rb +++ b/app/components/primer/alpha/dialog.rb @@ -34,19 +34,19 @@ class Dialog < Primer::Component DEFAULT_POSITION = :center POSITION_MAPPINGS = { - DEFAULT_POSITION => "Overlay-backdrop--center", - :left => "Overlay-backdrop--side Overlay-backdrop--placement-left", - :right => "Overlay-backdrop--side Overlay-backdrop--placement-right" + DEFAULT_POSITION => "", + :left => "Overlay--placement-left", + :right => "Overlay--placement-right" }.freeze POSITION_OPTIONS = POSITION_MAPPINGS.keys DEFAULT_POSITION_NARROW = :inherit POSITION_NARROW_MAPPINGS = { DEFAULT_POSITION_NARROW => "", - :bottom => "Overlay-backdrop--side-whenNarrow Overlay-backdrop--placement-bottom-whenNarrow", - :fullscreen => "Overlay-backdrop--full-whenNarrow", - :left => "Overlay-backdrop--side-whenNarrow Overlay-backdrop--placement-left-whenNarrow", - :right => "Overlay-backdrop--side-whenNarrow Overlay-backdrop--placement-right-whenNarrow" + :bottom => "Overlay--placement-bottom-whenNarrow", + :fullscreen => "Overlay--full-whenNarrow", + :left => "Overlay--placement-left-whenNarrow", + :right => "Overlay--placement-right-whenNarrow" }.freeze POSITION_NARROW_OPTIONS = POSITION_NARROW_MAPPINGS.keys @@ -142,11 +142,9 @@ def initialize( "Overlay-whenNarrow", SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, @size, DEFAULT_SIZE)], "Overlay--motion-scaleFade", - system_arguments[:classes] - ) - @backdrop_classes = class_names( POSITION_MAPPINGS[fetch_or_fallback(POSITION_OPTIONS, @position, DEFAULT_POSITION)], - POSITION_NARROW_MAPPINGS[fetch_or_fallback(POSITION_NARROW_MAPPINGS, @position_narrow, DEFAULT_POSITION_NARROW)] + POSITION_NARROW_MAPPINGS[fetch_or_fallback(POSITION_NARROW_MAPPINGS, @position_narrow, DEFAULT_POSITION_NARROW)], + system_arguments[:classes] ) end diff --git a/app/components/primer/alpha/overlay.pcss b/app/components/primer/alpha/overlay.pcss index 306d6d1c89..7e083eda32 100644 --- a/app/components/primer/alpha/overlay.pcss +++ b/app/components/primer/alpha/overlay.pcss @@ -6,12 +6,6 @@ anchored-position[popover] { overflow: visible; } -.Overlay { - display: flex; - border-width: 0; - padding: 0; -} - anchored-position:not(.Overlay) { background: none; }