fix: issue with showIcon

packages/components/src/components/brand/brand.lite.tsx

@@ -15,7 +15,7 @@ export default function DBBrand(props: DBBrandProps) {
 		<div
 			ref={ref}
 			data-icon={props.hideLogo ? 'none' : (props.icon ?? DEFAULT_ICON)}
-			data-show-icon={getBooleanAsString(props.showIcon)}
+			data-hide-icon={getBooleanAsString(!props.showIcon)}
 			id={props.id}
 			class={cls('db-brand', props.className)}>
 			<Show when={props.text} else={props.children}>

packages/components/src/components/button/button.lite.tsx

@@ -27,7 +27,7 @@ export default function DBButton(props: DBButtonProps) {
 			disabled={props.disabled}
 			aria-label={props.label}
 			data-icon={props.icon}
-			data-show-icon={getBooleanAsString(props.showIcon ?? !!props.icon)}
+			data-hide-icon={getBooleanAsString(!props.showIcon)}
 			data-size={props.size}
 			data-state={props.state}
 			data-width={props.width}

packages/components/src/components/infotext/infotext.lite.tsx

@@ -19,7 +19,7 @@ export default function DBInfotext(props: DBInfotextProps) {
 			data-icon={props.icon}
 			data-semantic={props.semantic}
 			data-size={props.size}
-			data-show-icon={getBooleanAsString(props.showIcon)}>
+			data-hide-icon-after={getBooleanAsString(!props.showIcon)}>
 			<Show when={props.text} else={props.children}>
 				{props.text}
 			</Show>

packages/components/src/components/input/input.lite.tsx

@@ -171,7 +171,7 @@ export default function DBInput(props: DBInputProps) {
 		<div
 			class={cls('db-input', props.className)}
 			data-variant={props.variant}
-			data-show-icon={getBooleanAsString(props.showIcon ?? !!props.icon)}
+			data-hide-icon={getBooleanAsString(!props.showIcon)}
 			data-icon={props.icon}
 			data-icon-after={props.iconAfter}>
 			<label htmlFor={state._id}>{props.label ?? DEFAULT_LABEL}</label>

packages/components/src/components/link/link.lite.tsx

@@ -38,7 +38,7 @@ export default function DBLink(props: DBLinkProps) {
 			aria-label={props.label}
 			aria-current={props.current}
 			data-size={props.size}
-			data-show-icon={getBooleanAsString(props.showIcon)}
+			data-hide-icon={getBooleanAsString(!props.showIcon)}
 			data-variant={props.variant}
 			data-content={props.content || 'internal'}
 			onClick={(event: ClickEvent<HTMLAnchorElement>) =>

packages/components/src/components/navigation-item/navigation-item.lite.tsx

@@ -97,7 +97,7 @@ export default function DBNavigationItem(props: DBNavigationItemProps) {
 			class={cls('db-navigation-item', props.className)}
 			data-width={props.width}
 			data-icon={props.icon}
-			data-show-icon={getBooleanAsString(props.showIcon ?? !!props.icon)}
+			data-hide-icon={getBooleanAsString(!props.showIcon)}
 			data-active={props.active}
 			aria-disabled={getBooleanAsString(props.disabled)}>
 			<Show when={!state.hasSubNavigation}>

packages/components/src/components/notification/notification.lite.tsx

@@ -28,7 +28,7 @@ export default function DBNotification(props: DBNotificationProps) {
 			data-semantic={props.semantic}
 			data-variant={props.variant}
 			data-icon={props.icon}
-			data-show-icon={getBooleanAsString(props.showIcon ?? !!props.icon)}
+			data-hide-icon={getBooleanAsString(!props.showIcon)}
 			data-link-variant={props.linkVariant}>
 			<Slot name="image" />
 			<Show when={props.headline}>

packages/components/src/components/select/select.lite.tsx

@@ -173,7 +173,7 @@ export default function DBSelect(props: DBSelectProps) {
 			class={cls('db-select', props.className)}
 			data-variant={props.variant}
 			data-icon={props.icon}
-			data-show-icon={getBooleanAsString(props.showIcon ?? !!props.icon)}>
+			data-hide-icon={getBooleanAsString(!props.showIcon)}>
 			<label htmlFor={state._id}>{props.label ?? DEFAULT_LABEL}</label>
 			<select
 				aria-invalid={props.customValidity === 'invalid'}

packages/components/src/components/tab-item/tab-item.lite.tsx

@@ -57,9 +57,7 @@ export default function DBTabItem(props: DBTabItemProps) {
 				htmlFor={props.id}
 				data-icon={props.icon}
 				data-icon-after={props.iconAfter}
-				data-show-icon={getBooleanAsString(
-					props.showIcon ?? !!props.icon
-				)}
+				data-hide-icon={getBooleanAsString(!props.showIcon)}
 				data-no-text={props.noText}>
 				<input
 					disabled={props.disabled}

packages/components/src/components/tag/tag.lite.tsx

@@ -57,7 +57,7 @@ export default function DBTag(props: DBTagProps) {
 			data-semantic={props.semantic}
 			data-emphasis={props.emphasis}
 			data-icon={props.icon}
-			data-show-icon={getBooleanAsString(props.showIcon ?? !!props.icon)}
+			data-hide-icon={getBooleanAsString(!props.showIcon)}
 			data-no-text={getBooleanAsString(props.noText)}
 			data-overflow={getBooleanAsString(props.overflow)}>
 			{props.children}

packages/components/src/shared/model.ts

@@ -65,6 +65,7 @@ export type IconProps = {
 export type ShowIconProps = {
 	/**
 	 * Enables or disables the visibility of the icon. The default value depends on the component.
+	 * For many components this property is optional to reflect figma properties.
 	 */
 	showIcon?: boolean;
 };

packages/foundations/scss/icons/include.scss

@@ -67,7 +67,7 @@
 	}
 }
 
-[data-show-icon="false"],
+[data-hide-icon="true"],
 [data-icon="none"],
 [data-icon-before="none"] {
 	&::before {
@@ -87,7 +87,7 @@
 	}
 }
 
-[data-show-icon="false"],
+[data-hide-icon-after="true"],
 [data-icon-after="none"] {
 	&::after {
 		content: none;