From c3af0d93c324d6237d8bed0fa94a883c11227ad6 Mon Sep 17 00:00:00 2001 From: Daniel Date: Wed, 4 Mar 2020 12:13:07 -0800 Subject: [PATCH 1/4] Adjust checkbox max width to prevent overflow scrolling in flex width100% scenarios --- .../@adobe/spectrum-css-temp/components/checkbox/index.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/@adobe/spectrum-css-temp/components/checkbox/index.css b/packages/@adobe/spectrum-css-temp/components/checkbox/index.css index 8270c5a6920..79ddcc9d679 100644 --- a/packages/@adobe/spectrum-css-temp/components/checkbox/index.css +++ b/packages/@adobe/spectrum-css-temp/components/checkbox/index.css @@ -30,7 +30,8 @@ governing permissions and limitations under the License. position: relative; min-block-size: var(--spectrum-checkbox-height); - max-inline-size: 100%; + /* Accommodates for right padding in case width: 100% is applied to the Checkbox directly. */ + max-inline-size: calc(100% - var(--spectrum-checkbox-cursor-hit-x) * 2); margin-inline-end: calc(var(--spectrum-checkbox-cursor-hit-x) * 2); @@ -59,7 +60,7 @@ governing permissions and limitations under the License. position: absolute; inset-block-start: 0; inset-inline-start: calc(var(--spectrum-checkbox-cursor-hit-x) * -1); - inline-size: calc(100% + var(--spectrum-checkbox-cursor-hit-x) * 2); + inline-size: calc(100% + var(--spectrum-checkbox-cursor-hit-x) * 3); block-size: 100%; opacity: .0001; From e14a4c5df3a012019501a3afff7147ba291185ea Mon Sep 17 00:00:00 2001 From: Daniel Date: Wed, 4 Mar 2020 12:26:06 -0800 Subject: [PATCH 2/4] reverting hit area --- packages/@adobe/spectrum-css-temp/components/checkbox/index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/@adobe/spectrum-css-temp/components/checkbox/index.css b/packages/@adobe/spectrum-css-temp/components/checkbox/index.css index 79ddcc9d679..fa7da872156 100644 --- a/packages/@adobe/spectrum-css-temp/components/checkbox/index.css +++ b/packages/@adobe/spectrum-css-temp/components/checkbox/index.css @@ -60,7 +60,7 @@ governing permissions and limitations under the License. position: absolute; inset-block-start: 0; inset-inline-start: calc(var(--spectrum-checkbox-cursor-hit-x) * -1); - inline-size: calc(100% + var(--spectrum-checkbox-cursor-hit-x) * 3); + inline-size: calc(100% + var(--spectrum-checkbox-cursor-hit-x) * 2); block-size: 100%; opacity: .0001; From 7c14b7ade7efd0a668257a11073bc377d17e2e63 Mon Sep 17 00:00:00 2001 From: Daniel Date: Tue, 10 Mar 2020 10:47:14 -0700 Subject: [PATCH 3/4] Modifying the hit area instead --- .../@adobe/spectrum-css-temp/components/checkbox/index.css | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/@adobe/spectrum-css-temp/components/checkbox/index.css b/packages/@adobe/spectrum-css-temp/components/checkbox/index.css index fa7da872156..1866e61464e 100644 --- a/packages/@adobe/spectrum-css-temp/components/checkbox/index.css +++ b/packages/@adobe/spectrum-css-temp/components/checkbox/index.css @@ -30,8 +30,7 @@ governing permissions and limitations under the License. position: relative; min-block-size: var(--spectrum-checkbox-height); - /* Accommodates for right padding in case width: 100% is applied to the Checkbox directly. */ - max-inline-size: calc(100% - var(--spectrum-checkbox-cursor-hit-x) * 2); + max-inline-size: 100%; margin-inline-end: calc(var(--spectrum-checkbox-cursor-hit-x) * 2); @@ -60,7 +59,7 @@ governing permissions and limitations under the License. position: absolute; inset-block-start: 0; inset-inline-start: calc(var(--spectrum-checkbox-cursor-hit-x) * -1); - inline-size: calc(100% + var(--spectrum-checkbox-cursor-hit-x) * 2); + inline-size: calc(100% + var(--spectrum-checkbox-cursor-hit-x)); block-size: 100%; opacity: .0001; From 2dee15c46f72a6c0191f6d3cea7c07a05b81c47f Mon Sep 17 00:00:00 2001 From: Daniel Date: Tue, 10 Mar 2020 10:52:18 -0700 Subject: [PATCH 4/4] Adding borderbox and changing to right padding --- .../@adobe/spectrum-css-temp/components/checkbox/index.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/@adobe/spectrum-css-temp/components/checkbox/index.css b/packages/@adobe/spectrum-css-temp/components/checkbox/index.css index 1866e61464e..bca5783e752 100644 --- a/packages/@adobe/spectrum-css-temp/components/checkbox/index.css +++ b/packages/@adobe/spectrum-css-temp/components/checkbox/index.css @@ -25,6 +25,7 @@ governing permissions and limitations under the License. .spectrum-Checkbox { display: inline-flex; + box-sizing: border-box; align-items: flex-start; position: relative; @@ -32,7 +33,7 @@ governing permissions and limitations under the License. min-block-size: var(--spectrum-checkbox-height); max-inline-size: 100%; - margin-inline-end: calc(var(--spectrum-checkbox-cursor-hit-x) * 2); + padding-inline-end: calc(var(--spectrum-checkbox-cursor-hit-x) * 2); vertical-align: top; }