Skip to content

Commit 2fb6924

Browse files
rezrahrezrah
authored
Fix left/right naming (#45)
* change left to start and right to end * add changeset
1 parent b3bb3f0 commit 2fb6924

File tree

9 files changed

+52
-35
lines changed

9 files changed

+52
-35
lines changed

‎.changeset/shaggy-terms-film.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
---
2+
'@primer/react-brand': minor
3+
---
4+
> **Warning**
5+
> This is a breaking change, but as the library is a pre-v1 release we are publishing this update as a `minor` change.
6+
> Please read the following instructions carefully before updating:
7+
8+
### Updated references for "left" and "right" to "start" and "end"
9+
10+
For improved i18n support and closer alignment with our Figma naming conventions, we have updated the references for "left" and "right" to "start" and "end" respectively in `Hero` and `River` components.
11+
12+
```diff
13+
- <River align="left">
14+
- <River align="right">
15+
+ <River align="start">
16+
+ <River align="end">
17+
```

‎docs/content/components/Hero.mdx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -57,10 +57,10 @@ import {Hero} from '@primer/react-brand'
5757

5858
### Hero
5959

60-
| Name | Type | Default | Description |
61-
| :-------------------------------------- | :----------------------------------------------------------------------------------------------------------------- | :------: | :-------------------------------------- |
62-
| `heading` <Label>Required</Label> | `string` | | Primary heading, which defaults to a H1 |
63-
| `primaryAction` <Label>Required</Label> | [Object](https://github.com/primer/react-brand/blob/ca2d3002ba6f7ca9c719f80077c4d95246f33410/src/Hero/Hero.tsx#L8) | | Primary call to action |
64-
| `secondaryAction` | [Object](https://github.com/primer/react-brand/blob/ca2d3002ba6f7ca9c719f80077c4d95246f33410/src/Hero/Hero.tsx#L8) | | Optional secondary call to action |
65-
| `align` | `'center'`, `'left'` | `'left'` | Optional text alignment |
66-
| `description` | `string` | | Optional accompanying body text |
60+
| Name | Type | Default | Description |
61+
| :-------------------------------------- | :----------------------------------------------------------------------------------------------------------------- | :-------: | :-------------------------------------- |
62+
| `heading` <Label>Required</Label> | `string` | | Primary heading, which defaults to a H1 |
63+
| `primaryAction` <Label>Required</Label> | [Object](https://github.com/primer/react-brand/blob/ca2d3002ba6f7ca9c719f80077c4d95246f33410/src/Hero/Hero.tsx#L8) | | Primary call to action |
64+
| `secondaryAction` | [Object](https://github.com/primer/react-brand/blob/ca2d3002ba6f7ca9c719f80077c4d95246f33410/src/Hero/Hero.tsx#L8) | | Optional secondary call to action |
65+
| `align` | `'center'`, `'start'` | `'start'` | Optional text alignment |
66+
| `description` | `string` | | Optional accompanying body text |

‎docs/content/components/River.mdx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ import {River} from '@primer/react-brand'
4040
<Link href="#">Call to action</Link>
4141
</River.Content>
4242
</River>
43-
<River align="right">
43+
<River align="end">
4444
<River.Visual>
4545
<img
4646
src="https://via.placeholder.com/600x400/f5f5f5/f5f5f5.png"
@@ -152,10 +152,10 @@ import {River} from '@primer/react-brand'
152152

153153
### River <Label>Required</Label>
154154

155-
| Name | Type | Default | Description |
156-
| :--------------- | :------------------------------ | :-------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------- |
157-
| `align` | `'left'`, `'right'`, `'center'` | <PropTableValues values={[defaultRiverAlign]} /> | Alignment of text content relative to the Visual position |
158-
| `imageTextRatio` | `'50:50'`, `'60:40'` | <PropTableValues values={[defaultRiverImageTextRatio]} /> | The aspect ratio applied to the image in relation to the adjacent text. Affects overall layout proportions. |
155+
| Name | Type | Default | Description |
156+
| :--------------- | :----------------------------- | :-------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------- |
157+
| `align` | `'start'`, `'end'`, `'center'` | <PropTableValues values={[defaultRiverAlign]} /> | Alignment of text content relative to the Visual position |
158+
| `imageTextRatio` | `'50:50'`, `'60:40'` | <PropTableValues values={[defaultRiverImageTextRatio]} /> | The aspect ratio applied to the image in relation to the adjacent text. Affects overall layout proportions. |
159159

160160
### River.Visual <Label>Required</Label>
161161

‎src/River/River.fixtures.stories.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const PlaceholderImage = () => (
1717
)
1818

1919
export const Left: ComponentStory<typeof River> = () => (
20-
<River align="left">
20+
<River align="start">
2121
<River.Visual>
2222
<PlaceholderImage />
2323
</River.Visual>
@@ -33,7 +33,7 @@ export const Left: ComponentStory<typeof River> = () => (
3333
)
3434

3535
export const Right: ComponentStory<typeof River> = () => (
36-
<River align="right">
36+
<River align="end">
3737
<River.Visual>
3838
<PlaceholderImage />
3939
</River.Visual>
@@ -96,7 +96,7 @@ ColumnRatio5050.storyName = '50:50 image ratio'
9696

9797
export const AlternatingLayout: ComponentStory<typeof River> = () => (
9898
<>
99-
<River align="left">
99+
<River align="start">
100100
<River.Visual>
101101
<PlaceholderImage />
102102
</River.Visual>
@@ -109,7 +109,7 @@ export const AlternatingLayout: ComponentStory<typeof River> = () => (
109109
<Link href="#">Call to action</Link>
110110
</River.Content>
111111
</River>
112-
<River align="right">
112+
<River align="end">
113113
<River.Visual>
114114
<PlaceholderImage />
115115
</River.Visual>

‎src/River/River.module.css

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -50,15 +50,15 @@
5050
grid-template-columns: [content] calc(40% - var(--base-size-12)) [visual] calc(60% - var(--base-size-12));
5151
}
5252

53-
.River--align-left {
53+
.River--align-start {
5454
grid-template-areas: 'content visual';
5555
}
5656

57-
.River--align-right {
57+
.River--align-end {
5858
grid-template-areas: 'visual content';
5959
}
6060

61-
.River--align-right.River--60-40 {
61+
.River--align-end.River--60-40 {
6262
grid-template-columns: [visual] calc(60% - var(--base-size-12)) [content] calc(40% - var(--base-size-12));
6363
}
6464

‎src/River/River.module.css.d.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ declare const styles: {
88
readonly "River__text": string;
99
readonly "River--50-50": string;
1010
readonly "River--60-40": string;
11-
readonly "River--align-left": string;
12-
readonly "River--align-right": string;
11+
readonly "River--align-start": string;
12+
readonly "River--align-end": string;
1313
readonly "River__content": string;
1414
readonly "River__body-text": string;
1515
};

‎src/River/River.stories.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ export const Copilot: ComponentStory<typeof River> = args => (
6767
</Text>
6868
</River.Content>
6969
</River>
70-
<River align="left" imageTextRatio={args.imageTextRatio}>
70+
<River align="start" imageTextRatio={args.imageTextRatio}>
7171
<River.Visual>
7272
<PlaceholderImage />
7373
</River.Visual>
@@ -78,7 +78,7 @@ export const Copilot: ComponentStory<typeof River> = args => (
7878
</Text>
7979
</River.Content>
8080
</River>
81-
<River align="right" imageTextRatio={args.imageTextRatio}>
81+
<River align="end" imageTextRatio={args.imageTextRatio}>
8282
<River.Visual>
8383
<PlaceholderImage />
8484
</River.Visual>

‎src/River/River.test.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ describe('River', () => {
5656
expect(rootEl.classList).not.toContain(unexpectedClass)
5757
})
5858

59-
it('renders content using left alignment visually and semantically by default', () => {
59+
it('renders content using start alignment visually and semantically by default', () => {
6060
const rootId = 'root-el'
6161
const {getByTestId} = render(
6262
<River data-testid={rootId}>
@@ -72,11 +72,11 @@ describe('River', () => {
7272
const rootEl = getByTestId(rootId)
7373
const [elOne, elTwo] = Array.from(rootEl.children)
7474

75-
const expectedRootClass = 'River--align-left'
75+
const expectedRootClass = 'River--align-start'
7676
const expectLeftChildClass = 'River__content'
7777
const expectRightChildClass = 'River__visual'
7878

79-
const unexpectedRootClasses = ['River--align-right', 'River--align-center']
79+
const unexpectedRootClasses = ['River--align-end', 'River--align-center']
8080

8181
expect(rootEl.classList).toContain(expectedRootClass)
8282

@@ -88,10 +88,10 @@ describe('River', () => {
8888
expect(elTwo.classList).toContain(expectRightChildClass) // should be the visual DOM node
8989
})
9090

91-
it('can optionally render content in right alignment visually and semantically', () => {
91+
it('can optionally render content in end alignment visually and semantically', () => {
9292
const rootId = 'root-el'
9393
const {getByTestId} = render(
94-
<River data-testid={rootId} align="right">
94+
<River data-testid={rootId} align="end">
9595
<River.Visual>
9696
<MockImage />
9797
</River.Visual>
@@ -104,11 +104,11 @@ describe('River', () => {
104104
const rootEl = getByTestId(rootId)
105105
const [elOne, elTwo] = Array.from(rootEl.children)
106106

107-
const expectedRootClass = 'River--align-right'
107+
const expectedRootClass = 'River--align-end'
108108
const expectLeftChildClass = 'River__visual'
109109
const expectRightChildClass = 'River__content'
110110

111-
const unexpectedRootClasses = ['River--align-left', 'River--align-center']
111+
const unexpectedRootClasses = ['River--align-start', 'River--align-center']
112112

113113
expect(rootEl.classList).toContain(expectedRootClass)
114114

@@ -140,7 +140,7 @@ describe('River', () => {
140140
const expectLeftChildClass = 'River__content'
141141
const expectRightChildClass = 'River__visual'
142142

143-
const unexpectedRootClasses = ['River--align-right', 'River--align-left']
143+
const unexpectedRootClasses = ['River--align-end', 'River--align-start']
144144

145145
expect(rootEl.classList).toContain(expectedRootClass)
146146

‎src/River/River.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,13 @@ export type RiverProps = {
2222
*/
2323
imageTextRatio?: '60:40' | '50:50'
2424
/**
25-
* Adjust the order of the `Content` column. The default is `left`.
25+
* Adjust the order of the `Content` column. The default is `start`.
2626
*/
27-
align?: 'left' | 'right' | 'center'
27+
align?: 'start' | 'end' | 'center'
2828
}
2929

3030
export const defaultRiverImageTextRatio = '50:50'
31-
export const defaultRiverAlign = 'left'
31+
export const defaultRiverAlign = 'start'
3232

3333
type ValidRootChildren = {
3434
Visual: React.ReactElement<RiverVisualProps> | null
@@ -57,7 +57,7 @@ function Root({
5757
)
5858

5959
const orderedChildren =
60-
align === 'left' || align === 'center' ? [ContentChild, VisualChild] : [VisualChild, ContentChild]
60+
align === 'start' || align === 'center' ? [ContentChild, VisualChild] : [VisualChild, ContentChild]
6161

6262
return (
6363
<section

0 commit comments

Comments
 (0)