Skip to content

Addressing Issue #3691 - SplitButton: In Safari, the SplitButton has mismatched heights #4797

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
oengusmacinog-zz merged 9 commits into from
May 21, 2018
Merged

Addressing Issue #3691 - SplitButton: In Safari, the SplitButton has mismatched heights #4797

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
107c4f2
margin 0 reset style for buttons in safari
oengusmacinog-zz May 7, 2018
402e56d
rush change
oengusmacinog-zz May 7, 2018
123622c
update snapshots
oengusmacinog-zz May 7, 2018
f03e022
experiments snapshot updates
oengusmacinog-zz May 7, 2018
b20088f
rush change in experiments
oengusmacinog-zz May 7, 2018
9bc167b
Move margin 0 to Fabric component as reset targeting button
oengusmacinog-zz May 21, 2018
1b0e373
update snapshots
oengusmacinog-zz May 21, 2018
1817565
rush change changes
oengusmacinog-zz May 21, 2018
a1d2a53
cleanup experiments
oengusmacinog-zz May 21, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions common/changes/@uifabric/experiments/safari-button-reset-3691_2018-05-07-21-12.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"changes": [
{
"packageName": "@uifabric/experiments",
"comment": "Set 'margin 0' reset style for buttons in Safari and updated snapshots in experiments",
"type": "patch"
}
],
"packageName": "@uifabric/experiments",
"email": "v-brgarl@microsoft.com"
}
11 changes: 11 additions & 0 deletions common/changes/office-ui-fabric-react/safari-button-reset-3691_2018-05-07-19-19.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"changes": [
{
"packageName": "office-ui-fabric-react",
"comment": "Set 'margin 0' reset style for buttons in Safari",
"type": "patch"
}
],
"packageName": "office-ui-fabric-react",
"email": "v-brgarl@microsoft.com"
}
8 changes: 8 additions & 0 deletions packages/experiments/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,10 @@ exports[`CommandBar renders commands correctly 1`] = `
font-size: 14px;
font-weight: 400;
height: 100%;
margin-bottom: 0px;

@micahgodbolt micahgodbolt May 21, 2018

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why are these still here?

margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
min-width: 40px;
outline: transparent;
padding-bottom: 0;
Expand Down Expand Up @@ -188,6 +192,10 @@ exports[`CommandBar renders commands correctly 1`] = `
font-size: 14px;
font-weight: 400;
height: 100%;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
min-width: 40px;
outline: transparent;
padding-bottom: 0;
Expand Down
8 changes: 8 additions & 0 deletions ...s/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -443,6 +443,10 @@ exports[`Breadcrumb basic rendering renders breadcumb correctly 2 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;
Expand Down Expand Up @@ -1162,6 +1166,10 @@ exports[`Breadcrumb basic rendering renders breadcumb correctly 4 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;
Expand Down
3 changes: 2 additions & 1 deletion packages/office-ui-fabric-react/src/components/Button/BaseButton.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,8 @@ export const getStyles = memoizeFunction((
cursor: 'pointer',
verticalAlign: 'top',
padding: '0 16px',
borderRadius: 0
borderRadius: 0,
margin: 0
}
],

Expand Down
1 change: 1 addition & 0 deletions packages/office-ui-fabric-react/src/components/Button/SplitButton/SplitButton.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ export const getStyles = memoizeFunction((
cursor: 'pointer',
verticalAlign: 'top',
width: 32,
margin: 0,
marginLeft: -1
},

Expand Down
24 changes: 24 additions & 0 deletions packages/office-ui-fabric-react/src/components/Button/__snapshots__/Button.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,10 @@ exports[`Button renders ActionButton correctly 1`] = `
font-size: 14px;
font-weight: 400;
height: 40px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
outline: transparent;
padding-bottom: 0;
padding-left: 4px;
Expand Down Expand Up @@ -139,6 +143,10 @@ exports[`Button renders CommandBarButton correctly 1`] = `
font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
font-size: 14px;
font-weight: 400;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
min-width: 40px;
outline: transparent;
padding-bottom: 0;
Expand Down Expand Up @@ -309,6 +317,10 @@ exports[`Button renders CompoundButton correctly 1`] = `
font-size: 14px;
font-weight: 400;
height: auto;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
max-width: 280px;
min-height: 72px;
outline: transparent;
Expand Down Expand Up @@ -450,6 +462,10 @@ exports[`Button renders DefaultButton correctly 1`] = `
font-size: 14px;
font-weight: 400;
height: 32px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
min-width: 80px;
outline: transparent;
padding-bottom: 0;
Expand Down Expand Up @@ -560,6 +576,10 @@ exports[`Button renders IconButton 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;
Expand Down Expand Up @@ -677,6 +697,10 @@ exports[`Button renders a DefaultButton with a keytip correctly 1`] = `
font-size: 14px;
font-weight: 400;
height: 32px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
min-width: 80px;
outline: transparent;
padding-bottom: 0;
Expand Down
8 changes: 8 additions & 0 deletions packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,6 +180,10 @@ exports[`ComboBox Renders ComboBox correctly 1`] = `
font-weight: 400;
height: 32px;
line-height: 30px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
outline: transparent;
padding-bottom: 0;
padding-left: 4px;
Expand Down Expand Up @@ -467,6 +471,10 @@ exports[`ComboBox renders a ComboBox with a Keytip correctly 1`] = `
font-weight: 400;
height: 32px;
line-height: 30px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
outline: transparent;
padding-bottom: 0;
padding-left: 4px;
Expand Down
4 changes: 4 additions & 0 deletions packages/office-ui-fabric-react/src/components/Facepile/__snapshots__/Facepile.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -193,6 +193,10 @@ exports[`Facepile renders Facepile correctly 1`] = `
font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
font-size: 14px;
font-weight: 400;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
outline: transparent;
padding-bottom: 0;
padding-left: 16px;
Expand Down
4 changes: 4 additions & 0 deletions packages/office-ui-fabric-react/src/components/Nav/__snapshots__/Nav.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,10 @@ exports[`Nav renders Nav correctly 1`] = `
font-weight: 400;
height: 36px;
line-height: 36px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
outline: transparent;
overflow: hidden;
padding-bottom: 0;
Expand Down
8 changes: 8 additions & 0 deletions packages/office-ui-fabric-react/src/components/Pivot/__snapshots__/Pivot.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,10 @@ exports[`Pivot renders Pivot correctly 1`] = `
font-size: 14px;
font-weight: 400;
height: 40px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
outline: transparent;
padding-bottom: 0;
padding-left: 4px;
Expand Down Expand Up @@ -149,6 +153,10 @@ exports[`Pivot renders Pivot correctly 1`] = `
font-size: 14px;
font-weight: 400;
height: 40px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
outline: transparent;
padding-bottom: 0;
padding-left: 4px;
Expand Down
8 changes: 8 additions & 0 deletions ...s/office-ui-fabric-react/src/components/SpinButton/__snapshots__/SpinButton.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,6 +173,10 @@ exports[`SpinButton renders SpinButton correctly 1`] = `
font-size: 14px;
font-weight: 400;
height: 50%;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
outline: none;
padding-bottom: 0;
padding-left: 0;
Expand Down Expand Up @@ -296,6 +300,10 @@ exports[`SpinButton renders SpinButton correctly 1`] = `
font-size: 14px;
font-weight: 400;
height: 50%;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
outline: none;
padding-bottom: 0;
padding-left: 0;
Expand Down
48 changes: 48 additions & 0 deletions ...bric-react/src/components/SwatchColorPicker/__snapshots__/SwatchColorPicker.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,10 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
font-size: 14px;
font-weight: 400;
height: 40px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
outline: transparent;
overflow: visible;
padding-bottom: 0px;
Expand Down Expand Up @@ -272,6 +276,10 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
font-size: 14px;
font-weight: 400;
height: 40px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
outline: transparent;
overflow: visible;
padding-bottom: 0px;
Expand Down Expand Up @@ -469,6 +477,10 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
font-size: 14px;
font-weight: 400;
height: 40px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
outline: transparent;
overflow: visible;
padding-bottom: 0px;
Expand Down Expand Up @@ -666,6 +678,10 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
font-size: 14px;
font-weight: 400;
height: 40px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
outline: transparent;
overflow: visible;
padding-bottom: 0px;
Expand Down Expand Up @@ -867,6 +883,10 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
font-size: 14px;
font-weight: 400;
height: 40px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
outline: transparent;
overflow: visible;
padding-bottom: 0px;
Expand Down Expand Up @@ -1064,6 +1084,10 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
font-size: 14px;
font-weight: 400;
height: 40px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
outline: transparent;
overflow: visible;
padding-bottom: 0px;
Expand Down Expand Up @@ -1261,6 +1285,10 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
font-size: 14px;
font-weight: 400;
height: 40px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
outline: transparent;
overflow: visible;
padding-bottom: 0px;
Expand Down Expand Up @@ -1458,6 +1486,10 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
font-size: 14px;
font-weight: 400;
height: 40px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
outline: transparent;
overflow: visible;
padding-bottom: 0px;
Expand Down Expand Up @@ -1659,6 +1691,10 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
font-size: 14px;
font-weight: 400;
height: 40px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
outline: transparent;
overflow: visible;
padding-bottom: 0px;
Expand Down Expand Up @@ -1856,6 +1892,10 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
font-size: 14px;
font-weight: 400;
height: 40px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
outline: transparent;
overflow: visible;
padding-bottom: 0px;
Expand Down Expand Up @@ -2053,6 +2093,10 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
font-size: 14px;
font-weight: 400;
height: 40px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
outline: transparent;
overflow: visible;
padding-bottom: 0px;
Expand Down Expand Up @@ -2250,6 +2294,10 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
font-size: 14px;
font-weight: 400;
height: 40px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
outline: transparent;
overflow: visible;
padding-bottom: 0px;
Expand Down
Loading