From 6ebf0b226f87ad166dd0357fae77a19dd1624cec Mon Sep 17 00:00:00 2001 From: Rob Snow Date: Fri, 3 Apr 2020 21:03:08 -0700 Subject: [PATCH 1/3] Keep changing grid until it works --- .../components/dialog/index.css | 36 +++++++++---------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/packages/@adobe/spectrum-css-temp/components/dialog/index.css b/packages/@adobe/spectrum-css-temp/components/dialog/index.css index fe5a05b8d64..9ca040aa440 100644 --- a/packages/@adobe/spectrum-css-temp/components/dialog/index.css +++ b/packages/@adobe/spectrum-css-temp/components/dialog/index.css @@ -88,16 +88,16 @@ governing permissions and limitations under the License. .spectrum-Dialog .spectrum-Dialog-grid { display: grid; - grid-template-columns: var(--spectrum-dialog-padding) auto 1fr auto minmax(0, auto) minmax(var(--spectrum-dialog-padding), var(--spectrum-dialog-close-button-size)); + grid-template-columns: var(--spectrum-dialog-padding) auto 1fr auto minmax(0, auto) minmax(auto, calc(var(--spectrum-dialog-padding) - var(--spectrum-dialog-close-button-size))) var(--spectrum-dialog-padding); grid-template-rows: auto minmax(var(--spectrum-dialog-padding), var(--spectrum-dialog-close-button-size)) auto auto 1fr auto var(--spectrum-dialog-padding); grid-template-areas: - "hero hero hero hero hero hero" - ". . . . . closeButton" - ". heading header header typeIcon ." - ". divider divider divider divider ." - ". content content content content ." - ". footer footer buttonGroup buttonGroup ." - ". . . . . ."; + "hero hero hero hero hero hero hero" + ". . . . . closeButton ." + ". heading header header typeIcon closeButton ." + ". divider divider divider divider divider ." + ". content content content content content ." + ". footer footer buttonGroup buttonGroup buttonGroup ." + ". . . . . . ."; width: 100%; } @@ -215,7 +215,7 @@ governing permissions and limitations under the License. .spectrum-Dialog-closeButton { grid-area: closeButton; /* align and justify so it doesn't do the default 'stretch' and end up with forced height/width */ - align-self: end; + align-self: center; justify-self: start; } @@ -276,17 +276,17 @@ governing permissions and limitations under the License. @media screen and (max-width: 700px) { .spectrum-Dialog .spectrum-Dialog-grid { - grid-template-columns: var(--spectrum-dialog-padding) auto 1fr auto auto minmax(var(--spectrum-dialog-padding), var(--spectrum-dialog-close-button-size)); + grid-template-columns: var(--spectrum-dialog-padding) auto 1fr auto auto minmax(auto, calc(var(--spectrum-dialog-padding) - var(--spectrum-dialog-close-button-size))) var(--spectrum-dialog-padding); grid-template-rows: auto minmax(var(--spectrum-dialog-padding), var(--spectrum-dialog-close-button-size)) auto auto auto 1fr auto var(--spectrum-dialog-padding); grid-template-areas: - "hero hero hero hero hero hero" - ". . . . . closeButton" - ". heading heading heading typeIcon ." - ". header header header header ." - ". divider divider divider divider ." - ". content content content content ." - ". footer footer buttonGroup buttonGroup ." - ". . . . . ."; + "hero hero hero hero hero hero hero" + ". . . . . closeButton ." + ". heading heading heading typeIcon closeButton ." + ". header header header header header ." + ". divider divider divider divider divider ." + ". content content content content content ." + ". footer footer buttonGroup buttonGroup buttonGroup ." + ". . . . . . ."; } .spectrum-Dialog .spectrum-Dialog-header { From 680dcacef0704d4ca72d6ea0a92d28aea202e49e Mon Sep 17 00:00:00 2001 From: Rob Snow Date: Fri, 3 Apr 2020 21:36:31 -0700 Subject: [PATCH 2/3] More grids is always the answer if minmax isn't --- .../components/dialog/index.css | 52 ++++++++++++++----- 1 file changed, 39 insertions(+), 13 deletions(-) diff --git a/packages/@adobe/spectrum-css-temp/components/dialog/index.css b/packages/@adobe/spectrum-css-temp/components/dialog/index.css index 9ca040aa440..55fde0fe88d 100644 --- a/packages/@adobe/spectrum-css-temp/components/dialog/index.css +++ b/packages/@adobe/spectrum-css-temp/components/dialog/index.css @@ -88,16 +88,16 @@ governing permissions and limitations under the License. .spectrum-Dialog .spectrum-Dialog-grid { display: grid; - grid-template-columns: var(--spectrum-dialog-padding) auto 1fr auto minmax(0, auto) minmax(auto, calc(var(--spectrum-dialog-padding) - var(--spectrum-dialog-close-button-size))) var(--spectrum-dialog-padding); + grid-template-columns: var(--spectrum-dialog-padding) auto 1fr auto minmax(0, auto) var(--spectrum-dialog-padding); grid-template-rows: auto minmax(var(--spectrum-dialog-padding), var(--spectrum-dialog-close-button-size)) auto auto 1fr auto var(--spectrum-dialog-padding); grid-template-areas: - "hero hero hero hero hero hero hero" - ". . . . . closeButton ." - ". heading header header typeIcon closeButton ." - ". divider divider divider divider divider ." - ". content content content content content ." - ". footer footer buttonGroup buttonGroup buttonGroup ." - ". . . . . . ."; + "hero hero hero hero hero hero" + ". . . . . ." + ". heading header header typeIcon ." + ". divider divider divider divider ." + ". content content content content ." + ". footer footer buttonGroup buttonGroup ." + ". . . . . ."; width: 100%; } @@ -203,7 +203,18 @@ governing permissions and limitations under the License. } } -.spectrum-Dialog--dismissable { +.spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid { + grid-template-columns: var(--spectrum-dialog-padding) auto 1fr auto minmax(0, auto) minmax(0, var(--spectrum-dialog-close-button-size)) var(--spectrum-dialog-padding); + grid-template-rows: auto minmax(var(--spectrum-dialog-padding), var(--spectrum-dialog-close-button-size)) auto auto 1fr auto var(--spectrum-dialog-padding); + grid-template-areas: + "hero hero hero hero hero hero hero" + ". . . . . closeButton closeButton" + ". heading header header typeIcon closeButton closeButton" + ". divider divider divider divider divider ." + ". content content content content content ." + ". footer footer buttonGroup buttonGroup buttonGroup ." + ". . . . . . ."; + .spectrum-Dialog-buttonGroup { display: none; } @@ -216,7 +227,7 @@ governing permissions and limitations under the License. grid-area: closeButton; /* align and justify so it doesn't do the default 'stretch' and end up with forced height/width */ align-self: center; - justify-self: start; + justify-self: center; } /* Alert Dialog is a specific type of Dialog */ @@ -275,13 +286,28 @@ governing permissions and limitations under the License. } @media screen and (max-width: 700px) { + .spectrum-Dialog .spectrum-Dialog-grid { - grid-template-columns: var(--spectrum-dialog-padding) auto 1fr auto auto minmax(auto, calc(var(--spectrum-dialog-padding) - var(--spectrum-dialog-close-button-size))) var(--spectrum-dialog-padding); + grid-template-columns: var(--spectrum-dialog-padding) auto 1fr auto minmax(0, auto) var(--spectrum-dialog-padding); + grid-template-rows: auto minmax(var(--spectrum-dialog-padding), var(--spectrum-dialog-close-button-size)) auto auto auto 1fr auto var(--spectrum-dialog-padding); + grid-template-areas: + "hero hero hero hero hero hero" + ". . . . . ." + ". heading heading heading typeIcon ." + ". header header header header ." + ". divider divider divider divider ." + ". content content content content ." + ". footer footer buttonGroup buttonGroup ." + ". . . . . ."; + } + + .spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid { + grid-template-columns: var(--spectrum-dialog-padding) auto 1fr auto minmax(0, auto) minmax(0, var(--spectrum-dialog-close-button-size)) var(--spectrum-dialog-padding); grid-template-rows: auto minmax(var(--spectrum-dialog-padding), var(--spectrum-dialog-close-button-size)) auto auto auto 1fr auto var(--spectrum-dialog-padding); grid-template-areas: "hero hero hero hero hero hero hero" - ". . . . . closeButton ." - ". heading heading heading typeIcon closeButton ." + ". . . . . closeButton closeButton" + ". heading heading heading typeIcon closeButton closeButton" ". header header header header header ." ". divider divider divider divider divider ." ". content content content content content ." From 71a47dacdddb93700d53e514e94819d75a22544f Mon Sep 17 00:00:00 2001 From: Rob Snow Date: Fri, 3 Apr 2020 21:59:25 -0700 Subject: [PATCH 3/3] position more exactly instead of at ambiguous center --- .../@adobe/spectrum-css-temp/components/dialog/index.css | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/@adobe/spectrum-css-temp/components/dialog/index.css b/packages/@adobe/spectrum-css-temp/components/dialog/index.css index 55fde0fe88d..874d49b25ac 100644 --- a/packages/@adobe/spectrum-css-temp/components/dialog/index.css +++ b/packages/@adobe/spectrum-css-temp/components/dialog/index.css @@ -226,8 +226,11 @@ governing permissions and limitations under the License. .spectrum-Dialog-closeButton { grid-area: closeButton; /* align and justify so it doesn't do the default 'stretch' and end up with forced height/width */ - align-self: center; - justify-self: center; + align-self: start; + justify-self: end; + + margin-inline-end: var(--spectrum-dialog-close-button-padding); + margin-block-start: var(--spectrum-dialog-close-button-padding); } /* Alert Dialog is a specific type of Dialog */