-
Notifications
You must be signed in to change notification settings - Fork 776
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* add new mdx pages * add images for usage tab * fix content * fix typos * update content * update headers * Update src/pages/components/contained-list/usage.mdx Co-authored-by: Anna Gonzales <agonz@us.ibm.com> * Update src/pages/components/contained-list/usage.mdx Co-authored-by: Anna Gonzales <agonz@us.ibm.com> * Update src/pages/components/contained-list/usage.mdx Co-authored-by: Anna Gonzales <agonz@us.ibm.com> * Update src/pages/components/contained-list/usage.mdx Co-authored-by: Anna Gonzales <agonz@us.ibm.com> * Update src/pages/components/contained-list/usage.mdx Co-authored-by: Anna Gonzales <agonz@us.ibm.com> * add in inline notification * fix images * update side nav * update images * add Mike A feedback * add code, accessibility, and style tab content * add style tab images * rename tab * fix style images * update style content * update from Jan * stlye image update * update break * Update src/pages/components/contained-list/style.mdx Co-authored-by: Anna Gonzales <agonz@us.ibm.com> * Update src/pages/components/contained-list/style.mdx Co-authored-by: Anna Gonzales <agonz@us.ibm.com> * update style and usage content * update style and usage images * update image bug * insert break * update structure content * update style images * update image * update style tab * style tab updates Co-authored-by: Anna Gonzales <agonz@us.ibm.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
- Loading branch information
1 parent
2cf9d87
commit 835651e
Showing
24 changed files
with
487 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
--- | ||
title: Contained list | ||
description: | ||
Contained lists group content that is similar or related and can contain | ||
read-only or interactive information. | ||
tabs: ['Usage', 'Style', 'Code', 'Accessibility'] | ||
--- | ||
|
||
<PageDescription> | ||
|
||
Design annotations are needed for specific instances shown below, but for the | ||
standard accordion component, Carbon already incorporates accessibility. | ||
|
||
</PageDescription> | ||
|
||
<InlineNotification> | ||
|
||
This page is underdevelopment. Please check back later for updates. | ||
|
||
</InlineNotification> | ||
|
||
<AnchorLinks> | ||
<AnchorLink>What Carbon provides</AnchorLink> | ||
<AnchorLink>Design recommendations</AnchorLink> | ||
<AnchorLink>Development considerations</AnchorLink> | ||
</AnchorLinks> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
--- | ||
title: Contained list | ||
description: | ||
Contained lists group content that is similar or related and can contain | ||
read-only or interactive information. | ||
tabs: ['Usage', 'Style', 'Code', 'Accessibility'] | ||
--- | ||
|
||
<PageDescription> | ||
|
||
Preview the contained list component with the React live demo. For detailed code | ||
usage documentation, see the Storybooks for each framework below. | ||
|
||
</PageDescription> | ||
|
||
## Documentation | ||
|
||
<InlineNotification> | ||
|
||
**Coming soon:** The storybook code for contained list is underdevelopment and | ||
will be available soon. | ||
|
||
</InlineNotification> | ||
|
||
## Live demo | ||
|
||
<InlineNotification> | ||
|
||
**Coming soon:** The live demo for contained list is underdevelopment and will | ||
be available soon. | ||
|
||
</InlineNotification> |
Binary file added
BIN
+41.6 KB
src/pages/components/contained-list/images/contained-list-style-1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+38.7 KB
src/pages/components/contained-list/images/contained-list-style-2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+41.9 KB
src/pages/components/contained-list/images/contained-list-style-3.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+52.5 KB
src/pages/components/contained-list/images/contained-list-style-4.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+49.9 KB
src/pages/components/contained-list/images/contained-list-style-5.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+53.3 KB
src/pages/components/contained-list/images/contained-list-style-7.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+48.3 KB
src/pages/components/contained-list/images/contained-list-style-8.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+37.1 KB
src/pages/components/contained-list/images/contained-list-usage-1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+43.6 KB
src/pages/components/contained-list/images/contained-list-usage-10.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+39.3 KB
src/pages/components/contained-list/images/contained-list-usage-11.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+32.2 KB
src/pages/components/contained-list/images/contained-list-usage-2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+64.2 KB
src/pages/components/contained-list/images/contained-list-usage-4.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+48.1 KB
src/pages/components/contained-list/images/contained-list-usage-5.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+52.7 KB
src/pages/components/contained-list/images/contained-list-usage-6.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+53.8 KB
src/pages/components/contained-list/images/contained-list-usage-7.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+72.3 KB
src/pages/components/contained-list/images/contained-list-usage-8.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+43.1 KB
src/pages/components/contained-list/images/contained-list-usage-9.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,153 @@ | ||
--- | ||
title: Contained list | ||
description: | ||
Contained lists group content that is similar or related and can contain | ||
read-only or interactive information. | ||
tabs: ['Usage', 'Style', 'Code', 'Accessibility'] | ||
--- | ||
|
||
## Color | ||
|
||
| Element | Property | Color token | | ||
| ---------------- | ---------------- | ------------------ | | ||
| Title: on page | text color | `$text-primary` | | ||
| | background-color | `$background` | | ||
| Title: disclosed | text color | `$text-secondary` | | ||
| | background-color | `$layer`\* | | ||
| Item | text color | `$text-primary` | | ||
| | background-color | transparent | | ||
| Icon (optional) | svg | `$icon-primary` | | ||
| Row divider | border-bottom | `$border-subtle`\* | | ||
|
||
<Caption> | ||
* Denotes a contextual color token that will change values based on the layer | ||
it is placed on. | ||
</Caption> | ||
|
||
<Row> | ||
<Column colLg={8}> | ||
|
||
![Enabled states for contained list variants](images/contained-list-style-1.png) | ||
|
||
</Column> | ||
</Row> | ||
|
||
<Caption>Example of enabled states for contained list variants.</Caption> | ||
|
||
### Interactive states | ||
|
||
| Element | Property | Color token | | ||
| -------- | ---------------- | ------------------ | | ||
| Hover | background-color | `$layer-hover`\* | | ||
| Focus | border | `$focus` | | ||
| Active | background-color | `$layer-active`\* | | ||
| Disabled | text color | `$text-disabled` | | ||
| | border | `$border-disabled` | | ||
|
||
<Caption> | ||
* Denotes a contextual color token that will change values based on the layer | ||
it is placed on. | ||
</Caption> | ||
|
||
<Row> | ||
<Column colLg={12}> | ||
|
||
![States for contained list item rows](images/contained-list-style-2.png) | ||
|
||
</Column> | ||
</Row> | ||
|
||
<Caption>Example of states for contained list item rows.</Caption> | ||
|
||
<br /> | ||
|
||
<Row> | ||
<Column colLg={12}> | ||
|
||
![States for contained list inline actions](images/contained-list-style-3.png) | ||
|
||
</Column> | ||
</Row> | ||
|
||
<Caption>Example of states for contained list inline actions.</Caption> | ||
|
||
## Typography | ||
|
||
All contained list text should be set in sentence case, with only the first word | ||
in a phrase and any proper nouns capitalized. | ||
|
||
| Element | Font-size (px/rem) | Font-weight | Type token | | ||
| ---------------- | ------------------ | -------------- | --------------------- | | ||
| Title: on page | 14 / 0.875 | SemiBold / 600 | `$heading-compact-01` | | ||
| Title: disclosed | 12 / 0.75 | Regular / 400 | `$label-01` | | ||
| Item | 14 / 0.875 | Regular / 400 | `$body-01` | | ||
|
||
## Structure | ||
|
||
| Element | Property | px / rem | Spacing token | | ||
| ----------------- | --------------------------- | -------- | ------------- | | ||
| Header: on page | height | 32 / 2 | `$spacing-07` | | ||
| | padding-left, padding-right | 16 / 1 | `$spacing-05` | | ||
| Header: disclosed | height | 48 / 3 | `$spacing-09` | | ||
| | padding-left, padding-right | 16 / 1 | `$spacing-05` | | ||
| Item | padding-left, padding-right | 16 / 1 | `$spacing-05` | | ||
| Icon (optional) | height, width | 16 / 1 | — | | ||
|
||
<div className="image--fixed"> | ||
|
||
![Structure and spacing measurements for the on page list variant.](images/contained-list-style-4.png) | ||
|
||
</div> | ||
|
||
<Caption> | ||
Structure and spacing measurements for the on page list variant. | px / rem | ||
</Caption> | ||
|
||
<br /> | ||
|
||
<div className="image--fixed"> | ||
|
||
![Structure and spacing measurements for the disclosed list variant.](images/contained-list-style-5.png) | ||
|
||
</div> | ||
|
||
<Caption> | ||
Structure and spacing measurements for the disclosed list variant. | px / rem | ||
</Caption> | ||
|
||
<br /> | ||
|
||
<div className="image--fixed"> | ||
|
||
![Structure and spacing measurements for height and width of row content.](images/contained-list-style-6.png) | ||
|
||
</div> | ||
|
||
<Caption> | ||
Structure and spacing measurements for height and width of row content. | px / | ||
rem | ||
</Caption> | ||
|
||
<br /> | ||
|
||
<div className="image--fixed"> | ||
|
||
![Structure and spacing measurements for padding and rule alignment.](images/contained-list-style-7.png) | ||
|
||
</div> | ||
|
||
<Caption> | ||
Structure and spacing measurements for padding and rule alignment. | px / rem | ||
</Caption> | ||
|
||
<br /> | ||
|
||
<div className="image--fixed"> | ||
|
||
![Structure and spacing measurements for inline actions.](images/contained-list-style-8.png) | ||
|
||
</div> | ||
|
||
<Caption> | ||
Structure and spacing measurements for inline actions. | px / rem | ||
</Caption> |
Oops, something went wrong.
835651e
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
carbondesignsystem – ./
carbondesignsystem.vercel.app
carbondesignsystem-carbon-design-system.vercel.app
carbondesignsystem-git-main-carbon-design-system.vercel.app