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

Update styleguides #1773

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/deployments/deploy-chrome-extension.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ For Clerk production instances, there must be a domain associated with the insta
</SignedIn>

<SignedOut>
1. At the top in the Clerk Dashboard, in the instance selection dropdown, ensure that your production instance is selected.
1. At the top of the Clerk Dashboard, in the instance selection dropdown, ensure that your production instance is selected.
1. In the navigation sidebar, select [**API keys**](https://dashboard.clerk.com/last-active?path=api-keys).
1. In the **Quick Copy** section, select **Chrome Extension** and copy your Clerk Publishable and Frontend API keys.
1. Paste your keys into your `.env.production` file.
Expand Down Expand Up @@ -64,7 +64,7 @@ The following example shows how to configure `host_permissions` for production:
</SignedIn>

<SignedOut>
1. At the top in the Clerk Dashboard, in the instance selection dropdown, ensure that your production instance is selected.
1. At the top of the Clerk Dashboard, in the instance selection dropdown, ensure that your production instance is selected.
1. In the navigation sidebar, select [**API keys**](https://dashboard.clerk.com/last-active?path=api-keys).
1. Copy your Secret Key. It should begin with `sk_live_`.
1. In your terminal, paste the following command. Replace `YOUR_SECRET_KEY` with your Clerk Secret Key and the `<CHROME_EXTENSION_KEY>` with your extension's ID.
Expand Down
2 changes: 1 addition & 1 deletion docs/users/deleting-users.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ There are two ways to delete users in Clerk: [through the Clerk Dashboard](#dele

To delete users in the Clerk Dashboard:

1. At the top in the Clerk Dashboard, select [**Users**](https://dashboard.clerk.com/last-active?path=users).
1. At the top of the Clerk Dashboard, select [**Users**](https://dashboard.clerk.com/last-active?path=users).
1. You can either select the user and then in the side navigation menu, select **Delete user**, or select the menu icon on the right side of the user's row and select **Delete user**.

## Delete users using the Clerk API
Expand Down
154 changes: 20 additions & 134 deletions styleguides/SSO.STYLEGUIDE.MD
Original file line number Diff line number Diff line change
Expand Up @@ -55,18 +55,7 @@ These are the guidelines we use to write our SSO guides.

Screenshots should be used little to none in the docs. The instructions should be explicit and include all necessary details without the need for a visual reference. The instructions should be laid out as numbered lists to make the content more palatable to readers. Links should be added on their first reference.

### Do

```mdx
1. In the Clerk Dashboard, navigate to the [**SSO connections**](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) page.
1. Select **Add connection** and select **For all users**.
1. In the **Choose provider** dropdown, select **Microsoft**.
1. Select **Add connection**.
```

### Don't

In this example, the instructions are not explicit, as it tells the reader to select **Microsoft** but doesn't specify where to find it.
> ❌ In the example below, the instructions are not explicit, as it tells the reader to select **Microsoft** but doesn't specify where to find it.

```mdx
1. In the Clerk Dashboard, navigate to the [**SSO connections**](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) page.
Expand All @@ -75,162 +64,59 @@ In this example, the instructions are not explicit, as it tells the reader to se
1. Select **Microsoft**.
```

## Bold proper nouns

Bold proper nouns found in the UI, such as titles, headings, product names, etc.

An exception to this rule is the Clerk Dashboard, which doesn't need to be bolded to enforce consistency across the docs.

### Do

```mdx
In the **Azure services** section, select **Microsoft Entra ID**.
```

### Don't
> ✅ In the example below, the instructions are explicit and include all necessary details without the need for a visual reference.

```mdx
In the Azure services section, select Microsoft Entra ID.
1. In the Clerk Dashboard, navigate to the [**SSO connections**](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) page.
1. Select **Add connection** and select **For all users**.
1. In the **Choose provider** dropdown, select **Microsoft**.
1. Select **Add connection**.
```

## Writing about redirects

If the step ends with a redirect, include the redirect instructions in the step.

### Do

1. Select **New application**. You'll be redirected to the <SSO_PROVIDER_DASHBOARD>.
1. Select **Create your own application**.

### Don't
> ❌

```mdx
1. Select **New application**.
1. In the **<SSO_PROVIDER_DASHBOARD>**, select **Create your own application**.

## Component naming

The proper names for the components are:

- Dashboard: refers to a control panel or central hub where users can interact with multiple tools or view data
- Panel: drawer
- Modal: popup
- Dropdown

## Use conjunctions

Use conjunctions in the copy to make the copy more colloquial.

### Do

"You'll"

### Don't

"You will"

## Avoid using "button"

### Do

```mdx
1. Select **New client secret**.
```

### Don't
> ✅

```mdx
1. Select the **New client secret** button.
```

## Avoid using "click"

### Do

```mdx
1. Select **New client secret**.
```

### Don't

```mdx
1. Click **New client secret**.
```

## Avoid using "appears"

### Do

```mdx
In the panel that opens
```

### Don't

```mdx
In the panel that appears
1. Select **New application**. You'll be redirected to the <SSO_PROVIDER_DASHBOARD>.
1. Select **Create your own application**.
```

## Action verbs

- Add: general use (e.g., Add your app information)
- Enter: general typing (e.g., Enter your email address)
- Paste: to copy and paste values (e.g., Paste the Client ID you copied from the Clerk Dashboard)
- Complete: to fill out forms

## Application vs. app

Use "application" for the first instance where it's used and then "app" for the rest of the guide.

## Redirected to vs. taken to

Use "redirected to" instead of "taken to."
## Page vs. tab

## Ensure vs. make sure

Use "ensure" instead of "make sure."

### Do

```mdx
On this same page, under **Client credentials**, select **Add a certificate or secret** to generate a Client Secret. You'll be redirected to the **Certificate & secrets** page.
```
Assume users are opening windows versus browser tabs. Use active voice (e.g., "keep" vs. "leave).

### Don't
> ❌ The first example is wrong because it uses "leave" instead of "keep" and "tab" instead of "page."

```mdx
On this same page, under **Client credentials**, select **Add a certificate or secret** to generate a Client Secret. You'll be taken to the **Certificate & secrets** page.
Leave the tab open.
```

## Page vs. Tab

Assume users are opening windows versus browser tabs. Use active voice (e.g., "keep" vs. "leave).

### Do
> ✅ This example is correct because it uses "keep" and "page".

```mdx
Keep the page open.
```

### Don't
## Complete vs. fill out

```mdx
Leave the page open.
```
> ❌

```mdx
Leave the tab open.
Fill out the form as follows
```

## Complete vs. Fill out

### Do
> ✅

```mdx
Complete the form as follows
```

### Don't

```mdx
Fill out the form as follows
```
Loading
Loading