Skip to content

Commit

Permalink
fix(react): make button children rendering consistent for both button…
Browse files Browse the repository at this point in the history 
… and button as anchor root element (#32380)
  • Loading branch information
@Hotell
Hotell authored Oct 16, 2024
1 parent 9b4cd5a commit 263ead6
Show file tree
Hide file tree
Showing 29 changed files with 428 additions and 107 deletions.
7 changes: 7 additions & 0 deletions change/@fluentui-react-17740d4a-05ce-4bad-a6de-44a460c3b3ed.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "fix: make button children rendering equal for both button and button as anchor",
"packageName": "@fluentui/react",
"email": "martinhochel@microsoft.com",
"dependentChangeType": "patch"
}
16 changes: 12 additions & 4 deletions .../react-experiments/src/components/MicroFeedback/__snapshots__/MicroFeedback.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,17 +44,19 @@ exports[`MicroFeedback renders correctly with inline prop set 1`] = `
{
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
align-items: center;
background-color: transparent;
border-radius: 2px;
border: none;
box-sizing: border-box;
color: #0078d4;
cursor: pointer;
display: inline-block;
display: inline-flex;
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;
height: 32px;
justify-content: center;
outline: transparent;
padding-bottom: 0;
padding-left: 4px;
Expand Down Expand Up @@ -191,17 +193,19 @@ exports[`MicroFeedback renders correctly with inline prop set 1`] = `
{
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
align-items: center;
background-color: transparent;
border-radius: 2px;
border: none;
box-sizing: border-box;
color: #0078d4;
cursor: pointer;
display: inline-block;
display: inline-flex;
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;
height: 32px;
justify-content: center;
outline: transparent;
padding-bottom: 0;
padding-left: 4px;
Expand Down Expand Up @@ -378,17 +382,19 @@ exports[`MicroFeedback renders correctly with no props 1`] = `
{
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
align-items: center;
background-color: transparent;
border-radius: 2px;
border: none;
box-sizing: border-box;
color: #0078d4;
cursor: pointer;
display: inline-block;
display: inline-flex;
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;
height: 32px;
justify-content: center;
outline: transparent;
padding-bottom: 0;
padding-left: 4px;
Expand Down Expand Up @@ -525,17 +531,19 @@ exports[`MicroFeedback renders correctly with no props 1`] = `
{
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
align-items: center;
background-color: transparent;
border-radius: 2px;
border: none;
box-sizing: border-box;
color: #0078d4;
cursor: pointer;
display: inline-block;
display: inline-flex;
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;
height: 32px;
justify-content: center;
outline: transparent;
padding-bottom: 0;
padding-left: 4px;
Expand Down
56 changes: 42 additions & 14 deletions packages/react-experiments/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,18 +37,20 @@ exports[`Pagination render buttons Pagination correctly 1`] = `
{
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
align-items: center;
background-color: transparent;
border-color: #f3f2f1;
border-radius: 2px;
border: none;
box-sizing: border-box;
color: #c8c6c4;
cursor: default;
display: inline-block;
display: inline-flex;
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;
height: 32px;
justify-content: center;
outline: transparent;
padding-bottom: 0;
padding-left: 4px;
Expand Down Expand Up @@ -217,18 +219,20 @@ exports[`Pagination render buttons Pagination correctly 1`] = `
{
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
align-items: center;
background-color: transparent;
border-color: #f3f2f1;
border-radius: 2px;
border: none;
box-sizing: border-box;
color: #c8c6c4;
cursor: default;
display: inline-block;
display: inline-flex;
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;
height: 32px;
justify-content: center;
outline: transparent;
padding-bottom: 0;
padding-left: 4px;
Expand Down Expand Up @@ -384,16 +388,18 @@ exports[`Pagination render buttons Pagination correctly 1`] = `
{
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
align-items: center;
background-color: transparent;
border-radius: 2px;
border: none;
box-sizing: border-box;
color: #000000;
cursor: pointer;
display: inline-block;
display: inline-flex;
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;
justify-content: center;
min-height: 32px;
min-width: 32px;
outline: transparent;
Expand Down Expand Up @@ -508,16 +514,18 @@ exports[`Pagination render buttons Pagination correctly 1`] = `
{
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
align-items: center;
background-color: transparent;
border-radius: 2px;
border: none;
box-sizing: border-box;
color: #000000;
cursor: pointer;
display: inline-block;
display: inline-flex;
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;
justify-content: center;
min-height: 32px;
min-width: 32px;
outline: transparent;
Expand Down Expand Up @@ -632,16 +640,18 @@ exports[`Pagination render buttons Pagination correctly 1`] = `
{
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
align-items: center;
background-color: transparent;
border-radius: 2px;
border: none;
box-sizing: border-box;
color: #000000;
cursor: pointer;
display: inline-block;
display: inline-flex;
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;
justify-content: center;
min-height: 32px;
min-width: 32px;
outline: transparent;
Expand Down Expand Up @@ -756,16 +766,18 @@ exports[`Pagination render buttons Pagination correctly 1`] = `
{
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
align-items: center;
background-color: transparent;
border-radius: 2px;
border: none;
box-sizing: border-box;
color: #000000;
cursor: pointer;
display: inline-block;
display: inline-flex;
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;
justify-content: center;
min-height: 32px;
min-width: 32px;
outline: transparent;
Expand Down Expand Up @@ -880,16 +892,18 @@ exports[`Pagination render buttons Pagination correctly 1`] = `
{
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
align-items: center;
background-color: transparent;
border-radius: 2px;
border: none;
box-sizing: border-box;
color: #000000;
cursor: pointer;
display: inline-block;
display: inline-flex;
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;
justify-content: center;
min-height: 32px;
min-width: 32px;
outline: transparent;
Expand Down Expand Up @@ -1015,17 +1029,19 @@ exports[`Pagination render buttons Pagination correctly 1`] = `
{
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
align-items: center;
background-color: transparent;
border-radius: 2px;
border: none;
box-sizing: border-box;
color: #0078d4;
cursor: pointer;
display: inline-block;
display: inline-flex;
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;
height: 32px;
justify-content: center;
outline: transparent;
padding-bottom: 0;
padding-left: 4px;
Expand Down Expand Up @@ -1194,17 +1210,19 @@ exports[`Pagination render buttons Pagination correctly 1`] = `
{
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
align-items: center;
background-color: transparent;
border-radius: 2px;
border: none;
box-sizing: border-box;
color: #0078d4;
cursor: pointer;
display: inline-block;
display: inline-flex;
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;
height: 32px;
justify-content: center;
outline: transparent;
padding-bottom: 0;
padding-left: 4px;
Expand Down Expand Up @@ -1380,18 +1398,20 @@ exports[`Pagination render comboBox Pagination correctly 1`] = `
{
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
align-items: center;
background-color: #f3f2f1;
border-color: #f3f2f1;
border-radius: 2px;
border: none;
box-sizing: border-box;
color: #c8c6c4;
cursor: default;
display: inline-block;
display: inline-flex;
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;
height: 32px;
justify-content: center;
outline: transparent;
padding-bottom: 0;
padding-left: 4px;
Expand Down Expand Up @@ -1528,18 +1548,20 @@ exports[`Pagination render comboBox Pagination correctly 1`] = `
{
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
align-items: center;
background-color: #f3f2f1;
border-color: #f3f2f1;
border-radius: 2px;
border: none;
box-sizing: border-box;
color: #c8c6c4;
cursor: default;
display: inline-block;
display: inline-flex;
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;
height: 32px;
justify-content: center;
outline: transparent;
padding-bottom: 0;
padding-left: 4px;
Expand Down Expand Up @@ -1894,17 +1916,19 @@ exports[`Pagination render comboBox Pagination correctly 1`] = `
{
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
align-items: center;
background-color: transparent;
border-radius: 2px;
border: none;
box-sizing: border-box;
color: #605e5c;
cursor: default;
display: inline-block;
display: inline-flex;
font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
font-size: 12px;
font-weight: 400;
height: 100%;
justify-content: center;
line-height: 30px;
outline: transparent;
padding-bottom: 0;
Expand Down Expand Up @@ -2064,17 +2088,19 @@ exports[`Pagination render comboBox Pagination correctly 1`] = `
{
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
align-items: center;
background-color: transparent;
border-radius: 2px;
border: none;
box-sizing: border-box;
color: #0078d4;
cursor: pointer;
display: inline-block;
display: inline-flex;
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;
height: 32px;
justify-content: center;
outline: transparent;
padding-bottom: 0;
padding-left: 4px;
Expand Down Expand Up @@ -2210,17 +2236,19 @@ exports[`Pagination render comboBox Pagination correctly 1`] = `
{
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
align-items: center;
background-color: transparent;
border-radius: 2px;
border: none;
box-sizing: border-box;
color: #0078d4;
cursor: pointer;
display: inline-block;
display: inline-flex;
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;
height: 32px;
justify-content: center;
outline: transparent;
padding-bottom: 0;
padding-left: 4px;
Expand Down
Loading

0 comments on commit 263ead6

Please sign in to comment.