refactor: renamed data-hide-icon to data-show-icon to match property

__snapshots__/input/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBInput-should-have-same-aria-snapshot.yaml

@@ -86,14 +86,14 @@
   - text: "True"
   - textbox "True"
   - status
-  - link "Show Icon Trailing"
+  - link "Show Icon Leading + Trailing"
   - text: "False"
   - textbox "False"
   - status
   - text: "True"
   - textbox "True"
   - status
-  - link "Show Icon Leading + Trailing"
+  - link "Show Icon Trailing"
   - text: "False"
   - textbox "False"
   - status

__snapshots__/input/showcase/chromium/should-have-same-aria-snapshot/DBInput-should-have-same-aria-snapshot.yaml

@@ -86,14 +86,14 @@
   - text: "True"
   - textbox "True"
   - status
-  - link "Show Icon Trailing"
+  - link "Show Icon Leading + Trailing"
   - text: "False"
   - textbox "False"
   - status
   - text: "True"
   - textbox "True"
   - status
-  - link "Show Icon Leading + Trailing"
+  - link "Show Icon Trailing"
   - text: "False"
   - textbox "False"
   - status

__snapshots__/input/showcase/firefox/should-have-same-aria-snapshot/DBInput-should-have-same-aria-snapshot.yaml

@@ -86,14 +86,14 @@
   - text: "True"
   - textbox "True"
   - status
-  - link "Show Icon Trailing"
+  - link "Show Icon Leading + Trailing"
   - text: "False"
   - textbox "False"
   - status
   - text: "True"
   - textbox "True"
   - status
-  - link "Show Icon Leading + Trailing"
+  - link "Show Icon Trailing"
   - text: "False"
   - textbox "False"
   - status

__snapshots__/input/showcase/mobile-chrome/should-have-same-aria-snapshot/DBInput-should-have-same-aria-snapshot.yaml

@@ -86,14 +86,14 @@
   - text: "True"
   - textbox "True"
   - status
-  - link "Show Icon Trailing"
+  - link "Show Icon Leading + Trailing"
   - text: "False"
   - textbox "False"
   - status
   - text: "True"
   - textbox "True"
   - status
-  - link "Show Icon Leading + Trailing"
+  - link "Show Icon Trailing"
   - text: "False"
   - textbox "False"
   - status

__snapshots__/input/showcase/mobile-safari/should-have-same-aria-snapshot/DBInput-should-have-same-aria-snapshot.yaml

@@ -86,14 +86,14 @@
   - text: "True"
   - textbox "True"
   - status
-  - link "Show Icon Trailing"
+  - link "Show Icon Leading + Trailing"
   - text: "False"
   - textbox "False"
   - status
   - text: "True"
   - textbox "True"
   - status
-  - link "Show Icon Leading + Trailing"
+  - link "Show Icon Trailing"
   - text: "False"
   - textbox "False"
   - status

__snapshots__/input/showcase/webkit/should-have-same-aria-snapshot/DBInput-should-have-same-aria-snapshot.yaml

@@ -86,14 +86,14 @@
   - text: "True"
   - textbox "True"
   - status
-  - link "Show Icon Trailing"
+  - link "Show Icon Leading + Trailing"
   - text: "False"
   - textbox "False"
   - status
   - text: "True"
   - textbox "True"
   - status
-  - link "Show Icon Leading + Trailing"
+  - link "Show Icon Trailing"
   - text: "False"
   - textbox "False"
   - status

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

@@ -6,7 +6,7 @@ import {
 	useStore
 } from '@builder.io/mitosis';
 import { DEFAULT_ICON } from '../../shared/constants';
-import { cls, getHideProp } from '../../utils';
+import { cls, getBooleanAsString } from '../../utils';
 import { DBBrandProps, DBBrandState } from './model';
 
 useMetadata({});
@@ -23,7 +23,7 @@ export default function DBBrand(props: DBBrandProps) {
 		<div
 			ref={_ref}
 			data-icon={props.hideLogo ? 'none' : (props.icon ?? DEFAULT_ICON)}
-			data-hide-icon={getHideProp(props.showIcon)}
+			data-show-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

@@ -5,7 +5,7 @@ import {
 	useRef,
 	useStore
 } from '@builder.io/mitosis';
-import { cls, getBoolean, getBooleanAsString, getHideProp } from '../../utils';
+import { cls, getBoolean, getBooleanAsString } from '../../utils';
 import type { DBButtonProps, DBButtonState } from './model';
 
 useMetadata({
@@ -38,11 +38,11 @@ export default function DBButton(props: DBButtonProps) {
 			type={state.getButtonType()}
 			disabled={getBoolean(props.disabled, 'disabled')}
 			data-icon={props.iconLeading ?? props.icon}
-			data-hide-icon={getHideProp(
+			data-show-icon={getBooleanAsString(
 				props.showIconLeading ?? props.showIcon
 			)}
 			data-icon-trailing={props.iconTrailing}
-			data-hide-icon-trailing={getHideProp(props.showIconTrailing)}
+			data-show-icon-trailing={getBooleanAsString(props.showIconTrailing)}
 			data-size={props.size}
 			data-width={props.width}
 			data-variant={props.variant}

packages/components/src/components/checkbox/checkbox.scss

@@ -135,7 +135,7 @@
 
 				border-width: form-components.$check-border-size;
 
-				&:not([data-hide-icon-leading="true"])::before {
+				&:not([data-show-icon-leading="false"])::before {
 					align-content: center;
 					font-size: calc(
 						var(--db-icon-font-size) - 2 *

packages/components/src/components/custom-select-list-item/custom-select-list-item.lite.tsx

@@ -9,13 +9,7 @@ import {
 	useTarget
 } from '@builder.io/mitosis';
 import { ChangeEvent } from '../../shared/model';
-import {
-	cls,
-	getBoolean,
-	getBooleanAsString,
-	getHideProp,
-	uuid
-} from '../../utils';
+import { cls, getBoolean, getBooleanAsString, uuid } from '../../utils';
 import {
 	handleFrameworkEventAngular,
 	handleFrameworkEventVue
@@ -95,7 +89,7 @@ export default function DBCustomSelectListItem(
 							? props.icon
 							: undefined
 					}
-					data-hide-icon={getHideProp(props.showIcon)}
+					data-show-icon={getBooleanAsString(props.showIcon)}
 					data-icon-trailing={state.getIconTrailing()}>
 					<input
 						class="db-custom-select-list-item-checkbox"

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

@@ -820,7 +820,7 @@ export default function DBCustomSelect(props: DBCustomSelectProps) {
 			data-selected-type={props.multiple ? props.selectedType : 'text'}
 			data-hide-label={getHideProp(props.showLabel)}
 			data-icon={props.icon}
-			data-hide-icon={getHideProp(props.showIcon)}>
+			data-show-icon={getBooleanAsString(props.showIcon)}>
 			<label id={state._labelId}>
 				{props.label ?? DEFAULT_LABEL}
 				<select

packages/components/src/components/custom-select/custom-select.scss

@@ -23,7 +23,7 @@
 
 	position: relative;
 
-	&[data-icon]:not([data-hide-icon="true"]) {
+	&[data-icon]:not([data-show-icon="false"]) {
 		--db-form-component-min-inline-size: #{variables.$db-sizing-2xl};
 	}
 

packages/components/src/components/custom-select/docs/HTML.md

@@ -73,17 +73,9 @@ For general installation and configuration take a look at the [components](https
 			</article>
 		</details>
 		<span aria-hidden="true">Placeholder</span
-		><span
-			class="db-infotext"
-			data-semantic="successful"
-			data-size="small"
-			data-hide-icon-leading="false"
+		><span class="db-infotext" data-semantic="successful" data-size="small"
 			>TODO: Add a validMessage</span
-		><span
-			class="db-infotext"
-			data-semantic="critical"
-			data-size="small"
-			data-hide-icon-leading="false"
+		><span class="db-infotext" data-semantic="critical" data-size="small"
 			>TODO: Add an invalidMessage</span
 		><span data-visually-hidden="true" role="status"></span>
 	</div>

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

@@ -5,7 +5,7 @@ import {
 	useRef,
 	useStore
 } from '@builder.io/mitosis';
-import { cls, getHideProp } from '../../utils';
+import { cls, getBooleanAsString } from '../../utils';
 import { DBInfotextProps, DBInfotextState } from './model';
 
 useMetadata({});
@@ -27,7 +27,7 @@ export default function DBInfotext(props: DBInfotextProps) {
 			data-icon={props.icon}
 			data-semantic={props.semantic}
 			data-size={props.size}
-			data-hide-icon-leading={getHideProp(props.showIcon ?? true)}>
+			data-show-icon-leading={getBooleanAsString(props.showIcon ?? true)}>
 			<Show when={props.text} else={props.children}>
 				{props.text}
 			</Show>

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

@@ -30,6 +30,7 @@ import {
 	cls,
 	delay,
 	getBoolean,
+	getBooleanAsString,
 	getHideProp,
 	getInputValue,
 	getNumber,
@@ -200,13 +201,15 @@ export default function DBInput(props: DBInputProps) {
 			class={cls('db-input', props.className)}
 			data-variant={props.variant}
 			data-hide-label={getHideProp(props.showLabel)}
-			data-hide-icon={getHideProp(
+			data-show-icon={getBooleanAsString(
 				props.showIconLeading ?? props.showIcon
 			)}
 			data-icon={props.iconLeading ?? props.icon}
 			data-icon-trailing={props.iconTrailing}
 			data-hide-asterisk={getHideProp(props.showRequiredAsterisk)}
-			data-hide-icon-trailing={getHideProp(props.showIconTrailing)}>
+			data-show-icon-trailing={getBooleanAsString(
+				props.showIconTrailing
+			)}>
 			<label htmlFor={state._id}>{props.label ?? DEFAULT_LABEL}</label>
 			<input
 				aria-invalid={props.validation === 'invalid'}

packages/components/src/components/input/input.scss

@@ -16,7 +16,7 @@ $icon-padding: calc(
 	@include form-components.set-default-form-component(input);
 
 	// increased inline size for elements with icons or specific input types that have icons
-	&:is([data-icon], [data-icon-trailing]):not([data-hide-icon="true"]),
+	&:is([data-icon], [data-icon-trailing]):not([data-show-icon="false"]),
 	&:has(
 		input[type="search"],
 		input[type="date"],
@@ -34,12 +34,12 @@ $icon-padding: calc(
 	}
 
 	// padding-inline-end according to current amount of icons
-	&[data-icon],
+	&[data-icon]:not([data-show-icon="false"]),
 	&:has(input[type="search"]) {
 		--db-form-component-padding-inline-start: #{$icon-padding};
 	}
 
-	&[data-icon-trailing],
+	&[data-icon-trailing]:not([data-show-icon-trailing="false"]),
 	&:has(input[type="search"]),
 	&:has(datalist) {
 		--db-form-component-padding-inline-end: #{$icon-padding};

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

@@ -4,7 +4,7 @@ import {
 	useMetadata,
 	useRef
 } from '@builder.io/mitosis';
-import { cls, getBooleanAsString, getHideProp } from '../../utils';
+import { cls, getBooleanAsString } from '../../utils';
 import { DBLinkProps } from './model';
 
 useMetadata({});
@@ -27,7 +27,7 @@ export default function DBLink(props: DBLinkProps) {
 			aria-disabled={getBooleanAsString(props.disabled)}
 			tabIndex={props.disabled ? -1 : 0}
 			data-size={props.size}
-			data-hide-icon-trailing={getHideProp(props.showIcon ?? true)}
+			data-show-icon-trailing={getBooleanAsString(props.showIcon ?? true)}
 			data-variant={props.variant}
 			data-content={props.content || 'internal'}>
 			<Show when={props.text} else={props.children}>

packages/components/src/components/link/link.scss

@@ -20,7 +20,7 @@
 	&[data-content="internal"] {
 		@include icons.set-icon("arrow_right", "after");
 
-		&:not([data-hide-icon-trailing="true"])::after {
+		&:not([data-show-icon-leading="false"])::after {
 			vertical-align: top;
 		}
 	}

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

@@ -10,14 +10,7 @@ import {
 } from '@builder.io/mitosis';
 import { DEFAULT_BACK } from '../../shared/constants';
 import { ClickEvent } from '../../shared/model';
-import {
-	cls,
-	delay,
-	getBoolean,
-	getBooleanAsString,
-	getHideProp,
-	uuid
-} from '../../utils';
+import { cls, delay, getBoolean, getBooleanAsString, uuid } from '../../utils';
 import { NavigationItemSafeTriangle } from '../../utils/navigation';
 import DBButton from '../button/button.lite';
 import { DBNavigationItemProps, DBNavigationItemState } from './model';
@@ -112,7 +105,7 @@ export default function DBNavigationItem(props: DBNavigationItemProps) {
 			class={cls('db-navigation-item', props.className)}
 			data-width={props.width}
 			data-icon={props.icon}
-			data-hide-icon={getHideProp(props.showIcon)}
+			data-show-icon={getBooleanAsString(props.showIcon)}
 			data-active={props.active}
 			data-wrap={getBooleanAsString(props.wrap)}
 			aria-disabled={getBooleanAsString(props.disabled)}>

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

@@ -8,7 +8,12 @@ import {
 } from '@builder.io/mitosis';
 import { DEFAULT_CLOSE_BUTTON } from '../../shared/constants';
 import { ClickEvent } from '../../shared/model';
-import { cls, getBoolean, getHideProp, stringPropVisible } from '../../utils';
+import {
+	cls,
+	getBoolean,
+	getBooleanAsString,
+	stringPropVisible
+} from '../../utils';
 import DBButton from '../button/button.lite';
 import { DBNotificationProps, DBNotificationState } from './model';
 
@@ -40,7 +45,7 @@ export default function DBNotification(props: DBNotificationProps) {
 			data-semantic={props.semantic}
 			data-variant={props.variant}
 			data-icon={props.icon}
-			data-hide-icon={getHideProp(props.showIcon)}
+			data-show-icon={getBooleanAsString(props.showIcon)}
 			data-link-variant={props.linkVariant}>
 			<Slot name="image" />
 			<Show when={stringPropVisible(props.headline, props.showHeadline)}>

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

@@ -28,6 +28,7 @@ import {
 	cls,
 	delay,
 	getBoolean,
+	getBooleanAsString,
 	getHideProp,
 	getOptionKey,
 	hasVoiceOver,
@@ -198,7 +199,7 @@ export default function DBSelect(props: DBSelectProps) {
 			data-hide-label={getHideProp(props.showLabel)}
 			data-hide-asterisk={getHideProp(props.showRequiredAsterisk)}
 			data-icon={props.icon}
-			data-hide-icon={getHideProp(props.showIcon)}>
+			data-show-icon={getBooleanAsString(props.showIcon)}>
 			<label htmlFor={state._id}>{props.label ?? DEFAULT_LABEL}</label>
 			<select
 				aria-invalid={props.validation === 'invalid'}

packages/components/src/components/select/select.scss

@@ -17,7 +17,7 @@
 	@include form-components.set-default-form-component(select);
 
 	// increased inline size for elements with icons
-	&[data-icon]:not([data-hide-icon="true"]) {
+	&[data-icon]:not([data-show-icon="false"]) {
 		--db-form-component-min-inline-size: #{variables.$db-sizing-2xl};
 	}