Skip to content

Commit 9eaae1a

Browse files
rezrahrezrah
committed
fix 3 qa design bugs to flexsuite
1 parent e54a442 commit 9eaae1a

5 files changed

Lines changed: 75 additions & 18 deletions

File tree

‎.changeset/warm-logos-glow.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
'@primer/react-brand': patch
3+
'@primer/brand-css': patch
4+
---
5+
6+
Updated the `LogoSuite` gridline expressive layout to use slightly larger tablet logobar spacing, improving alignment with the overview template design.
7+
8+
Set `LogoSuite` mobile logo sizing to 32px, matching the tablet presentation and improving consistency across smaller viewports.
9+
10+
Updated the `LogoSuite` gridline expressive tablet layout to use fixed 91px inline edge spacing instead of a max-width cap.

‎packages/react/src/LogoSuite/LogoSuite.module.css‎

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -66,18 +66,7 @@
6666
.LogoSuite__logobar--variant-emphasis img,
6767
.LogoSuite__logobar--variant-emphasis a {
6868
width: auto;
69-
height: var(--base-size-28);
70-
}
71-
72-
@media screen and (min-width: 48rem) {
73-
.LogoSuite__logobar--variant-muted svg,
74-
.LogoSuite__logobar--variant-muted img,
75-
.LogoSuite__logobar--variant-muted a,
76-
.LogoSuite__logobar--variant-emphasis svg,
77-
.LogoSuite__logobar--variant-emphasis img,
78-
.LogoSuite__logobar--variant-emphasis a {
79-
height: var(--base-size-32);
80-
}
69+
height: var(--base-size-32);
8170
}
8271

8372
.LogoSuite__logobar--variant-muted svg,
@@ -237,7 +226,6 @@
237226
.LogoSuite--gridline-expressive .LogoSuite__content {
238227
padding-inline: 0;
239228
gap: 0;
240-
max-width: 618px; /* From the Figma design */
241229
}
242230

243231
.LogoSuite--gridline-expressive .LogoSuite__textContainer {
@@ -272,8 +260,12 @@
272260
}
273261

274262
@media screen and (min-width: 48rem) {
263+
.LogoSuite--gridline-expressive {
264+
padding-inline: 91px;
265+
}
266+
275267
.LogoSuite--gridline-expressive .LogoSuite__logobarContainer {
276-
padding: var(--base-size-36);
268+
padding: var(--base-size-40);
277269
}
278270
.LogoSuite--gridline-expressive .LogoSuite__content {
279271
border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
@@ -284,6 +276,10 @@
284276
}
285277

286278
@media screen and (min-width: 64rem) {
279+
.LogoSuite--gridline-expressive {
280+
padding-inline: 0;
281+
}
282+
287283
.LogoSuite--gridline-expressive .LogoSuite__content {
288284
max-width: 1280px;
289285
}

‎packages/react/src/recipes/Flexsuite/Overview/FlexSuiteAIOverview.module.css‎

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,6 @@
4545
width: 100%;
4646
height: 100%;
4747
padding: 0;
48-
border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
4948
border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
5049
}
5150

@@ -71,6 +70,39 @@
7170
min-block-size: 100%;
7271
}
7372

73+
@media screen and (min-width: 48rem) and (max-width: 63.24rem) {
74+
.cardGridContent {
75+
box-sizing: border-box;
76+
padding-inline: 91px; /* This is intentionally very specific for Refactor*/
77+
}
78+
79+
.cardGridItem {
80+
container-type: inline-size;
81+
padding: var(--base-size-24);
82+
border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
83+
}
84+
85+
/* we reassign grid areas at this breakpoint to match designs where the icon is left of the text instead of above */
86+
@container (min-width: 30rem) {
87+
.resourceCard {
88+
grid-template-columns: auto minmax(0, 1fr);
89+
grid-template-areas:
90+
'icon tokens'
91+
'icon label'
92+
'icon heading'
93+
'icon description'
94+
'icon action';
95+
grid-template-rows: auto auto auto auto auto;
96+
column-gap: var(--base-size-48);
97+
align-items: start;
98+
}
99+
100+
.resourceCardIcon {
101+
margin-block-end: 0;
102+
}
103+
}
104+
}
105+
74106
.fullWidthTabsPanel :global([class*='Tabs__panelContainer']) {
75107
width: 100%;
76108
justify-self: stretch;

‎packages/react/src/recipes/Flexsuite/Overview/FlexSuiteAIOverview.module.css.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ declare const styles: {
1010
readonly "heroTrailingPeekImage": string;
1111
readonly "page": string;
1212
readonly "resourceCard": string;
13+
readonly "resourceCardIcon": string;
1314
};
1415
export = styles;
1516

‎packages/react/src/recipes/Flexsuite/Overview/FlexSuiteAIOverview.tsx‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,13 @@ export function FlexSuiteAIOverviewTemplate({content}: FlexSuiteAIOverviewTempla
156156
ctaText={content.common.learnMore}
157157
className={styles.resourceCard}
158158
>
159-
<Card.Icon icon={cardIcons[index]} color="green" hasBackground size="medium" />
159+
<Card.Icon
160+
icon={cardIcons[index]}
161+
color="green"
162+
hasBackground
163+
size="medium"
164+
className={styles.resourceCardIcon}
165+
/>
160166
<Card.Heading>{card.heading}</Card.Heading>
161167
<Card.Description>{card.description}</Card.Description>
162168
</Card>
@@ -294,7 +300,13 @@ export function FlexSuiteAIOverviewTemplate({content}: FlexSuiteAIOverviewTempla
294300
ctaText={content.common.learnMore}
295301
className={styles.resourceCard}
296302
>
297-
<Card.Icon icon={cardIcons[index]} color="green" hasBackground size="medium" />
303+
<Card.Icon
304+
icon={cardIcons[index]}
305+
color="green"
306+
hasBackground
307+
size="medium"
308+
className={styles.resourceCardIcon}
309+
/>
298310
<Card.Tokens>
299311
<Token>{card.tag}</Token>
300312
</Card.Tokens>
@@ -364,7 +376,13 @@ export function FlexSuiteAIOverviewTemplate({content}: FlexSuiteAIOverviewTempla
364376
ctaText={content.common.learnMore}
365377
className={styles.resourceCard}
366378
>
367-
<Card.Icon icon={cardIcons[index]} color="green" hasBackground size="medium" />
379+
<Card.Icon
380+
icon={cardIcons[index]}
381+
color="green"
382+
hasBackground
383+
size="medium"
384+
className={styles.resourceCardIcon}
385+
/>
368386
<Card.Tokens>
369387
<Token>{card.tag}</Token>
370388
</Card.Tokens>

0 commit comments

Comments
 (0)