Skip to content

Commit

Permalink
chore: fix docs
Browse files Browse the repository at this point in the history
  • Loading branch information
robertIsaac committed Dec 23, 2024
1 parent f2aaeca commit f1849ae
Show file tree
Hide file tree
Showing 7 changed files with 68 additions and 68 deletions.
36 changes: 18 additions & 18 deletions libs/core/tree/tree.component.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -31,33 +31,33 @@ interface TreeItemData {
[selectionPlacement]="selectionPlacement"
[noBorder]="noBorder"
>
<fd-tree-item value="first">
<fd2-tree-item value="first">
<fd-icon fdTreeItemIcon glyph="account"></fd-icon>
<span fdTreeItemText>Item 1 (Level 1)</span>
</fd-tree-item>
<fd-tree-item value="second" [expanded]="expanded" #itemWithChildren>
</fd2-tree-item>
<fd2-tree-item value="second" [expanded]="expanded" #itemWithChildren>
<fd-icon fdTreeItemIcon glyph="e-care"></fd-icon>
<span fdTreeItemText>Item 2 (Level 1)</span>
<fd-tree-item value="third" [expanded]="expanded">
<fd2-tree-item value="third" [expanded]="expanded">
<span fdTreeItemText>Item 1 (Level 2)</span>
<fd-tree-item value="fourth">
<fd2-tree-item value="fourth">
<span fdTreeItemText>Item 1 (Level 3)</span>
<fd-tree-item value="fifth">
<fd2-tree-item value="fifth">
<span fdTreeItemText>Item 1 (Level 4)</span>
<fd-tree-item value="sixth">
<fd2-tree-item value="sixth">
<span fdTreeItemText>Item 1 (Level 5)</span>
</fd-tree-item>
</fd-tree-item>
</fd-tree-item>
</fd-tree-item>
<fd-tree-item value="seventh">
</fd2-tree-item>
</fd2-tree-item>
</fd2-tree-item>
</fd2-tree-item>
<fd2-tree-item value="seventh">
<span fdTreeItemText>Item 2 (Level 2)</span>
</fd-tree-item>
</fd-tree-item>
<fd-tree-item>
</fd2-tree-item>
</fd2-tree-item>
<fd2-tree-item>
<fd-icon fdTreeItemIcon glyph="phone"></fd-icon>
<span fdTreeItemText>Item 3 (Level 1)</span>
</fd-tree-item>
</fd2-tree-item>
</fd-tree>
`,
standalone: true,
Expand Down Expand Up @@ -92,7 +92,7 @@ export class ProjectedTreeItemsComponent {
selector: 'fd-tree-with-observable',
template: `
<fd-tree [dataSource]="dataSource">
<fd-tree-item
<fd2-tree-item
*fdTreeItemDef="let item"
[level]="item.level"
[navigatable]="item.navigatable"
Expand All @@ -102,7 +102,7 @@ export class ProjectedTreeItemsComponent {
[id]="item.id"
>
<span fdTreeItemText>{{ item.data.title }}</span>
</fd-tree-item>
</fd2-tree-item>
</fd-tree>
`,
standalone: true,
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<p>This example contains of 5 levels of tree items containing 20 items per level</p>
<form>
<fd-tree [dataSource]="items">
<fd-tree-item
<fd2-tree-item
*fdTreeItemDef="let item; as: model"
[level]="item.level"
[state]="item.state"
Expand All @@ -12,6 +12,6 @@
>
<fd-icon fdTreeItemIcon [glyph]="item.data.icon"></fd-icon>
<span fdTreeItemText>{{ item.data.title }}</span>
</fd-tree-item>
</fd2-tree-item>
</fd-tree>
</form>
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<fd-tree [dataSource]="items" selection="multiple" [navigationIndicator]="true">
<fd-tree-item
<fd2-tree-item
*fdTreeItemDef="let item; as: model"
[level]="item.level"
[navigatable]="item.navigatable"
Expand All @@ -11,5 +11,5 @@
>
<fd-icon fdTreeItemIcon [glyph]="item.data.icon"></fd-icon>
<span fdTreeItemText>{{ item.data.title }}</span>
</fd-tree-item>
</fd2-tree-item>
</fd-tree>
76 changes: 38 additions & 38 deletions libs/docs/core/tree/examples/simple-tree-example.component.html
Original file line number Diff line number Diff line change
@@ -1,36 +1,36 @@
<h3>Imperative Approach:</h3>
<fd-tree [style.max-width.px]="500">
<fd-tree-item>
<fd2-tree-item>
<fd-icon fdTreeItemIcon glyph="account"></fd-icon>
<span fdTreeItemText>Item 1 (Level 1)</span>
</fd-tree-item>
<fd-tree-item [wrapContent]="true">
</fd2-tree-item>
<fd2-tree-item [wrapContent]="true">
<fd-icon fdTreeItemIcon glyph="e-care"></fd-icon>
<span fdTreeItemText>Item 2 with some long description that should split into multiple lines (Level 1)</span>
<fd-tree-item>
<fd2-tree-item>
<span fdTreeItemText>Item 1 (Level 2)</span>
<fd-tree-item>
<fd2-tree-item>
<span fdTreeItemText>Item 1 (Level 3)</span>
<fd-tree-item>
<fd2-tree-item>
<span fdTreeItemText>Item 1 (Level 4)</span>
<fd-tree-item>
<fd2-tree-item>
<span fdTreeItemText>Item 1 (Level 5)</span>
</fd-tree-item>
</fd-tree-item>
</fd-tree-item>
</fd-tree-item>
<fd-tree-item>
</fd2-tree-item>
</fd2-tree-item>
</fd2-tree-item>
</fd2-tree-item>
<fd2-tree-item>
<span fdTreeItemText>Item 2 (Level 2)</span>
</fd-tree-item>
</fd-tree-item>
<fd-tree-item>
</fd2-tree-item>
</fd2-tree-item>
<fd2-tree-item>
<fd-icon fdTreeItemIcon glyph="phone"></fd-icon>
<span fdTreeItemText>Item 3 (Level 1)</span>
</fd-tree-item>
</fd2-tree-item>
</fd-tree>
<h3>Declarative Approach:</h3>
<fd-tree [dataSource]="items" selection="multiple">
<fd-tree-item
<fd2-tree-item
*fdTreeItemDef="let item; as: model"
[level]="item.level"
[navigatable]="item.navigatable"
Expand All @@ -41,34 +41,34 @@ <h3>Declarative Approach:</h3>
>
<fd-icon fdTreeItemIcon [glyph]="item.data.icon"></fd-icon>
<span fdTreeItemText>{{ item.data.title }}</span>
</fd-tree-item>
</fd2-tree-item>
</fd-tree>
<h3>Customization:</h3>
<fd-tree [style.max-width.px]="500">
<fd-tree-item>
<fd2-tree-item>
<fd-icon fdTreeItemIcon glyph="account"></fd-icon>
<span fdTreeItemText>Item 1 (Level 1)</span>
</fd-tree-item>
<fd-tree-item [wrapContent]="true">
</fd2-tree-item>
<fd2-tree-item [wrapContent]="true">
<fd-icon fdTreeItemIcon glyph="e-care"></fd-icon>
<span fdTreeItemText>Item 2 with some long description that should split into multiple lines (Level 1)</span>
<fd-tree-item>
<fd2-tree-item>
<span fdTreeItemText>Item 1 (Level 2)</span>
<fd-tree-item>
<fd2-tree-item>
<span fdTreeItemText>Item 1 (Level 3)</span>
<fd-tree-item>
<fd2-tree-item>
<span fdTreeItemText>Item 1 (Level 4)</span>
<fd-tree-item>
<fd2-tree-item>
<span fdTreeItemText>Item 1 (Level 5)</span>
</fd-tree-item>
</fd-tree-item>
</fd-tree-item>
</fd-tree-item>
<fd-tree-item>
</fd2-tree-item>
</fd2-tree-item>
</fd2-tree-item>
</fd2-tree-item>
<fd2-tree-item>
<span fdTreeItemText>Item 2 (Level 2)</span>
</fd-tree-item>
</fd-tree-item>
<fd-tree-item backgroundColor="var(--sapActiveColor)" [wrapContent]="true">
</fd2-tree-item>
</fd2-tree-item>
<fd2-tree-item backgroundColor="var(--sapActiveColor)" [wrapContent]="true">
<div fdTreeItemText style="display: flex; align-items: center; gap: 1rem; padding-block: 1rem">
<fd-avatar [colorAccent]="1" [circle]="true" size="s" glyph="product"></fd-avatar>
<span
Expand All @@ -77,16 +77,16 @@ <h3>Customization:</h3>
voluptatibus a et recusandae.</span
>
</div>
</fd-tree-item>
<fd-tree-item [customStyles]="{ background: '#D1EFFF', paddingBlock: '1rem' }">
</fd2-tree-item>
<fd2-tree-item [customStyles]="{ background: '#D1EFFF', paddingBlock: '1rem' }">
<div fdTreeItemText style="display: flex; align-items: center; gap: 1rem">
<fd-avatar size="s" [colorAccent]="9" glyph="product"></fd-avatar>
<span style="flex: 1">Product name catalog</span>
<button fd-button fdType="transparent" glyph="overflow" ariaLabel="more" title="more"></button>
</div>
</fd-tree-item>
<fd-tree-item customClass="my-custom-class">
</fd2-tree-item>
<fd2-tree-item customClass="my-custom-class">
<fd-icon fdTreeItemIcon glyph="phone"></fd-icon>
<span fdTreeItemText>Item 5 (Level 1)</span>
</fd-tree-item>
</fd2-tree-item>
</fd-tree>
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<fd-tree [dataSource]="items" selection="multiple">
<fd-tree-item
<fd2-tree-item
*fdTreeItemDef="let item; as: model"
[level]="item.level"
[state]="item.state"
Expand All @@ -16,5 +16,5 @@
@if (item.data.editable) {
<button fd-button fdType="transparent" fdTreeItemButton glyph="decline"></button>
}
</fd-tree-item>
</fd2-tree-item>
</fd-tree>
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<fd-tree [dataSource]="items" selection="multiple">
<fd-tree-item
<fd2-tree-item
*fdTreeItemDef="let item; as: model"
[level]="item.level"
[state]="item.state"
Expand All @@ -10,5 +10,5 @@
>
<fd-icon fdTreeItemIcon [glyph]="item.data.icon"></fd-icon>
<span fdTreeItemText>{{ item.data.title }}</span>
</fd-tree-item>
</fd2-tree-item>
</fd-tree>
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ <h4>Single selection mode:</h4>
[independentSections]="independentSections"
[selectionPlacement]="selectionPlacement"
>
<fd-tree-item
<fd2-tree-item
*fdTreeItemDef="let item; as: model"
[level]="item.level"
[value]="item.data.value"
Expand All @@ -30,7 +30,7 @@ <h4>Single selection mode:</h4>
>
<fd-icon fdTreeItemIcon [glyph]="item.data.icon"></fd-icon>
<span fdTreeItemText>{{ item.data.title }}</span>
</fd-tree-item>
</fd2-tree-item>
</fd-tree>
</form>

Expand All @@ -46,7 +46,7 @@ <h4>Multiple selection mode:</h4>
selection="multiple"
[selectionPlacement]="selectionPlacement"
>
<fd-tree-item
<fd2-tree-item
*fdTreeItemDef="let item; as: model"
[level]="item.level"
[value]="item.data.value"
Expand All @@ -59,7 +59,7 @@ <h4>Multiple selection mode:</h4>
>
<fd-icon fdTreeItemIcon [glyph]="item.data.icon"></fd-icon>
<span fdTreeItemText>{{ item.data.title }}</span>
</fd-tree-item>
</fd2-tree-item>
</fd-tree>
</form>

Expand Down

0 comments on commit f1849ae

Please sign in to comment.