fix(components/navigation-menu): fix item height #1964

zyfra · Aug 23, 2024 · e980053 · e980053
1 parent 209c631
commit e980053
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 9 deletions.
diff --git a/apps/doc/src/app/components/tree/tree.component.html b/apps/doc/src/app/components/tree/tree.component.html
@@ -65,19 +65,23 @@
  #treeControllerElement="prizmTreeController"
  [prizmTreeController]="prizmTreeController"
  >
- <prizm-tree-item #element="prizmTreeItem">
+ <prizm-tree-item #element="prizmTreeItem" [style.--prizm-tree-item-height]="treeItemHeight">
  Fruits
- <prizm-tree-item>
+ <prizm-tree-item [style.--prizm-tree-item-height]="treeItemHeight">
  Apples
- <prizm-tree-item>Granny Smith</prizm-tree-item>
- <prizm-tree-item>Red Delicious</prizm-tree-item>
+ <prizm-tree-item [style.--prizm-tree-item-height]="treeItemHeight"
+ >Granny Smith</prizm-tree-item
+ >
+ <prizm-tree-item [style.--prizm-tree-item-height]="treeItemHeight"
+ >Red Delicious</prizm-tree-item
+ >
  </prizm-tree-item>
- <prizm-tree-item>Oranges</prizm-tree-item>
+ <prizm-tree-item [style.--prizm-tree-item-height]="treeItemHeight">>Oranges</prizm-tree-item>
  </prizm-tree-item>
- <prizm-tree-item>
+ <prizm-tree-item [style.--prizm-tree-item-height]="treeItemHeight">
  Animals
- <prizm-tree-item>Cats</prizm-tree-item>
- <prizm-tree-item>Dogs</prizm-tree-item>
+ <prizm-tree-item [style.--prizm-tree-item-height]="treeItemHeight">Cats</prizm-tree-item>
+ <prizm-tree-item [style.--prizm-tree-item-height]="treeItemHeight">Dogs</prizm-tree-item>
  </prizm-tree-item>
  </ng-container>
  </div>
@@ -88,6 +92,14 @@
  heading="PrizmTreeItemControllerDirective"
  hostComponentKey="PrizmTreeItemControllerDirective"
  >
+ <ng-template
+ [(documentationPropertyValue)]="treeItemHeight"
+ documentationPropertyName="prizm-tree-item-height"
+ documentationPropertyType="string"
+ documentationPropertyMode="css-var"
+ >
+ Tree Item Height (default 32px)
+ </ng-template>
  <ng-template
  [(documentationPropertyValue)]="prizmTreeController"
  documentationPropertyName="prizmTreeController"

diff --git a/apps/doc/src/app/components/tree/tree.component.ts b/apps/doc/src/app/components/tree/tree.component.ts
@@ -21,6 +21,7 @@ export class TreeComponent {
  ];
 
  public treeController = true;
+ public treeItemHeight = '32px';
 
  public readonly setupModule: RawLoaderContent = import('./examples/setup-module.md?raw');
 

diff --git a/...nts/navigation-menu/components/prizm-navigation-menu/prizm-navigation-menu.component.less b/...nts/navigation-menu/components/prizm-navigation-menu/prizm-navigation-menu.component.less
@@ -1,6 +1,7 @@
 .prizm-navigation-menu {
  --prizm-navigation-menu__item-padding: 8px 16px;
  --prizm-navigation-menu__item-height: 40px;
+ --prizm-tree-item-height: 40px;
 
  display: grid;
  grid-template-rows: min-content;

diff --git a/...nts/src/lib/components/tree/components/tree-item-content/tree-item-content.component.less b/...nts/src/lib/components/tree/components/tree-item-content/tree-item-content.component.less
@@ -4,7 +4,7 @@
  display: flex;
  align-items: center;
  &:not(:empty) {
- height: 32px;
+ height: var(--prizm-tree-item-height, 32px);
  }
 
  :host-context(prizm-tree-item._expandable):not(._expandable) {