From a2cef3a508afce1534cfc114c20b6d060068fb9d Mon Sep 17 00:00:00 2001 From: Ethan Wallace Date: Mon, 27 Mar 2023 14:53:48 -0400 Subject: [PATCH 1/2] Add button full-width sizing when on mobile --- .../web/src/components/gcds-button/gcds-button.css | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/web/src/components/gcds-button/gcds-button.css b/packages/web/src/components/gcds-button/gcds-button.css index b8b583c55..fd1198aaa 100644 --- a/packages/web/src/components/gcds-button/gcds-button.css +++ b/packages/web/src/components/gcds-button/gcds-button.css @@ -6,8 +6,9 @@ border: var(--gcds-button-border-width) solid transparent; text-decoration: none; border-radius: var(--gcds-button-border-radius); + box-sizing: border-box; display: inline-block; - width: fit-content; + width: var(--gcds-button-width); text-align: center; transition: all .15s ease-in-out; @@ -127,3 +128,11 @@ padding: var(--gcds-button-small-padding); } } + +@media screen and (max-width: 30rem) { + :host button:not(.button--text-only), + :host a:not(.button--text-only) { + width: var(--gcds-button-mobile-width); + margin: var(--gcds-button-mobile-margin); + } +} From b0cddfb429bf9130a0014da0d66ec04beb5d9416 Mon Sep 17 00:00:00 2001 From: Ethan Wallace Date: Mon, 27 Mar 2023 17:19:03 -0400 Subject: [PATCH 2/2] New token package version --- packages/web/package-lock.json | 14 +++++++------- packages/web/package.json | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/web/package-lock.json b/packages/web/package-lock.json index 9cf3ed7a8..6076bc3f3 100644 --- a/packages/web/package-lock.json +++ b/packages/web/package-lock.json @@ -18,7 +18,7 @@ "devDependencies": { "@axe-core/puppeteer": "^4.3.2", "@babel/core": "^7.20.12", - "@cdssnc/gcds-tokens": "^1.0.3", + "@cdssnc/gcds-tokens": "^1.0.4", "@fortawesome/fontawesome-free": "^6.3.0", "@node-minify/core": "^6.2.0", "@node-minify/uglify-es": "^6.2.0", @@ -2053,9 +2053,9 @@ "dev": true }, "node_modules/@cdssnc/gcds-tokens": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/@cdssnc/gcds-tokens/-/gcds-tokens-1.0.3.tgz", - "integrity": "sha512-Tr0eMKYIOajtkEYntEQEXjTkmHuN91ByyotcguUUBmFbKbcJWP8XohExjy6iXi+EcHRNFq21GSqixfoS8a9z2Q==", + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@cdssnc/gcds-tokens/-/gcds-tokens-1.0.4.tgz", + "integrity": "sha512-qshRALgxjoHxG8DQAMh03+EUFzuxWOJw1X2kxBK373vWwxfsyKDT61zGb7m85X2H+9hvsq8lzeq4ihcJkpU2xw==", "dev": true }, "node_modules/@cnakazawa/watch": { @@ -26350,9 +26350,9 @@ "dev": true }, "@cdssnc/gcds-tokens": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/@cdssnc/gcds-tokens/-/gcds-tokens-1.0.3.tgz", - "integrity": "sha512-Tr0eMKYIOajtkEYntEQEXjTkmHuN91ByyotcguUUBmFbKbcJWP8XohExjy6iXi+EcHRNFq21GSqixfoS8a9z2Q==", + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@cdssnc/gcds-tokens/-/gcds-tokens-1.0.4.tgz", + "integrity": "sha512-qshRALgxjoHxG8DQAMh03+EUFzuxWOJw1X2kxBK373vWwxfsyKDT61zGb7m85X2H+9hvsq8lzeq4ihcJkpU2xw==", "dev": true }, "@cnakazawa/watch": { diff --git a/packages/web/package.json b/packages/web/package.json index 458c13772..9f8dc73cc 100644 --- a/packages/web/package.json +++ b/packages/web/package.json @@ -40,7 +40,7 @@ "devDependencies": { "@axe-core/puppeteer": "^4.3.2", "@babel/core": "^7.20.12", - "@cdssnc/gcds-tokens": "^1.0.3", + "@cdssnc/gcds-tokens": "^1.0.4", "@fortawesome/fontawesome-free": "^6.3.0", "@node-minify/core": "^6.2.0", "@node-minify/uglify-es": "^6.2.0",