Skip to content

Commit 459ba5f

Browse files
rezrahrezrah
committed
update changeset and add new examples for checkbox
1 parent e4311e6 commit 459ba5f

File tree

5 files changed

+94
-9
lines changed

5 files changed

+94
-9
lines changed

‎.changeset/twelve-pens-battle.md

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,15 @@
22
'@primer/react-brand': minor
33
---
44

5-
Added TextInput and FormControl components
5+
Added `FormControl`, `Checkbox`, `TextInput` and `Select` components.
6+
7+
**Read the Technical Previews for usage examples:**
8+
9+
[🔗 FormControl](https://primer.style/brand/components/FormControl)
10+
11+
[🔗 Checkbox](https://primer.style/brand/components/Checkbox)
12+
13+
[🔗 TextInput](https://primer.style/brand/components/TextInput)
14+
15+
[🔗 Select](https://primer.style/brand/components/Select)
16+

‎docs/content/components/Checkbox.mdx

Lines changed: 43 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ The `Checkbox` component can be used in controlled and uncontrolled modes.
5454

5555
## Indeterminate
5656

57-
An `indeterminate` checkbox state should be used if the input value is neither true nor false. This can be useful in situations where you are required to display an incomplete state, or one that is dependent on other input selections to determine a value.
57+
An `indeterminate` checkbox state should be used if the input value is neither `true` nor `false`. This can be useful in situations where you are required to display an incomplete state, or one that is dependent on other input selections to determine a value.
5858

5959
```jsx live
6060
<form>
@@ -65,6 +65,48 @@ An `indeterminate` checkbox state should be used if the input value is neither t
6565
</form>
6666
```
6767

68+
## Optional border
69+
70+
Apply an optional border using `FormControl` and `hasBorder`.
71+
72+
```jsx live
73+
<FormControl hasBorder required>
74+
<FormControl.Label>
75+
Contact me about GitHub Enterprise Server
76+
</FormControl.Label>
77+
<Checkbox />
78+
</FormControl>
79+
```
80+
81+
## Custom label usage
82+
83+
```jsx live
84+
<FormControl required>
85+
<FormControl.Label>
86+
<Text size="200" variant="muted">
87+
I hereby accept the{' '}
88+
<InlineLink
89+
size="200"
90+
href="https://github.com/customer-terms"
91+
target="_blank"
92+
>
93+
GitHub Customer Agreement
94+
</InlineLink>{' '}
95+
on behalf of my organization and confirm that I have the authority to do
96+
so. For more information about GitHub&apos;s privacy practices, see the{' '}
97+
<InlineLink
98+
size="200"
99+
href="https://docs.github.com/en/site-policy/privacy-policies/github-privacy-statement"
100+
target="_blank"
101+
>
102+
GitHub Privacy Statement.
103+
</InlineLink>{' '}
104+
</Text>
105+
</FormControl.Label>
106+
<Checkbox />
107+
</FormControl>
108+
```
109+
68110
## Component props
69111

70112
`Checkbox` provides a React alternative to the native HTML `<input type="checkbox">`.

‎docs/content/components/FormControl.mdx

Lines changed: 31 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,11 @@ An example of a typical layout composed using `FormControl`:
134134
<FormControl.Hint>
135135
<Text size="200" variant="muted">
136136
I&apos;m interested in learning more about{' '}
137-
<InlineLink size="200" href="#">
137+
<InlineLink
138+
size="200"
139+
href="https://github.com/enterprise"
140+
target="_blank"
141+
>
138142
GitHub Enterprise Server
139143
</InlineLink>{' '}
140144
and would like to be contacted by GitHub’s sales team.
@@ -165,13 +169,21 @@ An example of a typical layout composed using `FormControl`:
165169
<FormControl.Label>
166170
<Text size="200" variant="muted">
167171
I hereby accept the{' '}
168-
<InlineLink size="200" href="#">
172+
<InlineLink
173+
size="200"
174+
href="https://github.com/customer-terms"
175+
target="_blank"
176+
>
169177
GitHub Customer Agreement
170178
</InlineLink>{' '}
171179
on behalf of my organization and confirm that I have the authority to
172180
do so. For more information about GitHub&apos;s privacy practices, see
173181
the{' '}
174-
<InlineLink size="200" href="#">
182+
<InlineLink
183+
size="200"
184+
href="https://docs.github.com/en/site-policy/privacy-policies/github-privacy-statement"
185+
target="_blank"
186+
>
175187
GitHub Privacy Statement.
176188
</InlineLink>{' '}
177189
</Text>
@@ -259,6 +271,22 @@ const App = () => {
259271
render(App)
260272
```
261273

274+
### Hint
275+
276+
```jsx live
277+
<FormControl>
278+
<FormControl.Label>Select</FormControl.Label>
279+
<Select>
280+
<Select.Option value="" selected disabled>
281+
Select a handle
282+
</Select.Option>
283+
<Select.Option value="mona">Monalisa</Select.Option>
284+
<Select.Option value="hubot">Hubot</Select.Option>
285+
</Select>
286+
<FormControl.Hint>With an optional message</FormControl.Hint>
287+
</FormControl>
288+
```
289+
262290
### Full width
263291

264292
Pass the `fullWidth` prop to `FormControl` to provide additional behavior and state context to all `children`, rather than the input only.

‎src/forms/FormControl/FormControl.module.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
}
1818

1919
.FormControl--border {
20-
border: 1px solid var(--brand-control-color-border-default);
20+
border: 1px solid var(--brand-color-border-default);
2121
border-radius: var(--brand-control-border-radius);
2222
padding: var(--base-size-12);
2323
}

‎src/forms/form.stories.tsx

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ export const GitHubEnterprise = args => {
127127
<FormControl.Hint>
128128
<Text size="200" variant="muted">
129129
I&apos;m interested in learning more about{' '}
130-
<InlineLink size="200" href="#">
130+
<InlineLink size="200" href="https://github.com/enterprise" target="_blank">
131131
GitHub Enterprise Server
132132
</InlineLink>{' '}
133133
and would like to be contacted by GitHub’s sales team.
@@ -158,12 +158,16 @@ export const GitHubEnterprise = args => {
158158
<FormControl.Label>
159159
<Text size="200" variant="muted">
160160
I hereby accept the{' '}
161-
<InlineLink size="200" href="#">
161+
<InlineLink size="200" href="https://github.com/customer-terms" target="_blank">
162162
GitHub Customer Agreement
163163
</InlineLink>{' '}
164164
on behalf of my organization and confirm that I have the authority to do so. For more information about
165165
GitHub&apos;s privacy practices, see the{' '}
166-
<InlineLink size="200" href="#">
166+
<InlineLink
167+
size="200"
168+
href="https://docs.github.com/en/site-policy/privacy-policies/github-privacy-statement"
169+
target="_blank"
170+
>
167171
GitHub Privacy Statement.
168172
</InlineLink>{' '}
169173
</Text>

0 commit comments

Comments
 (0)