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

IA Updates #1607

Closed
wants to merge 54 commits into from
Closed
Changes from 1 commit
Commits
Show all changes
54 commits
Select commit Hold shift + click to select a range
42bffd7
begin nav updates
alisonjoseph Aug 12, 2020
761dd3b
no message
alisonjoseph Aug 12, 2020
74f4be7
feat: update ia
alisonjoseph Aug 12, 2020
135b258
feat: update page names
alisonjoseph Aug 12, 2020
66f7911
fix: nav
alisonjoseph Aug 12, 2020
1e23920
fix: nav link kits
alisonjoseph Aug 12, 2020
44733cd
fix: update folder name for design resources
alisonjoseph Aug 12, 2020
0b4d8e3
fix: update developing link in nav
alisonjoseph Aug 12, 2020
66f94da
fix: update tutorial nav links
alisonjoseph Aug 12, 2020
924e92b
typo
alisonjoseph Aug 12, 2020
4081017
fix: broken link
alisonjoseph Aug 12, 2020
1e56290
Merge branch 'master' of github.com:carbon-design-system/carbon-www i…
alisonjoseph Aug 12, 2020
a1c9f96
docs: review yaml and what is carbon
janchild Aug 12, 2020
19b768a
docs: designing, developing, latest news, events,
janchild Aug 12, 2020
70241ad
docs: updates to what's happening
janchild Aug 12, 2020
50b45b1
no message
alisonjoseph Aug 13, 2020
767058f
add developing get-started page
alisonjoseph Aug 13, 2020
7235254
no message
alisonjoseph Aug 13, 2020
7495752
docs: feedback from design rview, event draft info
janchild Aug 14, 2020
6cc9401
docs: capitalization fix
janchild Aug 14, 2020
4a5ea54
docs: contact us updated content
janchild Aug 14, 2020
2e03ab6
fix faqs link
alisonjoseph Aug 17, 2020
64a11fd
Update rewrite.conf
alisonjoseph Aug 17, 2020
c0cb00f
docs: nav tweaks
janchild Aug 17, 2020
1eec21c
docs: nav tweaks
janchild Aug 17, 2020
9c47d58
docs: placeholder case studies text
janchild Aug 17, 2020
fcea937
docs: update to remove case studies
janchild Aug 18, 2020
751250b
docs: about carbon links update
janchild Aug 18, 2020
ceb38ef
Merge branch 'master' of github.com:carbon-design-system/carbon-www i…
alisonjoseph Aug 18, 2020
7462ce4
docs: link fixes, smoothing
janchild Aug 18, 2020
3f994e1
Merge branch 'ia-updates-1516' of https://github.com/alisonjoseph/car…
janchild Aug 18, 2020
f576c27
docs: broken link fixes part 1
jillianhowarth Aug 19, 2020
6f4bc58
docs: broken link fixes part 2
jillianhowarth Aug 19, 2020
29d25a9
docs: broken link fixes part 3
jillianhowarth Aug 19, 2020
9bd84d2
fix links
alisonjoseph Aug 20, 2020
a7a931b
docs: link fixes
jillianhowarth Aug 20, 2020
fc590fe
update left nav link and homepage image paths
alisonjoseph Aug 20, 2020
a6df3c2
Merge branch 'master' of github.com:carbon-design-system/carbon-www i…
alisonjoseph Aug 20, 2020
5c63c9d
docs: updates to get started design, how we work, contributing overview
janchild Aug 20, 2020
59630fe
Merge branch 'ia-updates-1516' of https://github.com/alisonjoseph/car…
janchild Aug 20, 2020
db3224a
docs: updates to get started design, contributing
janchild Aug 20, 2020
21c2651
add redirects
alisonjoseph Aug 20, 2020
9b673e7
docs: about carbon content updates
janchild Aug 20, 2020
2360e84
docs: yaml update
janchild Aug 20, 2020
5ee7557
docs: content tweaks, links added
janchild Aug 20, 2020
789fa1c
docs: designing get started, news & articles
janchild Aug 21, 2020
2f50b73
update nav for community section
alisonjoseph Aug 24, 2020
431f3ab
docs: broken link fixes
jillianhowarth Aug 24, 2020
4e84528
Merge branch 'master' of github.com:carbon-design-system/carbon-www i…
alisonjoseph Aug 24, 2020
91407fa
Merge branch 'ia-updates-1516' of github.com:alisonjoseph/carbon-webs…
alisonjoseph Aug 24, 2020
f386a35
docs: new build
jillianhowarth Aug 24, 2020
7809180
Merge branch 'master' of github.com:carbon-design-system/carbon-www i…
alisonjoseph Aug 24, 2020
e8f3804
test
alisonjoseph Aug 24, 2020
d9d8e50
test
alisonjoseph Aug 24, 2020
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
Prev Previous commit
Next Next commit
docs: broken link fixes part 2
jillianhowarth committed Aug 19, 2020
commit 6f4bc58a79bb2a057af234aebf9a545471219f14
2 changes: 1 addition & 1 deletion src/pages/components/breadcrumb/usage.mdx
Original file line number Diff line number Diff line change
@@ -149,7 +149,7 @@ onto a second line.
### Further guidance

For further content guidance, see Carbon's
[content guidelines](/guidelines/content/general).
[content guidelines](/guidelines/content/overview).

## Behaviors

10 changes: 5 additions & 5 deletions src/pages/components/button/usage.mdx
Original file line number Diff line number Diff line change
@@ -434,10 +434,10 @@ or ghost buttons in layouts with more than three calls to action.
Ideally, when using groups of related buttons (not including ghost buttons),
they should all be the same width. This can be achieved in one of two ways, both
of which are acceptable. The first approach involves using the
[narrow grid mode](/guidelines/2x-grid/code). In this situation each button
would be set individually on the column grid. _Note: Carbon developers are
working on the narrow grid mode, currently left-hanging buttons can only be
achieved with an override._
[narrow grid mode](/guidelines/2x-grid/implementation#grid-modes). In this
situation each button would be set individually on the column grid. _Note:
Carbon developers are working on the narrow grid mode, currently left-hanging
buttons can only be achieved with an override._

<Row>
<Column colLg={8}>
@@ -556,7 +556,7 @@ There are exceptions to this rule for situations in which button length could
cause problems in compact UIs or negatively impact translation, but the {verb} +
{noun} formula is still best practice.

For consistency, see Carbon’s [content guidelines](guidelines/content/overview)
For consistency, see Carbon’s [content guidelines](/guidelines/content/overview)
for a list of recommended action labels.

<DoDontRow>
2 changes: 1 addition & 1 deletion src/pages/components/checkbox/usage.mdx
Original file line number Diff line number Diff line change
@@ -246,7 +246,7 @@ For more information about spacing for the checkbox component itself, see the
### Further guidance

For further content guidance, see Carbon's
[content guidelines](notion://www.notion.so/guidelines/content/general).
[content guidelines](/guidelines/content/overview).

## Behaviors

2 changes: 1 addition & 1 deletion src/pages/components/code-snippet/usage.mdx
Original file line number Diff line number Diff line change
@@ -185,7 +185,7 @@ text._
### Further guidance

For further content guidance, see Carbon's
[content guidelines](notion://www.notion.so/guidelines/content/general).
[content guidelines](/guidelines/content/overview).

## Universal behaviors

2 changes: 1 addition & 1 deletion src/pages/components/data-table/usage.mdx
Original file line number Diff line number Diff line change
@@ -488,7 +488,7 @@ other.
[action labels.](/guidelines/content/action-labels)

For further content guidance, see Carbon's
[content guidelines](guidelines/content/general).
[content guidelines](/guidelines/content/overview).

## Behaviors

2 changes: 1 addition & 1 deletion src/pages/components/date-picker/usage.mdx
Original file line number Diff line number Diff line change
@@ -519,7 +519,7 @@ a tile.
Another common use case not accounted for in the above pickers is setting a time
or date relative to today or now, such as with a reminder. For example, setting
an install to begin now, in one hour, or tonight. This type of picker can made
by using the standard [select](link) component.
by using the standard [select](/components/select/usage/) component.

#### Using individual inputs

2 changes: 1 addition & 1 deletion src/pages/components/dropdown/usage.mdx
Original file line number Diff line number Diff line change
@@ -324,7 +324,7 @@ browser-based tooltip to show the full string of text.
### Further guidance

For further content guidance, see Carbon's
[content guidelines](notion://www.notion.so/guidelines/content/general).
[content guidelines](/guidelines/content/overview).

## Universal behaviors

59 changes: 43 additions & 16 deletions src/pages/components/inline-loading/usage.mdx
Original file line number Diff line number Diff line change
@@ -8,7 +8,8 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']

<PageDescription>

The inline loading component provides visual feedback that data is being processed.
The inline loading component provides visual feedback that data is being
processed.

</PageDescription>

@@ -31,17 +32,21 @@ user that their request is being processed. Although they do not provide details
about what is occurring on the back-end, they reassure the user that their
action is being processed.

Common actions that benefit from inline loading include any create, update, or delete actions that may have a lot of data to process. It can be used in a table, after a primary or secondary button click, or even in a modal.
Common actions that benefit from inline loading include any create, update, or
delete actions that may have a lot of data to process. It can be used in a
table, after a primary or secondary button click, or even in a modal.

### When to use

- Use an inline loading component for any action that cannot be performed instantly and will only require a short time to process.
- Use an inline loading component for any action that cannot be performed
instantly and will only require a short time to process.
- Use when retrieving or refreshing small data amounts, such as status.

### When not to use

- Don't use inline loading for full page loads, use skeleton states instead.
- Don't trigger inline loading on more than one item or action at a time, unless on initial page load or refresh.
- Don't trigger inline loading on more than one item or action at a time, unless
on initial page load or refresh.

## Live demo

@@ -82,12 +87,14 @@ Common actions that benefit from inline loading include any create, update, or d
</Column>
</Row>

1. **Loading status**: indicates the state of the loading sequence (active, inactive, finished, error).
1. **Loading status**: indicates the state of the loading sequence (active,
inactive, finished, error).
2. **Label**: assistive text that explains the loading status.

### Placement

When inline loading temporarily replaces content, it should appear in the same spot as the content it replaced and maintain the same alignment.
When inline loading temporarily replaces content, it should appear in the same
spot as the content it replaced and maintain the same alignment.

<Row>
<Column colLg={8}>
@@ -101,23 +108,31 @@ When inline loading temporarily replaces content, it should appear in the same s

### Main elements

Descriptive loading text for the action is optional, but encouraged. If you have limited room or find adding text to be unnecessary you can just run through the animations.
Descriptive loading text for the action is optional, but encouraged. If you have
limited room or find adding text to be unnecessary you can just run through the
animations.

#### Active loading label

This is the text that appears while the action is happening. The label should tell the user what action is being performed. For example, if it appears while a form is being save then it should say "Saving ...".
This is the text that appears while the action is happening. The label should
tell the user what action is being performed. For example, if it appears while a
form is being save then it should say "Saving ...".

#### Finished loading label

Once the action has finished, the label should change to tell the user that the action was completed successfully. For example, when saving a form it would read "Saved" upon completion.
Once the action has finished, the label should change to tell the user that the
action was completed successfully. For example, when saving a form it would read
"Saved" upon completion.

#### Error loading label

If the action fails then the label should change to tell the user that an error or failure has occurred.
If the action fails then the label should change to tell the user that an error
or failure has occurred.

### Further guidance

For further content guidance, see Carbon's [content guidelines](<[https://www.carbondesignsystem.com/guidelines/content/general](https://www.carbondesignsystem.com/guidelines/content/general)>).
For further content guidance, see Carbon's
[content guidelines](/guidelines/content/overview).

## Behaviors

@@ -135,23 +150,34 @@ There are four states to inline loading: inactive, active, success, and error.

#### Inactive

The inactive loading state is when no data is being loaded. Inactive has no visual indicator.
The inactive loading state is when no data is being loaded. Inactive has no
visual indicator.

#### Active

The active loading state indicates that the action is still in progress.

#### Success

The success loading state indicates that the action completed successfully. The success state is active for 1.5 seconds before calling an optional function `onSuccess`. Use the `onSuccess` function to refetch new data, close a modal, or reset a form. If no function is specified the success state will last indefinitely.
The success loading state indicates that the action completed successfully. The
success state is active for 1.5 seconds before calling an optional function
`onSuccess`. Use the `onSuccess` function to refetch new data, close a modal, or
reset a form. If no function is specified the success state will last
indefinitely.

#### Error

The error loading state indicates that the action did not successfully complete. If an error occurs, the inline loading component becomes inactive and an inline notification or error handling within the form should appear.
The error loading state indicates that the action did not successfully complete.
If an error occurs, the inline loading component becomes inactive and an inline
notification or error handling within the form should appear.

### Interactions

Any interactive elements associated with the item that is loading should be disabled until the loading is complete. For example, in a file uploader the item that is loading is disabled until fully uploaded. If the inline loading is being used to submit a form, the form fields should be disabled until the loading is complete.
Any interactive elements associated with the item that is loading should be
disabled until the loading is complete. For example, in a file uploader the item
that is loading is disabled until fully uploaded. If the inline loading is being
used to submit a form, the form fields should be disabled until the loading is
complete.

<Row>
<Column colLg={8}>
@@ -163,7 +189,8 @@ Any interactive elements associated with the item that is loading should be disa

### Modifiers

A loading spinner can be used by itself without a label. It is most commonly used this way inside a field input.
A loading spinner can be used by itself without a label. It is most commonly
used this way inside a field input.

<Row>
<Column colLg={8}>
11 changes: 6 additions & 5 deletions src/pages/components/modal/usage.mdx
Original file line number Diff line number Diff line change
@@ -285,7 +285,7 @@ style, no other body copy may be included.
### Further guidance

For further content guidance, see Carbon's
[content guidelines](/guidelines/content/general).
[content guidelines](/guidelines/content/overview).

## Behaviors

@@ -439,10 +439,11 @@ buttons.
### Danger modal

Danger modal is a specific type of
[transactional modal](/modal/usage#transactional-modal) used for destructive or
irreversible actions. In danger modal, the primary button is replaced by a
danger button. They are commonly used in high impact moments as a confirmation
for an action that would result in a significant data loss if done accidentally.
[transactional modal](/components/modal/usage#transactional-modal) used for
destructive or irreversible actions. In danger modal, the primary button is
replaced by a danger button. They are commonly used in high impact moments as a
confirmation for an action that would result in a significant data loss if done
accidentally.

<Row>
<Column colLg={8}>
2 changes: 1 addition & 1 deletion src/pages/components/notification/usage.mdx
Original file line number Diff line number Diff line change
@@ -172,7 +172,7 @@ or a modal.
### Further guidance

For further content guidance, see Carbon's
[content guidelines](/guidelines/content/general).
[content guidelines](/guidelines/content/overview).

## Inline notifications

4 changes: 2 additions & 2 deletions src/pages/patterns/empty-states-pattern/index.mdx
Original file line number Diff line number Diff line change
@@ -435,7 +435,7 @@ Norman group’s

A pattern providing guidance for error states is currently being planned. If you
would like to contribute, please see our
[guidelines for contributions](/how-to-contribute/pattern).
[guidelines for contributions](/contributing/pattern).

## In-depth alternatives

@@ -519,7 +519,7 @@ in conjunction with basic empty states.
A pattern providing guidance for onboarding is currently being planned. It will
include a framework for matching user needs with design solutions, tips for
writing copy, and general best practices. If you would like to contribute,
please see our [guidelines for contributions](/how-to-contribute/pattern).
please see our [guidelines for contributions](/contributing/pattern).

### Starter content

2 changes: 1 addition & 1 deletion src/pages/patterns/notification-pattern/index.mdx
Original file line number Diff line number Diff line change
@@ -454,7 +454,7 @@ receive, which is particularly helpful for users with cognitive limitations.

The Error state pattern is currently being planned. If you would like to
contribute, please see our
[guidelines for contributions](https://www.carbondesignsystem.com/how-to-contribute/pattern).
[guidelines for contributions](/contributing/pattern).

## References

11 changes: 5 additions & 6 deletions src/pages/patterns/search-pattern/index.mdx
Original file line number Diff line number Diff line change
@@ -48,9 +48,9 @@ and the location of the search within your product.

The placement of your search field depends on the construction of your
application and the scope of the search. For global searches, see the
[global header pattern](/patterns/global-header-pattern) for placement guidance.
See the [data table](/components/data-table/usage#search) component for search
placement within a data table.
[global header pattern](/patterns/global-header) for placement guidance. See the
[data table](/components/data-table/usage#search) component for search placement
within a data table.

### Anatomy

@@ -429,9 +429,8 @@ several similar data sets without knowing where the information lives. If the
user is likely to know the location of their data, offer a scope filter.

A successful focused search will route a user directly to a page or resource. In
the event the user does select "See all results", present a
[results page](basic-search). Always include the number of search results,
including for searches with no results.
the event the user does select "See all results", present a results page. Always
include the number of search results, including for searches with no results.

## Accessibility