From 361c5e40e48e4a3cf0be095f743c8885bd047ea7 Mon Sep 17 00:00:00 2001 From: Sarah Higley Date: Wed, 8 May 2024 16:26:37 -0700 Subject: [PATCH 1/3] fix: prevent pixel-fraction overflow from TextField focus indicator --- packages/react/src/components/TextField/TextField.styles.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react/src/components/TextField/TextField.styles.tsx b/packages/react/src/components/TextField/TextField.styles.tsx index 20058d491eb13..38f2c5f95dfe5 100644 --- a/packages/react/src/components/TextField/TextField.styles.tsx +++ b/packages/react/src/components/TextField/TextField.styles.tsx @@ -200,6 +200,7 @@ export function getStyles(props: ITextFieldStyleProps): ITextFieldStyles { flexDirection: 'row', alignItems: 'stretch', position: 'relative', + overflow: 'hidden', }, multiline && { minHeight: '60px', From a1952772b49c850c952ad65fb629eafe9ad8ecfe Mon Sep 17 00:00:00 2001 From: Sarah Higley Date: Wed, 8 May 2024 16:27:31 -0700 Subject: [PATCH 2/3] change file --- ...luentui-react-a80addea-99f6-4096-9383-b0b193004086.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-a80addea-99f6-4096-9383-b0b193004086.json diff --git a/change/@fluentui-react-a80addea-99f6-4096-9383-b0b193004086.json b/change/@fluentui-react-a80addea-99f6-4096-9383-b0b193004086.json new file mode 100644 index 0000000000000..bb97e2ca214a6 --- /dev/null +++ b/change/@fluentui-react-a80addea-99f6-4096-9383-b0b193004086.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: prevent pixel-fraction overflow from TextField focus indicator", + "packageName": "@fluentui/react", + "email": "sarah.higley@microsoft.com", + "dependentChangeType": "patch" +} From 8b5d0a033f09a9fb257d8386a4908973f9255129 Mon Sep 17 00:00:00 2001 From: Sarah Higley Date: Thu, 9 May 2024 14:37:29 -0700 Subject: [PATCH 3/3] update snapshots --- .../__snapshots__/ColorPicker.test.tsx.snap | 15 +++++++++++++++ .../__snapshots__/DatePicker.test.tsx.snap | 3 +++ .../__snapshots__/MaskedTextField.test.tsx.snap | 1 + .../__snapshots__/TextField.test.tsx.snap | 8 ++++++++ 4 files changed, 27 insertions(+) diff --git a/packages/react/src/components/ColorPicker/__snapshots__/ColorPicker.test.tsx.snap b/packages/react/src/components/ColorPicker/__snapshots__/ColorPicker.test.tsx.snap index da3d5322d73dd..a533c6502750a 100644 --- a/packages/react/src/components/ColorPicker/__snapshots__/ColorPicker.test.tsx.snap +++ b/packages/react/src/components/ColorPicker/__snapshots__/ColorPicker.test.tsx.snap @@ -390,6 +390,7 @@ exports[`ColorPicker renders correctly 1`] = ` margin-left: 0px; margin-right: 0px; margin-top: 0px; + overflow: hidden; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; @@ -556,6 +557,7 @@ exports[`ColorPicker renders correctly 1`] = ` margin-left: 0px; margin-right: 0px; margin-top: 0px; + overflow: hidden; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; @@ -722,6 +724,7 @@ exports[`ColorPicker renders correctly 1`] = ` margin-left: 0px; margin-right: 0px; margin-top: 0px; + overflow: hidden; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; @@ -888,6 +891,7 @@ exports[`ColorPicker renders correctly 1`] = ` margin-left: 0px; margin-right: 0px; margin-top: 0px; + overflow: hidden; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; @@ -1054,6 +1058,7 @@ exports[`ColorPicker renders correctly 1`] = ` margin-left: 0px; margin-right: 0px; margin-top: 0px; + overflow: hidden; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; @@ -1575,6 +1580,7 @@ exports[`ColorPicker renders correctly with preview 1`] = ` margin-left: 0px; margin-right: 0px; margin-top: 0px; + overflow: hidden; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; @@ -1741,6 +1747,7 @@ exports[`ColorPicker renders correctly with preview 1`] = ` margin-left: 0px; margin-right: 0px; margin-top: 0px; + overflow: hidden; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; @@ -1907,6 +1914,7 @@ exports[`ColorPicker renders correctly with preview 1`] = ` margin-left: 0px; margin-right: 0px; margin-top: 0px; + overflow: hidden; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; @@ -2073,6 +2081,7 @@ exports[`ColorPicker renders correctly with preview 1`] = ` margin-left: 0px; margin-right: 0px; margin-top: 0px; + overflow: hidden; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; @@ -2239,6 +2248,7 @@ exports[`ColorPicker renders correctly with preview 1`] = ` margin-left: 0px; margin-right: 0px; margin-top: 0px; + overflow: hidden; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; @@ -2740,6 +2750,7 @@ exports[`ColorPicker renders correctly with transparency 1`] = ` margin-left: 0px; margin-right: 0px; margin-top: 0px; + overflow: hidden; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; @@ -2906,6 +2917,7 @@ exports[`ColorPicker renders correctly with transparency 1`] = ` margin-left: 0px; margin-right: 0px; margin-top: 0px; + overflow: hidden; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; @@ -3072,6 +3084,7 @@ exports[`ColorPicker renders correctly with transparency 1`] = ` margin-left: 0px; margin-right: 0px; margin-top: 0px; + overflow: hidden; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; @@ -3238,6 +3251,7 @@ exports[`ColorPicker renders correctly with transparency 1`] = ` margin-left: 0px; margin-right: 0px; margin-top: 0px; + overflow: hidden; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; @@ -3404,6 +3418,7 @@ exports[`ColorPicker renders correctly with transparency 1`] = ` margin-left: 0px; margin-right: 0px; margin-top: 0px; + overflow: hidden; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; diff --git a/packages/react/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap b/packages/react/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap index e42f7383c5f74..359ffd4757f98 100644 --- a/packages/react/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap +++ b/packages/react/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap @@ -72,6 +72,7 @@ exports[`DatePicker renders DatePicker allowing text input correctly 1`] = ` margin-left: 0px; margin-right: 0px; margin-top: 0px; + overflow: hidden; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; @@ -301,6 +302,7 @@ exports[`DatePicker renders DatePicker with value correctly 1`] = ` margin-left: 0px; margin-right: 0px; margin-top: 0px; + overflow: hidden; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; @@ -531,6 +533,7 @@ exports[`DatePicker renders default DatePicker correctly 1`] = ` margin-left: 0px; margin-right: 0px; margin-top: 0px; + overflow: hidden; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; diff --git a/packages/react/src/components/TextField/MaskedTextField/__snapshots__/MaskedTextField.test.tsx.snap b/packages/react/src/components/TextField/MaskedTextField/__snapshots__/MaskedTextField.test.tsx.snap index 0cef07b5be5e2..c9cc9bf6f4562 100644 --- a/packages/react/src/components/TextField/MaskedTextField/__snapshots__/MaskedTextField.test.tsx.snap +++ b/packages/react/src/components/TextField/MaskedTextField/__snapshots__/MaskedTextField.test.tsx.snap @@ -73,6 +73,7 @@ exports[`MaskedTextField renders correctly 1`] = ` margin-left: 0px; margin-right: 0px; margin-top: 0px; + overflow: hidden; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; diff --git a/packages/react/src/components/TextField/__snapshots__/TextField.test.tsx.snap b/packages/react/src/components/TextField/__snapshots__/TextField.test.tsx.snap index 2e78231568c3a..1331502638014 100644 --- a/packages/react/src/components/TextField/__snapshots__/TextField.test.tsx.snap +++ b/packages/react/src/components/TextField/__snapshots__/TextField.test.tsx.snap @@ -75,6 +75,7 @@ exports[`TextField snapshots renders correctly 1`] = ` margin-left: 0px; margin-right: 0px; margin-top: 0px; + overflow: hidden; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; @@ -261,6 +262,7 @@ exports[`TextField snapshots renders multiline correctly with errorMessage 1`] = margin-left: 0px; margin-right: 0px; margin-top: 0px; + overflow: hidden; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; @@ -512,6 +514,7 @@ exports[`TextField snapshots renders multiline correctly with props affecting st margin-left: 0px; margin-right: 0px; margin-top: 0px; + overflow: hidden; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; @@ -747,6 +750,7 @@ exports[`TextField snapshots renders multiline non resizable correctly 1`] = ` margin-right: 0px; margin-top: 0px; min-height: 60px; + overflow: hidden; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; @@ -920,6 +924,7 @@ exports[`TextField snapshots renders multiline resizable correctly 1`] = ` margin-right: 0px; margin-top: 0px; min-height: 60px; + overflow: hidden; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; @@ -1091,6 +1096,7 @@ exports[`TextField snapshots renders multiline with placeholder correctly 1`] = margin-right: 0px; margin-top: 0px; min-height: 60px; + overflow: hidden; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; @@ -1232,6 +1238,7 @@ exports[`TextField snapshots renders with reveal password button 1`] = ` margin-left: 0px; margin-right: 0px; margin-top: 0px; + overflow: hidden; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; @@ -1514,6 +1521,7 @@ exports[`TextField snapshots should respect user component and subcomponent styl margin-left: 0px; margin-right: 0px; margin-top: 0px; + overflow: hidden; padding-bottom: 0px; padding-left: 0px; padding-right: 0px;