Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs] New API design rule disabled > disable #34972

Merged
merged 2 commits into from
Nov 4, 2022
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
21 changes: 14 additions & 7 deletions docs/data/material/guides/api/api.md
Original file line number Diff line number Diff line change
Expand Up @@ -91,16 +91,23 @@ Nested components inside a component have:

### Prop naming

The name of a boolean prop should be chosen based on the **default value**. This choice allows:
- **Boolean**

- the shorthand notation. For example, the `disabled` attribute on an input element, if supplied, defaults to `true`:
- The default value of a boolean prop should be `false`. This allows for better shorthand notation. Consider an example of an input that is enabled by default. How should you name the prop that controls this state? It should be called `disabled`:

```jsx
<Input enabled={false} /> ❌
<Input disabled /> ✅
```
```jsx
❌ <Input enabled={false} />
✅ <Input disabled />
```

- If the name of the boolean is a single word, it should be an adjective or a noun rather than a verb. This is because props describe _states_ and not _actions_. For example an input prop can be controlled by a state, which wouldn't be described with a verb:

```jsx
const [disabled, setDisabled] = React.useState(false);

- developers to know what the default value is from the name of the boolean prop. It's always the opposite.
❌ <Input disable={disabled} />
✅ <Input disabled={disabled} />
```

### Controlled components

Expand Down