Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Dialog]: Add customizable media queries for mobile styles #914

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

[Dialog]: Add customizable media queries for mobile styles #914

wants to merge 2 commits into from
+46 −3

Conversation

AlanBreck
Copy link
Collaborator

@AlanBreck AlanBreck commented Nov 26, 2024 •
edited
Loading

NOTE: this purpose of this PR is not to bring the Dialog component up to date with the latest in Figma, but rather to provide consumers a way of automatically switching between mobile and normal sizes via screen size.

  • [Dialog]: add customizable media queries for switching to mobile styles
  • [Dialog]: change position of action buttons right aligned

@AlanBreck AlanBreck changed the title dialog media query [Dialog]: Add customizable media queries for mobile styles Nov 26, 2024
@github-actions GitHub Actions
Copy link
Contributor

👋 Thanks for Submitting! This PR is available for preview at the link below.

✅ PR tip preview: https://914.pr.nala.bravesoftware.com/
✅ Commit preview: https://914.pr.nala.bravesoftware.com/commit-f3b0634e55ae698f3ba646ecca298c8a0711e7fa/

- ./tokens/css/variables-android.old.css: 7390 bytes
+ ./tokens/css/variables-android.css: 7390 bytes
---
- ./tokens/css/variables-browser.old.css: 6848 bytes
+ ./tokens/css/variables-browser.css: 6848 bytes
---
- ./tokens/css/variables-ios.old.css: 7033 bytes
+ ./tokens/css/variables-ios.css: 7033 bytes
---
- ./tokens/css/variables-marketing.old.css: 13501 bytes
+ ./tokens/css/variables-marketing.css: 13501 bytes
---
- ./tokens/css/variables-news.old.css: 526 bytes
+ ./tokens/css/variables-news.css: 526 bytes
---
- ./tokens/css/variables-newtab.old.css: 1933 bytes
+ ./tokens/css/variables-newtab.css: 1933 bytes
---
- ./tokens/css/variables-search.old.css: 2409 bytes
+ ./tokens/css/variables-search.css: 2409 bytes
---
- ./tokens/css/variables-web3.old.css: 905 bytes
+ ./tokens/css/variables-web3.css: 905 bytes
---
- ./tokens/css/variables.old.css: 119512 bytes
+ ./tokens/css/variables.css: 119512 bytes
Variables Diff: variables-android.diff 
--- ./tokens/css/variables-android.old.css	2024-11-26 03:41:31.487576148 +0000
+++ ./tokens/css/variables-android.css	2024-11-26 03:40:52.263291032 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri Nov 22 2024 01:00:07 GMT+0000 (Coordinated Universal Time)
+ * Generated on Tue Nov 26 2024 03:40:52 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {
Variables Diff: variables-browser.diff 
--- ./tokens/css/variables-browser.old.css	2024-11-26 03:41:31.791578304 +0000
+++ ./tokens/css/variables-browser.css	2024-11-26 03:40:52.243290885 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri Nov 22 2024 01:00:07 GMT+0000 (Coordinated Universal Time)
+ * Generated on Tue Nov 26 2024 03:40:52 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {
Variables Diff: variables-ios.diff 
--- ./tokens/css/variables-ios.old.css	2024-11-26 03:41:32.083580375 +0000
+++ ./tokens/css/variables-ios.css	2024-11-26 03:40:52.279291150 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri Nov 22 2024 01:00:07 GMT+0000 (Coordinated Universal Time)
+ * Generated on Tue Nov 26 2024 03:40:52 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {
Variables Diff: variables-marketing.diff 
--- ./tokens/css/variables-marketing.old.css	2024-11-26 03:41:32.459583043 +0000
+++ ./tokens/css/variables-marketing.css	2024-11-26 03:40:52.303291326 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri Nov 22 2024 01:00:07 GMT+0000 (Coordinated Universal Time)
+ * Generated on Tue Nov 26 2024 03:40:52 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {
Variables Diff: variables-news.diff 
--- ./tokens/css/variables-news.old.css	2024-11-26 03:41:32.751585112 +0000
+++ ./tokens/css/variables-news.css	2024-11-26 03:40:52.331291532 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri Nov 22 2024 01:00:07 GMT+0000 (Coordinated Universal Time)
+ * Generated on Tue Nov 26 2024 03:40:52 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {
Variables Diff: variables-newtab.diff 
--- ./tokens/css/variables-newtab.old.css	2024-11-26 03:41:33.087587498 +0000
+++ ./tokens/css/variables-newtab.css	2024-11-26 03:40:52.339291591 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri Nov 22 2024 01:00:07 GMT+0000 (Coordinated Universal Time)
+ * Generated on Tue Nov 26 2024 03:40:52 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {
Variables Diff: variables-search.diff 
--- ./tokens/css/variables-search.old.css	2024-11-26 03:41:33.367589482 +0000
+++ ./tokens/css/variables-search.css	2024-11-26 03:40:52.323291474 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri Nov 22 2024 01:00:07 GMT+0000 (Coordinated Universal Time)
+ * Generated on Tue Nov 26 2024 03:40:52 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {
Variables Diff: variables-web3.diff 
--- ./tokens/css/variables-web3.old.css	2024-11-26 03:41:33.499590419 +0000
+++ ./tokens/css/variables-web3.css	2024-11-26 03:40:52.343291621 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri Nov 22 2024 01:00:07 GMT+0000 (Coordinated Universal Time)
+ * Generated on Tue Nov 26 2024 03:40:52 GMT+0000 (Coordinated Universal Time)
  */
 
 @media (prefers-color-scheme: light) {
Variables Diff: variables.diff 
--- ./tokens/css/variables.old.css	2024-11-26 03:41:33.883593140 +0000
+++ ./tokens/css/variables.css	2024-11-26 03:40:52.087289739 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri Nov 22 2024 01:00:07 GMT+0000 (Coordinated Universal Time)
+ * Generated on Tue Nov 26 2024 03:40:52 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

fallaciousreasoning
fallaciousreasoning previously approved these changes Nov 26, 2024
View reviewed changes
Copy link
Collaborator

@fallaciousreasoning fallaciousreasoning left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm with comments

src/components/dialog/dialog.svelte Outdated
size = matches ? 'mobile' : 'normal'
}
onMount(() => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe this should be a reactive statement so the media query updates when mobileBreakpoint is changed

src/components/dialog/dialog.svelte Show resolved Hide resolved
@github-actions GitHub Actions
Copy link
Contributor

👋 Thanks for Submitting! This PR is available for preview at the link below.

✅ PR tip preview: https://914.pr.nala.bravesoftware.com/
✅ Commit preview: https://914.pr.nala.bravesoftware.com/commit-bc1af72c11698d414751c5949bbf252aff51cc0f/

- ./tokens/css/variables-android.old.css: 7390 bytes
+ ./tokens/css/variables-android.css: 7390 bytes
---
- ./tokens/css/variables-browser.old.css: 6848 bytes
+ ./tokens/css/variables-browser.css: 6848 bytes
---
- ./tokens/css/variables-ios.old.css: 7033 bytes
+ ./tokens/css/variables-ios.css: 7033 bytes
---
- ./tokens/css/variables-marketing.old.css: 13501 bytes
+ ./tokens/css/variables-marketing.css: 13501 bytes
---
- ./tokens/css/variables-news.old.css: 526 bytes
+ ./tokens/css/variables-news.css: 526 bytes
---
- ./tokens/css/variables-newtab.old.css: 1933 bytes
+ ./tokens/css/variables-newtab.css: 1933 bytes
---
- ./tokens/css/variables-search.old.css: 2409 bytes
+ ./tokens/css/variables-search.css: 2409 bytes
---
- ./tokens/css/variables-web3.old.css: 905 bytes
+ ./tokens/css/variables-web3.css: 905 bytes
---
- ./tokens/css/variables.old.css: 119512 bytes
+ ./tokens/css/variables.css: 119512 bytes
Variables Diff: variables-android.diff 
--- ./tokens/css/variables-android.old.css	2024-11-27 01:57:57.673824651 +0000
+++ ./tokens/css/variables-android.css	2024-11-27 01:57:20.065663828 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Nov 27 2024 00:24:03 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Nov 27 2024 01:57:20 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {
Variables Diff: variables-browser.diff 
--- ./tokens/css/variables-browser.old.css	2024-11-27 01:57:57.861825187 +0000
+++ ./tokens/css/variables-browser.css	2024-11-27 01:57:20.045663779 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Nov 27 2024 00:24:03 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Nov 27 2024 01:57:20 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {
Variables Diff: variables-ios.diff 
--- ./tokens/css/variables-ios.old.css	2024-11-27 01:57:58.037825687 +0000
+++ ./tokens/css/variables-ios.css	2024-11-27 01:57:20.081663867 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Nov 27 2024 00:24:03 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Nov 27 2024 01:57:20 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {
Variables Diff: variables-marketing.diff 
--- ./tokens/css/variables-marketing.old.css	2024-11-27 01:57:58.249826291 +0000
+++ ./tokens/css/variables-marketing.css	2024-11-27 01:57:20.105663925 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Nov 27 2024 00:24:03 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Nov 27 2024 01:57:20 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {
Variables Diff: variables-news.diff 
--- ./tokens/css/variables-news.old.css	2024-11-27 01:57:58.361826609 +0000
+++ ./tokens/css/variables-news.css	2024-11-27 01:57:20.129663984 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Nov 27 2024 00:24:03 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Nov 27 2024 01:57:20 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {
Variables Diff: variables-newtab.diff 
--- ./tokens/css/variables-newtab.old.css	2024-11-27 01:57:58.541827122 +0000
+++ ./tokens/css/variables-newtab.css	2024-11-27 01:57:20.137664004 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Nov 27 2024 00:24:03 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Nov 27 2024 01:57:20 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {
Variables Diff: variables-search.diff 
--- ./tokens/css/variables-search.old.css	2024-11-27 01:57:58.757827737 +0000
+++ ./tokens/css/variables-search.css	2024-11-27 01:57:20.121663964 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Nov 27 2024 00:24:03 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Nov 27 2024 01:57:20 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {
Variables Diff: variables-web3.diff 
--- ./tokens/css/variables-web3.old.css	2024-11-27 01:57:58.937828255 +0000
+++ ./tokens/css/variables-web3.css	2024-11-27 01:57:20.145664024 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Nov 27 2024 00:24:03 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Nov 27 2024 01:57:20 GMT+0000 (Coordinated Universal Time)
  */
 
 @media (prefers-color-scheme: light) {
Variables Diff: variables.diff 
--- ./tokens/css/variables.old.css	2024-11-27 01:57:59.221829058 +0000
+++ ./tokens/css/variables.css	2024-11-27 01:57:19.897663416 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Nov 27 2024 00:24:03 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Nov 27 2024 01:57:19 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

@github-actions GitHub Actions
Copy link
Contributor

👋 Thanks for Submitting! This PR is available for preview at the link below.

✅ PR tip preview: https://914.pr.nala.bravesoftware.com/
✅ Commit preview: https://914.pr.nala.bravesoftware.com/commit-cedbbffba2c95236fdce471216280f04d2face0b/

- ./tokens/css/variables-android.old.css: 7390 bytes
+ ./tokens/css/variables-android.css: 7390 bytes
---
- ./tokens/css/variables-browser.old.css: 6848 bytes
+ ./tokens/css/variables-browser.css: 6848 bytes
---
- ./tokens/css/variables-ios.old.css: 7033 bytes
+ ./tokens/css/variables-ios.css: 7033 bytes
---
- ./tokens/css/variables-marketing.old.css: 13501 bytes
+ ./tokens/css/variables-marketing.css: 13501 bytes
---
- ./tokens/css/variables-news.old.css: 526 bytes
+ ./tokens/css/variables-news.css: 526 bytes
---
- ./tokens/css/variables-newtab.old.css: 1933 bytes
+ ./tokens/css/variables-newtab.css: 1933 bytes
---
- ./tokens/css/variables-search.old.css: 2409 bytes
+ ./tokens/css/variables-search.css: 2409 bytes
---
- ./tokens/css/variables-web3.old.css: 905 bytes
+ ./tokens/css/variables-web3.css: 905 bytes
---
- ./tokens/css/variables.old.css: 119512 bytes
+ ./tokens/css/variables.css: 119512 bytes
Variables Diff: variables-android.diff 
--- ./tokens/css/variables-android.old.css	2024-11-27 02:03:10.777866752 +0000
+++ ./tokens/css/variables-android.css	2024-11-27 02:02:31.813622222 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Nov 27 2024 00:24:03 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Nov 27 2024 02:02:31 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {
Variables Diff: variables-browser.diff 
--- ./tokens/css/variables-browser.old.css	2024-11-27 02:03:11.005868551 +0000
+++ ./tokens/css/variables-browser.css	2024-11-27 02:02:31.797622102 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Nov 27 2024 00:24:03 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Nov 27 2024 02:02:31 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {
Variables Diff: variables-ios.diff 
--- ./tokens/css/variables-ios.old.css	2024-11-27 02:03:11.217870225 +0000
+++ ./tokens/css/variables-ios.css	2024-11-27 02:02:31.829622341 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Nov 27 2024 00:24:03 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Nov 27 2024 02:02:31 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {
Variables Diff: variables-marketing.diff 
--- ./tokens/css/variables-marketing.old.css	2024-11-27 02:03:11.445872025 +0000
+++ ./tokens/css/variables-marketing.css	2024-11-27 02:02:31.853622522 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Nov 27 2024 00:24:03 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Nov 27 2024 02:02:31 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {
Variables Diff: variables-news.diff 
--- ./tokens/css/variables-news.old.css	2024-11-27 02:03:11.625873444 +0000
+++ ./tokens/css/variables-news.css	2024-11-27 02:02:31.881622731 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Nov 27 2024 00:24:03 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Nov 27 2024 02:02:31 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {
Variables Diff: variables-newtab.diff 
--- ./tokens/css/variables-newtab.old.css	2024-11-27 02:03:11.833875087 +0000
+++ ./tokens/css/variables-newtab.css	2024-11-27 02:02:31.889622791 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Nov 27 2024 00:24:03 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Nov 27 2024 02:02:31 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {
Variables Diff: variables-search.diff 
--- ./tokens/css/variables-search.old.css	2024-11-27 02:03:12.037876697 +0000
+++ ./tokens/css/variables-search.css	2024-11-27 02:02:31.873622672 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Nov 27 2024 00:24:03 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Nov 27 2024 02:02:31 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {
Variables Diff: variables-web3.diff 
--- ./tokens/css/variables-web3.old.css	2024-11-27 02:03:12.257878433 +0000
+++ ./tokens/css/variables-web3.css	2024-11-27 02:02:31.893622822 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Nov 27 2024 00:24:03 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Nov 27 2024 02:02:31 GMT+0000 (Coordinated Universal Time)
  */
 
 @media (prefers-color-scheme: light) {
Variables Diff: variables.diff 
--- ./tokens/css/variables.old.css	2024-11-27 02:03:12.525880545 +0000
+++ ./tokens/css/variables.css	2024-11-27 02:02:31.641620933 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Nov 27 2024 00:24:03 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Nov 27 2024 02:02:31 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

petemill
petemill reviewed Nov 27, 2024
View reviewed changes
src/components/dialog/dialog.svelte
export let escapeCloses = true
export let backdropClickCloses = true
export let animate = true
export let mobileBreakpoint = 375
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this be specified via css?

Copy link
Collaborator Author

@AlanBreck AlanBreck Nov 27, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The idea was to allow consumers to define the breakpoint so that it's not locked in, and CSS vars sadly cannot be used within media query declarations.

@AlanBreck AlanBreck dismissed fallaciousreasoning’s stale review November 27, 2024 04:26

Updated since last review.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@fallaciousreasoning fallaciousreasoning fallaciousreasoning approved these changes

@petemill petemill Awaiting requested review from petemill petemill is a code owner

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@AlanBreck @petemill @fallaciousreasoning