diff --git a/change/@fluentui-react-b1886c50-127e-4b1f-81c8-81013fd2c50a.json b/change/@fluentui-react-b1886c50-127e-4b1f-81c8-81013fd2c50a.json new file mode 100644 index 0000000000000..20eefa817f659 --- /dev/null +++ b/change/@fluentui-react-b1886c50-127e-4b1f-81c8-81013fd2c50a.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: Revert fix for margin added by safari.", + "packageName": "@fluentui/react", + "email": "esteban.230@hotmail.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-experiments/src/components/MicroFeedback/__snapshots__/MicroFeedback.test.tsx.snap b/packages/react-experiments/src/components/MicroFeedback/__snapshots__/MicroFeedback.test.tsx.snap index d5a3bb2ba466c..a29bed56bb80f 100644 --- a/packages/react-experiments/src/components/MicroFeedback/__snapshots__/MicroFeedback.test.tsx.snap +++ b/packages/react-experiments/src/components/MicroFeedback/__snapshots__/MicroFeedback.test.tsx.snap @@ -55,10 +55,6 @@ exports[`MicroFeedback renders correctly with inline prop set 1`] = ` font-size: 14px; font-weight: 400; height: 32px; - margin-bottom: 0px; - margin-left: 0px; - margin-right: 0px; - margin-top: 0px; outline: transparent; padding-bottom: 0; padding-left: 4px; @@ -187,10 +183,6 @@ exports[`MicroFeedback renders correctly with inline prop set 1`] = ` font-size: 14px; font-weight: 400; height: 32px; - margin-bottom: 0px; - margin-left: 0px; - margin-right: 0px; - margin-top: 0px; outline: transparent; padding-bottom: 0; padding-left: 4px; @@ -359,10 +351,6 @@ exports[`MicroFeedback renders correctly with no props 1`] = ` font-size: 14px; font-weight: 400; height: 32px; - margin-bottom: 0px; - margin-left: 0px; - margin-right: 0px; - margin-top: 0px; outline: transparent; padding-bottom: 0; padding-left: 4px; @@ -491,10 +479,6 @@ exports[`MicroFeedback renders correctly with no props 1`] = ` font-size: 14px; font-weight: 400; height: 32px; - margin-bottom: 0px; - margin-left: 0px; - margin-right: 0px; - margin-top: 0px; outline: transparent; padding-bottom: 0; padding-left: 4px; diff --git a/packages/react-experiments/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap b/packages/react-experiments/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap index 5af7b1fef59d2..ad6c87d4e61d8 100644 --- a/packages/react-experiments/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap +++ b/packages/react-experiments/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap @@ -34,10 +34,6 @@ exports[`Pagination render buttons Pagination correctly 1`] = ` font-size: 14px; font-weight: 400; height: 32px; - margin-bottom: 0px; - margin-left: 0px; - margin-right: 0px; - margin-top: 0px; outline: transparent; padding-bottom: 0; padding-left: 4px; @@ -167,10 +163,6 @@ exports[`Pagination render buttons Pagination correctly 1`] = ` font-size: 14px; font-weight: 400; height: 32px; - margin-bottom: 0px; - margin-left: 0px; - margin-right: 0px; - margin-top: 0px; outline: transparent; padding-bottom: 0; padding-left: 4px; @@ -299,10 +291,6 @@ exports[`Pagination render buttons Pagination correctly 1`] = ` font-size: 14px; font-weight: 400; height: 32px; - margin-bottom: 0px; - margin-left: 0px; - margin-right: 0px; - margin-top: 0px; min-height: 32px; min-width: 32px; outline: transparent; @@ -409,10 +397,6 @@ exports[`Pagination render buttons Pagination correctly 1`] = ` font-size: 14px; font-weight: 400; height: 32px; - margin-bottom: 0px; - margin-left: 0px; - margin-right: 0px; - margin-top: 0px; min-height: 32px; min-width: 32px; outline: transparent; @@ -519,10 +503,6 @@ exports[`Pagination render buttons Pagination correctly 1`] = ` font-size: 14px; font-weight: 400; height: 32px; - margin-bottom: 0px; - margin-left: 0px; - margin-right: 0px; - margin-top: 0px; min-height: 32px; min-width: 32px; outline: transparent; @@ -629,10 +609,6 @@ exports[`Pagination render buttons Pagination correctly 1`] = ` font-size: 14px; font-weight: 400; height: 32px; - margin-bottom: 0px; - margin-left: 0px; - margin-right: 0px; - margin-top: 0px; min-height: 32px; min-width: 32px; outline: transparent; @@ -739,10 +715,6 @@ exports[`Pagination render buttons Pagination correctly 1`] = ` font-size: 14px; font-weight: 400; height: 32px; - margin-bottom: 0px; - margin-left: 0px; - margin-right: 0px; - margin-top: 0px; min-height: 32px; min-width: 32px; outline: transparent; @@ -847,10 +819,6 @@ exports[`Pagination render buttons Pagination correctly 1`] = ` font-size: 14px; font-weight: 400; height: 32px; - margin-bottom: 0px; - margin-left: 0px; - margin-right: 0px; - margin-top: 0px; outline: transparent; padding-bottom: 0; padding-left: 4px; @@ -992,10 +960,6 @@ exports[`Pagination render buttons Pagination correctly 1`] = ` font-size: 14px; font-weight: 400; height: 32px; - margin-bottom: 0px; - margin-left: 0px; - margin-right: 0px; - margin-top: 0px; outline: transparent; padding-bottom: 0; padding-left: 4px; @@ -1164,10 +1128,6 @@ exports[`Pagination render comboBox Pagination correctly 1`] = ` font-size: 14px; font-weight: 400; height: 32px; - margin-bottom: 0px; - margin-left: 0px; - margin-right: 0px; - margin-top: 0px; outline: transparent; padding-bottom: 0; padding-left: 4px; @@ -1297,10 +1257,6 @@ exports[`Pagination render comboBox Pagination correctly 1`] = ` font-size: 14px; font-weight: 400; height: 32px; - margin-bottom: 0px; - margin-left: 0px; - margin-right: 0px; - margin-top: 0px; outline: transparent; padding-bottom: 0; padding-left: 4px; @@ -1649,10 +1605,6 @@ exports[`Pagination render comboBox Pagination correctly 1`] = ` font-weight: 400; height: 100%; line-height: 30px; - margin-bottom: 0px; - margin-left: 0px; - margin-right: 0px; - margin-top: 0px; outline: transparent; padding-bottom: 0; padding-left: 4px; @@ -1804,10 +1756,6 @@ exports[`Pagination render comboBox Pagination correctly 1`] = ` font-size: 14px; font-weight: 400; height: 32px; - margin-bottom: 0px; - margin-left: 0px; - margin-right: 0px; - margin-top: 0px; outline: transparent; padding-bottom: 0; padding-left: 4px; @@ -1935,10 +1883,6 @@ exports[`Pagination render comboBox Pagination correctly 1`] = ` font-size: 14px; font-weight: 400; height: 32px; - margin-bottom: 0px; - margin-left: 0px; - margin-right: 0px; - margin-top: 0px; outline: transparent; padding-bottom: 0; padding-left: 4px; diff --git a/packages/react-experiments/src/components/SelectedItemsList/SelectedPeopleList/__snapshots__/SelectedPeopleList.test.tsx.snap b/packages/react-experiments/src/components/SelectedItemsList/SelectedPeopleList/__snapshots__/SelectedPeopleList.test.tsx.snap index 2db0031b981dc..933beed0b96c6 100644 --- a/packages/react-experiments/src/components/SelectedItemsList/SelectedPeopleList/__snapshots__/SelectedPeopleList.test.tsx.snap +++ b/packages/react-experiments/src/components/SelectedItemsList/SelectedPeopleList/__snapshots__/SelectedPeopleList.test.tsx.snap @@ -72,10 +72,7 @@ Array [ font-size: 14px; font-weight: 400; height: 32px; - margin-bottom: 0px; - margin-left: 0px; margin-right: -17px; - margin-top: 0px; outline: transparent; padding-bottom: 0; padding-left: 4px; @@ -395,10 +392,6 @@ Array [ font-size: 14px; font-weight: 400; height: 32px; - margin-bottom: 0px; - margin-left: 0px; - margin-right: 0px; - margin-top: 0px; outline: transparent; padding-bottom: 0; padding-left: 4px; @@ -587,10 +580,7 @@ Array [ font-size: 14px; font-weight: 400; height: 32px; - margin-bottom: 0px; - margin-left: 0px; margin-right: -17px; - margin-top: 0px; outline: transparent; padding-bottom: 0; padding-left: 4px; @@ -910,10 +900,6 @@ Array [ font-size: 14px; font-weight: 400; height: 32px; - margin-bottom: 0px; - margin-left: 0px; - margin-right: 0px; - margin-top: 0px; outline: transparent; padding-bottom: 0; padding-left: 4px; @@ -1107,10 +1093,7 @@ Array [ font-size: 14px; font-weight: 400; height: 32px; - margin-bottom: 0px; - margin-left: 0px; margin-right: -17px; - margin-top: 0px; outline: transparent; padding-bottom: 0; padding-left: 4px; @@ -1430,10 +1413,6 @@ Array [ font-size: 14px; font-weight: 400; height: 32px; - margin-bottom: 0px; - margin-left: 0px; - margin-right: 0px; - margin-top: 0px; outline: transparent; padding-bottom: 0; padding-left: 4px; @@ -1622,10 +1601,7 @@ Array [ font-size: 14px; font-weight: 400; height: 32px; - margin-bottom: 0px; - margin-left: 0px; margin-right: -17px; - margin-top: 0px; outline: transparent; padding-bottom: 0; padding-left: 4px; @@ -1945,10 +1921,6 @@ Array [ font-size: 14px; font-weight: 400; height: 32px; - margin-bottom: 0px; - margin-left: 0px; - margin-right: 0px; - margin-top: 0px; outline: transparent; padding-bottom: 0; padding-left: 4px; diff --git a/packages/react-experiments/src/components/UnifiedPicker/UnifiedPeoplePicker/__snapshots__/UnifiedPeoplePicker.test.tsx.snap b/packages/react-experiments/src/components/UnifiedPicker/UnifiedPeoplePicker/__snapshots__/UnifiedPeoplePicker.test.tsx.snap index 9eaedc3c7959d..c6b565fe8bab2 100644 --- a/packages/react-experiments/src/components/UnifiedPicker/UnifiedPeoplePicker/__snapshots__/UnifiedPeoplePicker.test.tsx.snap +++ b/packages/react-experiments/src/components/UnifiedPicker/UnifiedPeoplePicker/__snapshots__/UnifiedPeoplePicker.test.tsx.snap @@ -298,10 +298,7 @@ exports[`UnifiedPeoplePicker renders correctly with selected and suggested items font-size: 14px; font-weight: 400; height: 32px; - margin-bottom: 0px; - margin-left: 0px; margin-right: -17px; - margin-top: 0px; outline: transparent; padding-bottom: 0; padding-left: 4px; @@ -811,10 +808,6 @@ exports[`UnifiedPeoplePicker renders correctly with selected and suggested items font-size: 14px; font-weight: 400; height: 32px; - margin-bottom: 0px; - margin-left: 0px; - margin-right: 0px; - margin-top: 0px; outline: transparent; padding-bottom: 0; padding-left: 4px; diff --git a/packages/react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap b/packages/react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap index 2f0986de63acd..4ad916ae75678 100644 --- a/packages/react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap +++ b/packages/react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap @@ -82,10 +82,6 @@ exports[`Breadcrumb rendering renders correctly with custom overflow icon 1`] = font-size: 16px; font-weight: 400; height: 100%; - margin-bottom: 0px; - margin-left: 0px; - margin-right: 0px; - margin-top: 0px; outline: transparent; overflow: hidden; padding-bottom: 0; @@ -1319,10 +1315,6 @@ exports[`Breadcrumb rendering renders correctly with maxDisplayedItems and overf font-size: 16px; font-weight: 400; height: 100%; - margin-bottom: 0px; - margin-left: 0px; - margin-right: 0px; - margin-top: 0px; outline: transparent; overflow: hidden; padding-bottom: 0; @@ -1536,10 +1528,6 @@ exports[`Breadcrumb rendering renders correctly with maxDisplayedItems and overf font-size: 16px; font-weight: 400; height: 100%; - margin-bottom: 0px; - margin-left: 0px; - margin-right: 0px; - margin-top: 0px; outline: transparent; overflow: hidden; padding-bottom: 0; @@ -1753,10 +1741,6 @@ exports[`Breadcrumb rendering renders correctly with overflow 1`] = ` font-size: 16px; font-weight: 400; height: 100%; - margin-bottom: 0px; - margin-left: 0px; - margin-right: 0px; - margin-top: 0px; outline: transparent; overflow: hidden; padding-bottom: 0; @@ -2258,10 +2242,6 @@ exports[`Breadcrumb rendering renders correctly with overflow and overflowIndex font-size: 16px; font-weight: 400; height: 100%; - margin-bottom: 0px; - margin-left: 0px; - margin-right: 0px; - margin-top: 0px; outline: transparent; overflow: hidden; padding-bottom: 0; diff --git a/packages/react/src/components/Button/BaseButton.styles.ts b/packages/react/src/components/Button/BaseButton.styles.ts index 984a7153b75cf..a11ded5b9ec6e 100644 --- a/packages/react/src/components/Button/BaseButton.styles.ts +++ b/packages/react/src/components/Button/BaseButton.styles.ts @@ -9,7 +9,7 @@ const noOutline: IRawStyle = { const iconStyle = (fontSize?: string | number): IRawStyle => { return { - fontSize: fontSize, + fontSize, margin: '0 4px', height: '16px', lineHeight: '16px', @@ -48,8 +48,6 @@ export const getStyles = memoizeFunction( boxSizing: 'border-box', cursor: 'pointer', display: 'inline-block', - // This removes the 2px margin Safari adds to all buttons - margin: 0, padding: '0 16px', textDecoration: 'none', textAlign: 'center', diff --git a/packages/react/src/components/Button/BaseButton.tsx b/packages/react/src/components/Button/BaseButton.tsx index f608de319dd04..57368ea0e5bbe 100644 --- a/packages/react/src/components/Button/BaseButton.tsx +++ b/packages/react/src/components/Button/BaseButton.tsx @@ -714,9 +714,9 @@ export class BaseButton extends React.Component