Skip to content

Commit ce1eb9a

Browse files
rezrahrezrah
committed
add InlineCode component
1 parent e61d466 commit ce1eb9a

62 files changed

Lines changed: 885 additions & 178 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.changeset/add-inline-code.md‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
---
2+
'@primer/react-brand': patch
3+
---
4+
5+
Added a new `InlineCode` component for short, in-situ code fragments.
6+
7+
Use it inside other components like `Card`, `CTABanner`, `River`, `Hero` and `Pillar`.
8+
9+
The native `code` elements remain supported in `Card`, `CTABanner` and `River` for backwards compatibility, but it's visual appearance has changed. It no longer features a border and has adjusted typographic spacing.
10+
11+
Example usage:
12+
13+
```js
14+
import {InlineCode} from '@primer/react-brand'
15+
```
16+
17+
```jsx
18+
<InlineCode>git status</InlineCode>
19+
```
20+
21+
Migration example for `Card`, `CTABanner` and `River`, which previously used `<code>`
22+
23+
```diff
24+
+ import {Card, InlineCode} from '@primer/react-brand'
25+
26+
- <Card.Heading>Run <code>git status</code></Card.Heading>
27+
+ <Card.Heading>Run <InlineCode>git status</InlineCode></Card.Heading>
28+
```

‎.changeset/calm-component-text-sizes.md‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,7 @@
22
'@primer/brand-mcp': patch
33
---
44

5-
Updated `primer_brand_page_design` tool to recommend component text defaults and `primer_brand_review` to warn about unnecessary `size` props.
5+
Updated MCP text guidance:
6+
7+
- Recommended component text defaults in `primer_brand_page_design` and warned about unnecessary `size` props in `primer_brand_review`.
8+
- Recommended `InlineCode` for short code fragments in authored React.

‎apps/next-docs/content/typography/InlineCode/index.mdx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
---
2+
title: Inline code
3+
description: Use InlineCode to render a short inline code fragment.
4+
keywords: ['code', 'command', 'filename', 'inline']
5+
show-tabs: false
6+
source: https://github.com/primer/brand/blob/main/packages/react/src/InlineCode/InlineCode.tsx
7+
storybook: '/brand/storybook/?path=/story/components-inlinecode--playground'
8+
---
9+
10+
```js
11+
import {InlineCode} from '@primer/react-brand'
12+
```
13+
14+
## Usage
15+
16+
Use inline code for short code fragments such as commands, filenames, API names, configuration keys and values.
17+
18+
## Examples
19+
20+
### Default
21+
22+
```jsx live
23+
<Text as="p">
24+
Install Primer Brand with <InlineCode>npm install @primer/react-brand</InlineCode>.
25+
</Text>
26+
```
27+
28+
### In a heading
29+
30+
```jsx live
31+
<Heading>
32+
Work directly with your GitHub Issues via <InlineCode>/mcp</InlineCode> support
33+
</Heading>
34+
```
35+
36+
## Component props
37+
38+
`InlineCode` renders a native `code` element and accepts its standard HTML attributes.

‎packages/design-tokens/scripts/build-tokens.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -254,6 +254,7 @@ const darkJson = require('../src/tokens/base/colors/dark')
254254
`tokens/functional/components/token/colors.json`,
255255
`tokens/functional/components/link/colors.json`,
256256
`tokens/functional/components/inline-link/colors.json`,
257+
`tokens/functional/components/inline-code/colors.json`,
257258
`tokens/functional/components/control/colors.js`,
258259
`tokens/functional/components/subdomain-nav-bar/colors.js`,
259260
`tokens/functional/components/comparison-table/colors.js`,

‎packages/design-tokens/src/tokens/functional/components/inline-code/colors.json‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"InlineCode": {
3+
"color": {
4+
"fg": {
5+
"value": "var(--brand-color-text-muted)",
6+
"dark": "var(--brand-color-text-muted)"
7+
}
8+
},
9+
"bgColor": {
10+
"value": "var(--base-color-scale-gray-1)",
11+
"dark": "var(--base-color-scale-gray-7)"
12+
}
13+
}
14+
}

‎packages/mcp/content/page-design.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@ A page has one clear headline and a calm step-down from there.
7272

7373
- **Do** — use the default `size` of component-owned text such as `Card.Heading`, `Hero.Heading`, and `FAQ.Heading`. Set `size` on standalone `Heading` and `Text`.
7474
- **Do** — use a single hero heading, make secondary section headings a clear step smaller, and keep body copy regular weight. Left-align long-form copy; reserve centering for short hero or section intros.
75+
- **Do** — use `InlineCode` for short code fragments and code blocks for multiline examples.
7576
- **Don't** — pass `size` to a component-owned heading, description, label, or other text unless the brief requires an override. Changing `as` for semantic heading order does not require changing `size`.
7677
- **Don't** — size secondary headings close to the hero, set body text in heavy weights, or center long paragraphs.
7778

‎packages/react/src/CTABanner/CTABanner.features.stories.tsx‎

Lines changed: 34 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {Button} from '../Button'
55
import {ActionMenu} from '../ActionMenu'
66

77
import {CTABanner} from './CTABanner'
8-
import {Grid, InlineLink, Section, Stack, Text, TextCursorAnimation, ThemeProvider} from '../'
8+
import {Grid, InlineCode, InlineLink, Section, Stack, Text, TextCursorAnimation, ThemeProvider} from '../'
99

1010
import lightNarrowBg from '../fixtures/images/light-vertical-banner.png'
1111
import lightWideBg from '../fixtures/images/light-horizontal-banner.png'
@@ -453,11 +453,11 @@ export const WithInlineCodeElement: Story = {
453453
<Text as="p">Default variant:</Text>
454454
<CTABanner>
455455
<CTABanner.Heading>
456-
Use any <code>/model</code> parallelize with <code>/fleet</code>
456+
Use any <InlineCode>/model</InlineCode> parallelize with <InlineCode>/fleet</InlineCode>
457457
</CTABanner.Heading>
458458
<CTABanner.Description>
459-
Use <code>/model</code> to switch, then <code>/fleet</code> to execute in parallel or run multiple models at
460-
once.
459+
Use <InlineCode>/model</InlineCode> to switch, then <InlineCode>/fleet</InlineCode> to execute in parallel
460+
or run multiple models at once.
461461
</CTABanner.Description>
462462
<CTABanner.ButtonGroup>
463463
<Button>Get started</Button>
@@ -468,11 +468,11 @@ export const WithInlineCodeElement: Story = {
468468
<Text as="p">Custom background color:</Text>
469469
<CTABanner backgroundColor="default" hasBorder>
470470
<CTABanner.Heading>
471-
Use any <code>/model</code> parallelize with <code>/fleet</code>
471+
Use any <InlineCode>/model</InlineCode> parallelize with <InlineCode>/fleet</InlineCode>
472472
</CTABanner.Heading>
473473
<CTABanner.Description>
474-
Use <code>/model</code> to switch, then <code>/fleet</code> to execute in parallel or run multiple models at
475-
once.
474+
Use <InlineCode>/model</InlineCode> to switch, then <InlineCode>/fleet</InlineCode> to execute in parallel
475+
or run multiple models at once.
476476
</CTABanner.Description>
477477
<CTABanner.ButtonGroup>
478478
<Button>Get started</Button>
@@ -483,11 +483,11 @@ export const WithInlineCodeElement: Story = {
483483
<Text as="p">Balanced variant:</Text>
484484
<CTABanner variant="balanced">
485485
<CTABanner.Heading>
486-
Use any <code>/model</code> parallelize with <code>/fleet</code>
486+
Use any <InlineCode>/model</InlineCode> parallelize with <InlineCode>/fleet</InlineCode>
487487
</CTABanner.Heading>
488488
<CTABanner.Description>
489-
Use <code>/model</code> to switch, then <code>/fleet</code> to execute in parallel or run multiple models at
490-
once.
489+
Use <InlineCode>/model</InlineCode> to switch, then <InlineCode>/fleet</InlineCode> to execute in parallel
490+
or run multiple models at once.
491491
</CTABanner.Description>
492492
<CTABanner.ButtonGroup>
493493
<Button>Get started</Button>
@@ -499,11 +499,11 @@ export const WithInlineCodeElement: Story = {
499499
<Text as="p">Minimal variant:</Text>
500500
<CTABanner variant="minimal">
501501
<CTABanner.Heading>
502-
Use any <code>/model</code> parallelize with <code>/fleet</code>
502+
Use any <InlineCode>/model</InlineCode> parallelize with <InlineCode>/fleet</InlineCode>
503503
</CTABanner.Heading>
504504
<CTABanner.Description>
505-
Use <code>/model</code> to switch, then <code>/fleet</code> to execute in parallel or run multiple models at
506-
once.
505+
Use <InlineCode>/model</InlineCode> to switch, then <InlineCode>/fleet</InlineCode> to execute in parallel
506+
or run multiple models at once.
507507
</CTABanner.Description>
508508
<CTABanner.ButtonGroup>
509509
<Button>Get started</Button>
@@ -516,11 +516,11 @@ export const WithInlineCodeElement: Story = {
516516
<Section backgroundColor="default">
517517
<CTABanner>
518518
<CTABanner.Heading>
519-
Use any <code>/model</code> parallelize with <code>/fleet</code>
519+
Use any <InlineCode>/model</InlineCode> parallelize with <InlineCode>/fleet</InlineCode>
520520
</CTABanner.Heading>
521521
<CTABanner.Description>
522-
Use <code>/model</code> to switch, then <code>/fleet</code> to execute in parallel or run multiple
523-
models at once.
522+
Use <InlineCode>/model</InlineCode> to switch, then <InlineCode>/fleet</InlineCode> to execute in
523+
parallel or run multiple models at once.
524524
</CTABanner.Description>
525525
<CTABanner.ButtonGroup>
526526
<Button>Get started</Button>
@@ -533,11 +533,11 @@ export const WithInlineCodeElement: Story = {
533533
<Text as="p">Start aligned with border:</Text>
534534
<CTABanner align="start" hasBorder>
535535
<CTABanner.Heading>
536-
Use any <code>/model</code> parallelize with <code>/fleet</code>
536+
Use any <InlineCode>/model</InlineCode> parallelize with <InlineCode>/fleet</InlineCode>
537537
</CTABanner.Heading>
538538
<CTABanner.Description>
539-
Use <code>/model</code> to switch, then <code>/fleet</code> to execute in parallel or run multiple models at
540-
once.
539+
Use <InlineCode>/model</InlineCode> to switch, then <InlineCode>/fleet</InlineCode> to execute in parallel
540+
or run multiple models at once.
541541
</CTABanner.Description>
542542
<CTABanner.ButtonGroup>
543543
<Button>Get started</Button>
@@ -548,6 +548,19 @@ export const WithInlineCodeElement: Story = {
548548
),
549549
}
550550

551+
export const WithNativeCodeElement: Story = {
552+
render: () => (
553+
<CTABanner>
554+
<CTABanner.Heading>
555+
Native <code>/mcp</code> remains supported
556+
</CTABanner.Heading>
557+
<CTABanner.Description>
558+
Existing authored content can continue using the native <code>code</code> element.
559+
</CTABanner.Description>
560+
</CTABanner>
561+
),
562+
}
563+
551564
export const WithLogo: Story = {
552565
render: () => (
553566
<Stack direction="vertical" gap="spacious" padding="none">
@@ -628,7 +641,8 @@ export const WithDuotoneText: Story = {
628641
Where the most ambitious teams <b>build great things</b>
629642
</CTABanner.Heading>
630643
<CTABanner.Description>
631-
Use <b>duotone emphasis</b> to highlight key parts of your headline. Wrap text in a <code>b</code> tag.
644+
Use <b>duotone emphasis</b> to highlight key parts of your headline. Wrap text in an{' '}
645+
<InlineCode>b</InlineCode> tag.
632646
</CTABanner.Description>
633647
<CTABanner.ButtonGroup>
634648
<Button>Get started for free</Button>

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

Lines changed: 11 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -281,41 +281,18 @@
281281

282282
.CTABanner-heading code,
283283
.CTABanner-description code {
284-
font-size: inherit;
285284
font-family: var(--brand-fontStack-monospace);
286-
background-color: var(--brand-color-canvas-default);
287-
padding: 0 var(--base-size-4) 0;
288-
margin-inline: var(--base-size-2);
289-
border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);
290-
border-radius: var(--brand-borderRadius-small);
291-
box-shadow: var(--brand-borderWidth-thin) var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-default);
292-
}
293-
294-
.CTABanner--bgColor-default .CTABanner-heading code,
295-
.CTABanner--bgColor-default .CTABanner-description code {
296-
background-color: var(--brand-color-canvas-subtle);
297-
}
298-
299-
.CTABanner-description code {
300-
padding: 0 var(--base-size-4) 0;
301-
}
302-
303-
.CTABanner-heading.CTABanner-heading:has(code) {
304-
line-height: calc(1lh * 2);
305-
}
306-
307-
@media screen and (min-width: 63.25rem) {
308-
.CTABanner--variant-balanced .CTABanner-heading.CTABanner-heading:has(code) {
309-
line-height: calc(1lh * 2.8);
310-
}
311-
}
312-
313-
.CTABanner--variant-minimal .CTABanner-heading.CTABanner-heading:has(code) {
314-
line-height: calc(1lh * 1.9);
315-
}
316-
317-
.CTABanner-description.CTABanner-description:has(code) {
318-
line-height: calc(1lh * 1.25);
285+
/* optical resize relative to parent. monospace tends to be a little taller than sans-serif */
286+
font-size: calc(1em - 1px);
287+
font-weight: var(--base-text-weight-medium);
288+
/* Keep the background clear of adjacent lines when large text wraps. */
289+
line-height: 1.6;
290+
color: var(--brand-InlineCode-color-fg);
291+
background-color: var(--brand-InlineCode-bgColor);
292+
padding-block: 0;
293+
padding-inline: var(--base-size-4);
294+
border-radius: var(--base-size-2);
295+
white-space: nowrap;
319296
}
320297

321298
.CTABanner-buttonGroup {

‎packages/react/src/CTABanner/CTABanner.module.css.d.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
declare const styles: {
22
readonly "CTABanner": string;
3-
readonly "CTABanner--bgColor-default": string;
43
readonly "CTABanner--shadow": string;
54
readonly "CTABanner--variant-balanced": string;
65
readonly "CTABanner--variant-default": string;

‎packages/react/src/CTABanner/CTABanner.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {ButtonGroup} from '../ButtonGroup'
99
/**
1010
* Design tokens
1111
*/
12+
import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/inline-code/colors-with-modes.css'
1213
import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/cta-banner/colors-with-modes.css'
1314

1415
/** * Main Stylesheet (as a CSS Module) */
@@ -201,10 +202,6 @@ const Root = forwardRef(
201202

202203
const defaultAlign = variant === 'balanced' || variant === 'minimal' ? 'start' : align
203204

204-
const hasSystemBackgroundColor =
205-
typeof backgroundColor === 'string' &&
206-
CTABannerBackgroundColors.includes(backgroundColor as (typeof CTABannerBackgroundColors)[number])
207-
208205
if (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test') {
209206
if (variant === 'balanced' && !ImageChild) {
210207
// eslint-disable-next-line no-console
@@ -226,7 +223,6 @@ const Root = forwardRef(
226223
styles.CTABanner,
227224
hasShadow && styles['CTABanner--shadow'],
228225
styles[`CTABanner--variant-${variant}`],
229-
hasSystemBackgroundColor && styles[`CTABanner--bgColor-${backgroundColor}`],
230226
className,
231227
)}
232228
style={{...backgroundStyles, ...style}}

0 commit comments

Comments
 (0)