From da517e152a330149f3f9700f5eddea4876b22938 Mon Sep 17 00:00:00 2001 From: Tanguy Krotoff Date: Sun, 10 Apr 2022 18:44:32 +0200 Subject: [PATCH 1/8] Bind Hugo to 0.0.0.0, helps debug on mobile when on the same network --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 70ecaf891c67..cd7cc5ca6b80 100644 --- a/package.json +++ b/package.json @@ -79,7 +79,7 @@ "docs-compile": "npm run docs-build", "docs-vnu": "node build/vnu-jar.js", "docs-lint": "npm run docs-vnu", - "docs-serve": "hugo server --port 9001 --disableFastRender", + "docs-serve": "hugo server --port 9001 --bind=0.0.0.0 --disableFastRender", "docs-serve-only": "npx sirv-cli _site --port 9001", "lockfile-lint": "lockfile-lint --allowed-hosts npm --allowed-schemes https: --empty-hostname false --type npm --path package-lock.json", "update-deps": "ncu -u -x globby,karma-browserstack-launcher,karma-rollup-preprocessor,terser && echo Manually update site/assets/js/vendor", From 23c54d34a6b52794a0b6c79bbd1bb7f7c4d243d9 Mon Sep 17 00:00:00 2001 From: Tanguy Krotoff Date: Sun, 10 Apr 2022 22:57:40 +0200 Subject: [PATCH 2/8] Use http-server for visual tests --- package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index cd7cc5ca6b80..9f1f296e1926 100644 --- a/package.json +++ b/package.json @@ -80,7 +80,8 @@ "docs-vnu": "node build/vnu-jar.js", "docs-lint": "npm run docs-vnu", "docs-serve": "hugo server --port 9001 --bind=0.0.0.0 --disableFastRender", - "docs-serve-only": "npx sirv-cli _site --port 9001", + "docs-serve-only": "npx http-server _site --port 9001", + "visual-tests-serve": "npx http-server . --port 9001 -o js/tests/visual", "lockfile-lint": "lockfile-lint --allowed-hosts npm --allowed-schemes https: --empty-hostname false --type npm --path package-lock.json", "update-deps": "ncu -u -x globby,karma-browserstack-launcher,karma-rollup-preprocessor,terser && echo Manually update site/assets/js/vendor", "release": "npm-run-all dist release-sri docs-build release-zip*", From 2e9b5173d915b8cf3ca3e8708f064b0e85c4ce75 Mon Sep 17 00:00:00 2001 From: Tanguy Krotoff Date: Sun, 10 Apr 2022 22:58:08 +0200 Subject: [PATCH 3/8] Add input visual tests --- js/tests/visual/input.html | 79 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 79 insertions(+) create mode 100644 js/tests/visual/input.html diff --git a/js/tests/visual/input.html b/js/tests/visual/input.html new file mode 100644 index 000000000000..6ef08d9aa5c1 --- /dev/null +++ b/js/tests/visual/input.html @@ -0,0 +1,79 @@ + + + + + + + Form + + + +
+

Input Bootstrap Visual Test

+ +

No layout

+ +
+ Text + +
+
+ Email + +
+
+ Number + +
+
+ Date + +
+ +

Flex

+ +
+
+ Text + +
+
+ Email + +
+
+ Number + +
+
+ Date + +
+
+ +

Grid

+ +
+
+ Text + +
+
+ Email + +
+
+ Number + +
+
+ Date + +
+
+
+ + + + + From 75b795add15ef09a1f7b5cbafa961d1f00d5e2a5 Mon Sep 17 00:00:00 2001 From: Tanguy Krotoff Date: Sun, 10 Apr 2022 23:20:45 +0200 Subject: [PATCH 4/8] Fix input date dimensions on Android Chrome --- scss/forms/_form-control.scss | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss index c81e3b4ea02b..dfcfd3dc079a 100644 --- a/scss/forms/_form-control.scss +++ b/scss/forms/_form-control.scss @@ -44,12 +44,22 @@ } } - // Add some height to date inputs on iOS - // https://github.com/twbs/bootstrap/issues/23307 - // TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved &::-webkit-date-and-time-value { + // Android Chrome + form-control's "width: 100%" makes the input width too small + // "2022/04/10" = 10 characters + // Tested under Android 11 / Chrome 89 & Android 12 / Chrome 100 + min-width: 10ch; + + // Add some height to date inputs on iOS + // https://github.com/twbs/bootstrap/issues/23307 + // TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved // Multiply line-height by 1em if it has no unit height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height); + + // Android Chrome type="date" is taller than the other inputs + // because of "margin: 1px 24px 1px 4px" inside the shadow DOM + // Tested under Android 11 / Chrome 89 & Android 12 / Chrome 100 + margin: 0; } // Prevent excessive date input height in Webkit From 87d62f35c74c161769bb7dc2cb91908f0e7d505e Mon Sep 17 00:00:00 2001 From: Tanguy Krotoff Date: Tue, 12 Apr 2022 11:02:20 +0200 Subject: [PATCH 5/8] Increase bootstrap.css max size --- .bundlewatch.config.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index c9aac7e60e07..98cb1ed0d464 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -26,7 +26,7 @@ }, { "path": "./dist/css/bootstrap.css", - "maxSize": "32.25 kB" + "maxSize": "32.26 kB" }, { "path": "./dist/css/bootstrap.min.css", @@ -63,4 +63,4 @@ "v4-dev" ] } -} \ No newline at end of file +} From f749075a64318bf7870663069c40200d28c5ca38 Mon Sep 17 00:00:00 2001 From: Tanguy Krotoff Date: Tue, 12 Apr 2022 21:30:29 +0200 Subject: [PATCH 6/8] Revert "Bind Hugo to 0.0.0.0" & "Use http-server for visual tests" --- package.json | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 9f1f296e1926..70ecaf891c67 100644 --- a/package.json +++ b/package.json @@ -79,9 +79,8 @@ "docs-compile": "npm run docs-build", "docs-vnu": "node build/vnu-jar.js", "docs-lint": "npm run docs-vnu", - "docs-serve": "hugo server --port 9001 --bind=0.0.0.0 --disableFastRender", - "docs-serve-only": "npx http-server _site --port 9001", - "visual-tests-serve": "npx http-server . --port 9001 -o js/tests/visual", + "docs-serve": "hugo server --port 9001 --disableFastRender", + "docs-serve-only": "npx sirv-cli _site --port 9001", "lockfile-lint": "lockfile-lint --allowed-hosts npm --allowed-schemes https: --empty-hostname false --type npm --path package-lock.json", "update-deps": "ncu -u -x globby,karma-browserstack-launcher,karma-rollup-preprocessor,terser && echo Manually update site/assets/js/vendor", "release": "npm-run-all dist release-sri docs-build release-zip*", From d5ade51f9b64e3efff12a89074538d005789e19c Mon Sep 17 00:00:00 2001 From: Tanguy Krotoff Date: Tue, 17 Jan 2023 02:00:31 +0100 Subject: [PATCH 7/8] Switch to pixels: this is an empirical minimum safe value --- scss/forms/_form-control.scss | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss index dfcfd3dc079a..ab72654d3d40 100644 --- a/scss/forms/_form-control.scss +++ b/scss/forms/_form-control.scss @@ -45,10 +45,12 @@ } &::-webkit-date-and-time-value { - // Android Chrome + form-control's "width: 100%" makes the input width too small - // "2022/04/10" = 10 characters - // Tested under Android 11 / Chrome 89 & Android 12 / Chrome 100 - min-width: 10ch; + // On Android Chrome, form-control's "width: 100%" makes the input width too small + // Tested under Android 11 / Chrome 89, Android 12 / Chrome 100, Android 13 / Chrome 109 + // + // On iOS Safari, form-control's "appearance: none" + "width: 100%" makes the input width too small + // Tested under iOS 16.2 / Safari 16.2 + min-width: 85px; // Seems to be a good minimum safe width // Add some height to date inputs on iOS // https://github.com/twbs/bootstrap/issues/23307 @@ -58,7 +60,7 @@ // Android Chrome type="date" is taller than the other inputs // because of "margin: 1px 24px 1px 4px" inside the shadow DOM - // Tested under Android 11 / Chrome 89 & Android 12 / Chrome 100 + // Tested under Android 11 / Chrome 89, Android 12 / Chrome 100, Android 13 / Chrome 109 margin: 0; } From ffd3115d31e200a3ab67e5a12e893ec343be522a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 17 Jan 2023 10:43:35 -0800 Subject: [PATCH 8/8] Update .bundlewatch.config.json --- .bundlewatch.config.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index 98cb1ed0d464..a594451ea24c 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -26,7 +26,7 @@ }, { "path": "./dist/css/bootstrap.css", - "maxSize": "32.26 kB" + "maxSize": "32.5 kB" }, { "path": "./dist/css/bootstrap.min.css",