Improve nav icon handling (#6007)

packages/components/src/components.d.ts

@@ -1844,9 +1844,13 @@ export namespace Components {
          */
         "_collapsible"?: boolean;
         /**
-          * Gibt an, ob die Navigation eine zusätzliche Schaltfläche zum Aus- und Einklappen der Navigation anzeigen soll.
+          * Creates a button below the navigation, that toggles _collapsible. Only available for _orientation="vertical".
          */
         "_hasCompactButton"?: boolean;
+        /**
+          * Shows icons next to the navigation item labels, even when the navigation is not collapsed.
+         */
+        "_hasIconsWhenExpanded"?: boolean;
         /**
           * Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.
           * @TODO : Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.
@@ -4621,9 +4625,13 @@ declare namespace LocalJSX {
          */
         "_collapsible"?: boolean;
         /**
-          * Gibt an, ob die Navigation eine zusätzliche Schaltfläche zum Aus- und Einklappen der Navigation anzeigen soll.
+          * Creates a button below the navigation, that toggles _collapsible. Only available for _orientation="vertical".
          */
         "_hasCompactButton"?: boolean;
+        /**
+          * Shows icons next to the navigation item labels, even when the navigation is not collapsed.
+         */
+        "_hasIconsWhenExpanded"?: boolean;
         /**
           * Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.
           * @TODO : Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.

packages/components/src/components/nav/component.tsx

@@ -15,6 +15,7 @@ import {
 	devWarning,
 	validateCollapsible,
 	validateHasCompactButton,
+	validateHasIconsWhenExpanded,
 	validateHideLabel,
 	validateLabel,
 	watchValidator,
@@ -81,7 +82,10 @@ export class KolNav implements NavAPI {
 		link: ButtonOrLinkOrTextWithChildrenProps,
 		expanded: boolean
 	): JSX.Element {
-		const icons = link._icons || (this.state._hideLabel ? 'codicon codicon-primitive-square' : undefined);
+		const icons =
+			this.state._hasIconsWhenExpanded || this.state._hideLabel
+				? link._icons || (this.state._hideLabel ? 'codicon codicon-symbol-method' : undefined)
+				: undefined;
 
 		return (
 			<div class={{ entry: true, 'hide-label': hideLabel }}>
@@ -237,10 +241,15 @@ export class KolNav implements NavAPI {
 	@Prop() public _collapsible?: boolean = true;
 
 	/**
-	 * Gibt an, ob die Navigation eine zusätzliche Schaltfläche zum Aus- und Einklappen der Navigation anzeigen soll.
+	 * Creates a button below the navigation, that toggles _collapsible. Only available for _orientation="vertical".
 	 */
 	@Prop() public _hasCompactButton?: boolean = false;
 
+	/**
+	 * Shows icons next to the navigation item labels, even when the navigation is not collapsed.
+	 */
+	@Prop() public _hasIconsWhenExpanded?: boolean = false;
+
 	/**
 	 * Hides the caption by default and displays the caption text with a tooltip when the
 	 * interactive element is focused or the mouse is over it.
@@ -266,6 +275,7 @@ export class KolNav implements NavAPI {
 	@State() public state: NavStates = {
 		_collapsible: true,
 		_hasCompactButton: false,
+		_hasIconsWhenExpanded: false,
 		_hideLabel: false,
 		_label: '', // ⚠ required
 		_links: [],
@@ -283,6 +293,11 @@ export class KolNav implements NavAPI {
 		validateHasCompactButton(this, value);
 	}
 
+	@Watch('_hasIconsWhenExpanded')
+	public validateHasIconsWhenExpanded(value?: boolean): void {
+		validateHasIconsWhenExpanded(this, value);
+	}
+
 	@Watch('_hideLabel')
 	public validateHideLabel(value?: HideLabelPropType) {
 		validateHideLabel(this, value);
@@ -324,6 +339,7 @@ export class KolNav implements NavAPI {
 		this.validateCollapsible(this._collapsible);
 		this.validateHideLabel(this._hideLabel);
 		this.validateHasCompactButton(this._hasCompactButton);
+		this.validateHasIconsWhenExpanded(this._hasIconsWhenExpanded);
 		this.validateLabel(this._label, undefined, true);
 		this.validateLinks(this._links);
 		this.validateOrientation(this._orientation);

packages/samples/react/src/components/nav/basic.tsx

@@ -1,8 +1,25 @@
-import React from 'react';
+import React, { useState } from 'react';
 
-import { KolNav } from '@public-ui/react';
+import { KolInputCheckbox, KolNav } from '@public-ui/react';
 
 import { LINKS } from './links';
 
 import type { FC } from 'react';
-export const NavBasic: FC = () => <KolNav class="block w-fit" _label="Main navigation" _links={LINKS} _hasCompactButton />;
+export const NavBasic: FC = () => {
+	const [hasIconsWhenExpanded, setHasIconsWhenExpanded] = useState(false);
+
+	return (
+		<>
+			<KolInputCheckbox
+				_label="Show icons when expanded"
+				_checked={hasIconsWhenExpanded}
+				_on={{
+					onChange: (_event, value: unknown) => {
+						setHasIconsWhenExpanded(value as boolean);
+					},
+				}}
+			></KolInputCheckbox>
+			<KolNav class="block w-fit" _label="Main navigation" _links={LINKS} _hasCompactButton _hasIconsWhenExpanded={hasIconsWhenExpanded} />
+		</>
+	);
+};

packages/schema/src/components/nav.ts

@@ -1,6 +1,6 @@
 import type { Generic } from 'adopted-style-sheets';
 
-import type { PropCollapsible, PropHasCompactButton, PropHideLabel, PropLabel } from '../props';
+import type { PropCollapsible, PropHasCompactButton, PropHasIconsWhenExpanded, PropHideLabel, PropLabel } from '../props';
 import type { ButtonOrLinkOrTextWithChildrenProps, Orientation, Stringified } from '../types';
 
 type RequiredProps = {
@@ -10,7 +10,8 @@ type OptionalProps = {
 	orientation: Orientation;
 } & PropCollapsible &
 	PropHasCompactButton &
-	PropHideLabel;
+	PropHideLabel &
+	PropHasIconsWhenExpanded;
 
 type RequiredStates = {
 	links: ButtonOrLinkOrTextWithChildrenProps[];
@@ -19,7 +20,8 @@ type RequiredStates = {
 } & PropCollapsible &
 	PropHasCompactButton &
 	PropLabel &
-	PropHideLabel;
+	PropHideLabel &
+	PropHasIconsWhenExpanded;
 type OptionalStates = NonNullable<unknown>;
 
 export type NavProps = Generic.Element.Members<RequiredProps, OptionalProps>;

packages/schema/src/props/has-icons-when-expanded.ts

@@ -0,0 +1,18 @@
+import type { Generic } from 'adopted-style-sheets';
+
+import { watchBoolean } from '../utils';
+
+/* types */
+export type HasIconsWhenExpandedPropType = boolean;
+
+/**
+ * Shows icons next to the navigation item labels, even when the navigation is not collapsed.
+ */
+export type PropHasIconsWhenExpanded = {
+	hasIconsWhenExpanded: HasIconsWhenExpandedPropType;
+};
+
+/* validator */
+export const validateHasIconsWhenExpanded = (component: Generic.Element.Component, value?: HasIconsWhenExpandedPropType): void => {
+	watchBoolean(component, '_hasIconsWhenExpanded', value);
+};

packages/schema/src/props/index.ts

@@ -20,6 +20,7 @@ export * from './error-list';
 export * from './has-closer';
 export * from './has-compact-button';
 export * from './has-counter';
+export * from './has-icons-when-expanded';
 export * from './heading-variant';
 export * from './hide-error';
 export * from './hide-label';
@@ -37,6 +38,7 @@ export * from './multiple';
 export * from './name';
 export * from './open';
 export * from './options';
+export * from './pagination-position';
 export * from './read-only';
 export * from './required';
 export * from './rows';
@@ -46,4 +48,3 @@ export * from './sync-value-by-selector';
 export * from './tooltip-align';
 export * from './touched';
 export * from './variant/spin';
-export * from './pagination-position';