-
Notifications
You must be signed in to change notification settings - Fork 77
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs(label, list): update usage examples (#8192)
**Related Issue:** #6374 Updates component usage examples for the label and list components --------- Co-authored-by: JC Franco <jfranco@esri.com> Co-authored-by: Matt Driscoll <mdriscoll@esri.com> Co-authored-by: Ben Elan <no-reply@benelan.dev> Co-authored-by: jcfranco <jcfranco@users.noreply.github.com> Co-authored-by: Adam Tirella <adam@tirel.la>
- Loading branch information
6 people
committed
Nov 26, 2023
1 parent
897a777
commit 6a1a3cc
Showing
8 changed files
with
110 additions
and
72 deletions.
There are no files selected for viewing
11 changes: 8 additions & 3 deletions
11
packages/calcite-components/src/components/label/usage/Basic.md
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 |
|---|---|---|
| @@ -1,7 +1,12 @@ | ||
| ```html | ||
| <calcite-label> | ||
| Invalid input | ||
| <calcite-input status="invalid" type="search" placeholder="Filter your files" value="adfo2h2"></calcite-input> | ||
| <calcite-input-message icon status="invalid"> Something doesn't look right </calcite-input-message> | ||
| Email address | ||
| <calcite-input | ||
| status="invalid" | ||
| type="email" | ||
| placeholder="Enter your email address" | ||
| value="invalidemailformat.com" | ||
| ></calcite-input> | ||
| <calcite-input-message icon status="invalid">Enter a valid email address</calcite-input-message> | ||
| </calcite-label> | ||
| ``` |
36 changes: 15 additions & 21 deletions
36
packages/calcite-components/src/components/list/usage/Advanced.md
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
14 changes: 6 additions & 8 deletions
14
packages/calcite-components/src/components/list/usage/Basic.md
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 |
|---|---|---|
| @@ -1,18 +1,16 @@ | ||
| ```html | ||
| <calcite-list> | ||
| <calcite-list-item | ||
| label="Cras iaculis ultricies nulla." | ||
| description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit." | ||
| label="Comet" | ||
| description="Cosmic snowballs of frozen gases, rock, and dust that orbit the Sun." | ||
| ></calcite-list-item> | ||
| <calcite-list-item | ||
| label="Ut aliquam sollicitudin leo." | ||
| description="Aliquam tincidunt mauris eu risus." | ||
| label="Meteoroid" | ||
| description="A small body of matter from outer space that enters Earth's atmosphere and appears like a streak of light." | ||
| ></calcite-list-item> | ||
| <calcite-list-item | ||
| label="Vestibulum commodo felis quis tortor. | ||
| " | ||
| description="Vestibulum auctor dapibus neque. | ||
| " | ||
| label="Asteroid" | ||
| description="A celestial body made of rock and metal that orbits the Sun." | ||
| ></calcite-list-item> | ||
| </calcite-list> | ||
| ``` |
27 changes: 18 additions & 9 deletions
27
packages/calcite-components/src/components/list/usage/DragEnabled.md
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 |
|---|---|---|
| @@ -1,16 +1,25 @@ | ||
| ```html | ||
| <calcite-list drag-enabled> | ||
| <calcite-list-item label="test1" value="test1" description="hello world 1"> | ||
| <calcite-icon icon="banana" slot="content-start"></calcite-icon> | ||
| <calcite-list-item | ||
| label="Don Quixote" | ||
| value="1" | ||
| description="Don Quixote is a Spanish epic novel by Miguel de Cervantes." | ||
| > | ||
| <calcite-icon icon="book" slot="content-start"></calcite-icon> | ||
| </calcite-list-item> | ||
| <calcite-list-item label="test2" value="test2" description="hello world 2"> | ||
| <calcite-icon icon="accessibility" slot="content-start"></calcite-icon> | ||
| <calcite-list-item | ||
| label="A Tale of Two Cities" | ||
| value="2" | ||
| description="A historical novel published in 1859 by Charles Dickens, set in London and Paris before and during the French Revolution." | ||
| > | ||
| <calcite-icon icon="book" slot="content-start"></calcite-icon> | ||
| </calcite-list-item> | ||
| <calcite-list-item label="test3" value="test3" description="hello world 3"> | ||
| <calcite-icon icon="article" slot="content-start"></calcite-icon> | ||
| </calcite-list-item> | ||
| <calcite-list-item disabled label="test4" value="test4" description="hello world 4"> | ||
| <calcite-icon icon="compass" slot="content-start"></calcite-icon> | ||
| <calcite-list-item | ||
| label="The Lord of the Rings" | ||
| value="3" | ||
| description="An epic high-fantasy novel by the English author and scholar J. R. R. Tolkien." | ||
| > | ||
| <calcite-icon icon="book" slot="content-start"></calcite-icon> | ||
| </calcite-list-item> | ||
| </calcite-list> | ||
| ``` |
35 changes: 20 additions & 15 deletions
35
packages/calcite-components/src/components/list/usage/DragEnabledNested.md
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 |
|---|---|---|
| @@ -1,19 +1,24 @@ | ||
| ```html | ||
| <calcite-list drag-enabled group="mygroup" selection-mode="multiple"> | ||
| <calcite-list-item open label="My Item 1" description="hello world"> | ||
| <calcite-list drag-enabled group="mygroup" selection-mode="multiple"> | ||
| <calcite-list-item open label="My Item 2" description="hello world"> | ||
| <calcite-list drag-enabled group="mygroup" selection-mode="multiple"> | ||
| <calcite-list-item label="My Item 3" description="hello world"> | ||
| <calcite-list drag-enabled group="mygroup" selection-mode="multiple"></calcite-list> | ||
| </calcite-list-item> | ||
| <calcite-list-item label="My Item 4" description="hello world"></calcite-list-item> | ||
| </calcite-list> | ||
| </calcite-list-item> | ||
| <calcite-list-item label="My Item 5" description="hello world"></calcite-list-item> | ||
| </calcite-list> | ||
| <calcite-list drag-enabled group="Birds"> | ||
| <calcite-list-item open label="Eagles"> | ||
| <calcite-list-item | ||
| label="Bald Eagle" | ||
| description="The bald eagle is a bird of prey found in North America." | ||
| ></calcite-list-item> | ||
| <calcite-list-item | ||
| label="Golden Eagle" | ||
| description="The golden eagle is a bird of prey living in the Northern Hemisphere." | ||
| ></calcite-list-item> | ||
| </calcite-list-item> | ||
| <calcite-list-item open label="Owls"> | ||
| <calcite-list-item | ||
| label="Great Horned Owl" | ||
| description="The great horned owl, also known as the tiger owl, or the hoot owl, is a large owl native to the Americas." | ||
| ></calcite-list-item> | ||
| <calcite-list-item | ||
| label="Snow Owl" | ||
| description="The snowy owl, also known as the polar owl, the white owl and the Arctic owl, is a large, white owl of the true owl family." | ||
| ></calcite-list-item> | ||
| </calcite-list-item> | ||
| <calcite-list-item label="My Item 6" description="hello world"></calcite-list-item> | ||
| <calcite-list-item label="My Item 7" description="hello world"></calcite-list-item> | ||
| </calcite-list> | ||
| ``` |
31 changes: 20 additions & 11 deletions
31
packages/calcite-components/src/components/list/usage/Grouped.md
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
18 changes: 18 additions & 0 deletions
18
packages/calcite-components/src/components/list/usage/MultipleSelections.md
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,18 @@ | ||
| ```html | ||
| <calcite-list selection-mode="multiple"> | ||
| <calcite-list-item-group heading="Sports"> | ||
| <calcite-list-item | ||
| label="Tennis" | ||
| description="Tennis is a racket sport that is played either individually against a single opponent or between two teams of two players each." | ||
| ></calcite-list-item> | ||
| <calcite-list-item | ||
| label="Baseball" | ||
| description="Baseball is a bat-and-ball sport played between two teams of nine players each, taking turns batting and fielding." | ||
| ></calcite-list-item> | ||
| <calcite-list-item | ||
| label="Golf" | ||
| description="Golf is a sport in which a small ball is struck with a club into a series of small holes in the ground, the object being to use the fewest possible strokes to complete the course." | ||
| ></calcite-list-item> | ||
| </calcite-list-item-group> | ||
| </calcite-list> | ||
| ``` |
10 changes: 5 additions & 5 deletions
10
packages/calcite-components/src/components/list/usage/Nested.md
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