Skip to content

Commit

Permalink
Merge pull request #21538 from Yoast/fix-highlight-button-position-in…
Browse files Browse the repository at this point in the history 
…-shopify

Add column-gap to each column inside the AnalysisList
  • Loading branch information
@agnieszkaszuba
agnieszkaszuba committed Aug 19, 2024
2 parents b05b137 + 1999adc commit 00c0c39
Show file tree
Hide file tree
Showing 3 changed files with 55 additions and 37 deletions.
5 changes: 3 additions & 2 deletions packages/analysis-report/src/AnalysisResult.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,14 +26,15 @@ const AnalysisResultBase = styled.li`
display: flex;
align-items: flex-start;
position: relative;
gap: 12px;
`;

const ScoreIcon = styled( SvgIcon )`
margin: 3px 11px 0 0; // icon 13 + 11 right margin = 24 for the 8px grid.
margin: 3px 0 0 0;
`;

const AnalysisResultText = styled.p`
margin: 0 16px 0 0;
margin: 0;
flex: 1 1 auto;
color: ${ props => props.suppressedText ? "rgba(30,30,30,0.5)" : "inherit" };
`;
Expand Down
35 changes: 21 additions & 14 deletions packages/analysis-report/tests/__snapshots__/AnalysisResultTest.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,14 +72,15 @@ exports[`the AnalysisResult component matches the snapshot 1`] = `
-ms-flex-align: flex-start;
align-items: flex-start;
position: relative;
gap: 12px;
}
.c2 {
margin: 3px 11px 0 0;
margin: 3px 0 0 0;
}
.c3 {
margin: 0 16px 0 0;
margin: 0;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
Expand Down Expand Up @@ -210,14 +211,15 @@ exports[`the AnalysisResult component with a activated premium matches the snaps
-ms-flex-align: flex-start;
align-items: flex-start;
position: relative;
gap: 12px;
}
.c2 {
margin: 3px 11px 0 0;
margin: 3px 0 0 0;
}
.c3 {
margin: 0 16px 0 0;
margin: 0;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
Expand Down Expand Up @@ -315,14 +317,15 @@ exports[`the AnalysisResult component with a beta badge label matches the snapsh
-ms-flex-align: flex-start;
align-items: flex-start;
position: relative;
gap: 12px;
}
.c2 {
margin: 3px 11px 0 0;
margin: 3px 0 0 0;
}
.c3 {
margin: 0 16px 0 0;
margin: 0;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
Expand Down Expand Up @@ -440,14 +443,15 @@ exports[`the AnalysisResult component with disabled buttons matches the snapshot
-ms-flex-align: flex-start;
align-items: flex-start;
position: relative;
gap: 12px;
}
.c2 {
margin: 3px 11px 0 0;
margin: 3px 0 0 0;
}
.c3 {
margin: 0 16px 0 0;
margin: 0;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
Expand Down Expand Up @@ -542,14 +546,15 @@ exports[`the AnalysisResult component with hidden buttons matches the snapshot 1
-ms-flex-align: flex-start;
align-items: flex-start;
position: relative;
gap: 12px;
}
.c2 {
margin: 3px 11px 0 0;
margin: 3px 0 0 0;
}
.c3 {
margin: 0 16px 0 0;
margin: 0;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
Expand Down Expand Up @@ -662,14 +667,15 @@ exports[`the AnalysisResult component with html in the text matches the snapshot
-ms-flex-align: flex-start;
align-items: flex-start;
position: relative;
gap: 12px;
}
.c2 {
margin: 3px 11px 0 0;
margin: 3px 0 0 0;
}
.c3 {
margin: 0 16px 0 0;
margin: 0;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
Expand Down Expand Up @@ -764,14 +770,15 @@ exports[`the AnalysisResult component with suppressed text matches the snapshot
-ms-flex-align: flex-start;
align-items: flex-start;
position: relative;
gap: 12px;
}
.c2 {
margin: 3px 11px 0 0;
margin: 3px 0 0 0;
}
.c3 {
margin: 0 16px 0 0;
margin: 0;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
Expand Down
52 changes: 31 additions & 21 deletions packages/analysis-report/tests/__snapshots__/ContentAnalysisTest.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,14 +194,15 @@ exports[`ContentAnalysis the ContentAnalysis component with custom result catego
-ms-flex-align: flex-start;
align-items: flex-start;
position: relative;
gap: 12px;
}
.c18 {
margin: 3px 11px 0 0;
margin: 3px 0 0 0;
}
.c19 {
margin: 0 16px 0 0;
margin: 0;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
Expand Down Expand Up @@ -965,14 +966,15 @@ exports[`ContentAnalysis the ContentAnalysis component with disabled buttons mat
-ms-flex-align: flex-start;
align-items: flex-start;
position: relative;
gap: 12px;
}
.c18 {
margin: 3px 11px 0 0;
margin: 3px 0 0 0;
}
.c19 {
margin: 0 16px 0 0;
margin: 0;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
Expand Down Expand Up @@ -1701,14 +1703,15 @@ exports[`ContentAnalysis the ContentAnalysis component with hidden buttons match
-ms-flex-align: flex-start;
align-items: flex-start;
position: relative;
gap: 12px;
}
.c18 {
margin: 3px 11px 0 0;
margin: 3px 0 0 0;
}
.c19 {
margin: 0 16px 0 0;
margin: 0;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
Expand Down Expand Up @@ -2422,14 +2425,15 @@ exports[`ContentAnalysis the ContentAnalysis component with specified header lev
-ms-flex-align: flex-start;
align-items: flex-start;
position: relative;
gap: 12px;
}
.c18 {
margin: 3px 11px 0 0;
margin: 3px 0 0 0;
}
.c19 {
margin: 0 16px 0 0;
margin: 0;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
Expand Down Expand Up @@ -3193,22 +3197,23 @@ exports[`ContentAnalysis the ContentAnalysis component with upsell results match
-ms-flex-align: flex-start;
align-items: flex-start;
position: relative;
gap: 12px;
}
.c18 {
margin: 3px 11px 0 0;
margin: 3px 0 0 0;
}
.c19 {
margin: 0 16px 0 0;
margin: 0;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
color: inherit;
}
.c22 {
margin: 0 16px 0 0;
margin: 0;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
Expand Down Expand Up @@ -4004,14 +4009,15 @@ exports[`ContentAnalysis the ContentAnalysis component without language notice m
-ms-flex-align: flex-start;
align-items: flex-start;
position: relative;
gap: 12px;
}
.c18 {
margin: 3px 11px 0 0;
margin: 3px 0 0 0;
}
.c19 {
margin: 0 16px 0 0;
margin: 0;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
Expand Down Expand Up @@ -4775,14 +4781,15 @@ exports[`ContentAnalysis the ContentAnalysis component without problems and cons
-ms-flex-align: flex-start;
align-items: flex-start;
position: relative;
gap: 12px;
}
.c18 {
margin: 3px 11px 0 0;
margin: 3px 0 0 0;
}
.c19 {
margin: 0 16px 0 0;
margin: 0;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
Expand Down Expand Up @@ -5343,14 +5350,15 @@ exports[`ContentAnalysis the ContentAnalysis component without problems and impr
-ms-flex-align: flex-start;
align-items: flex-start;
position: relative;
gap: 12px;
}
.c18 {
margin: 3px 11px 0 0;
margin: 3px 0 0 0;
}
.c19 {
margin: 0 16px 0 0;
margin: 0;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
Expand Down Expand Up @@ -5911,14 +5919,15 @@ exports[`ContentAnalysis the ContentAnalysis component without problems matches
-ms-flex-align: flex-start;
align-items: flex-start;
position: relative;
gap: 12px;
}
.c18 {
margin: 3px 11px 0 0;
margin: 3px 0 0 0;
}
.c19 {
margin: 0 16px 0 0;
margin: 0;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
Expand Down Expand Up @@ -6568,14 +6577,15 @@ exports[`ContentAnalysis the ContentAnalysis component without problems, improve
-ms-flex-align: flex-start;
align-items: flex-start;
position: relative;
gap: 12px;
}
.c18 {
margin: 3px 11px 0 0;
margin: 3px 0 0 0;
}
.c19 {
margin: 0 16px 0 0;
margin: 0;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
Expand Down

0 comments on commit 00c0c39

Please sign in to comment.