From 7917e72fbfd59a5358450c4c0f1f1e8ad15f1ff3 Mon Sep 17 00:00:00 2001 From: Nicolas Merget Date: Thu, 17 Jul 2025 23:45:06 +0200 Subject: [PATCH 1/6] refactor: renamed data-hide-icon to data-show-icon to match property --- .../components/src/components/brand/brand.lite.tsx | 4 ++-- .../components/src/components/button/button.lite.tsx | 8 +++----- .../components/src/components/checkbox/checkbox.scss | 2 +- .../custom-select-list-item.lite.tsx | 10 ++-------- .../components/custom-select/custom-select.lite.tsx | 2 +- .../src/components/custom-select/custom-select.scss | 2 +- .../src/components/custom-select/docs/HTML.md | 12 ++---------- .../src/components/infotext/infotext.lite.tsx | 4 ++-- .../components/src/components/input/input.lite.tsx | 6 ++---- packages/components/src/components/input/input.scss | 6 +++--- .../components/src/components/link/link.lite.tsx | 4 ++-- packages/components/src/components/link/link.scss | 2 +- .../navigation-item/navigation-item.lite.tsx | 11 ++--------- .../components/notification/notification.lite.tsx | 4 ++-- .../components/src/components/select/select.lite.tsx | 2 +- .../components/src/components/select/select.scss | 2 +- .../src/components/tab-item/tab-item.lite.tsx | 6 +++--- packages/components/src/components/tag/tag.lite.tsx | 4 ++-- packages/components/src/components/tag/tag.scss | 2 +- .../src/styles/internal/_icon-passing.scss | 2 +- .../src/styles/internal/_select-components.scss | 2 +- .../foundations/scss/defaults/default-icons.scss | 6 +++--- packages/foundations/scss/icons/_icon-helpers.scss | 8 +++++++- .../src/app/components/input/input.component.html | 1 + .../react-showcase/src/components/input/index.tsx | 2 ++ showcases/shared/input.json | 4 ++-- .../vue-showcase/src/components/input/Input.vue | 1 + 27 files changed, 52 insertions(+), 67 deletions(-) diff --git a/packages/components/src/components/brand/brand.lite.tsx b/packages/components/src/components/brand/brand.lite.tsx index e05d451a7c09..707d514b1814 100644 --- a/packages/components/src/components/brand/brand.lite.tsx +++ b/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, getBoolean } from '../../utils'; import { DBBrandProps, DBBrandState } from './model'; useMetadata({}); @@ -23,7 +23,7 @@ export default function DBBrand(props: DBBrandProps) {
diff --git a/packages/components/src/components/button/button.lite.tsx b/packages/components/src/components/button/button.lite.tsx index de64b5f91534..a6102a84e56d 100644 --- a/packages/components/src/components/button/button.lite.tsx +++ b/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,9 @@ export default function DBButton(props: DBButtonProps) { type={state.getButtonType()} disabled={getBoolean(props.disabled, 'disabled')} data-icon={props.iconLeading ?? props.icon} - data-hide-icon={getHideProp( - props.showIconLeading ?? props.showIcon - )} + data-show-icon={getBoolean(props.showIconLeading ?? props.showIcon)} data-icon-trailing={props.iconTrailing} - data-hide-icon-trailing={getHideProp(props.showIconTrailing)} + data-show-icon-trailing={getBoolean(props.showIconTrailing)} data-size={props.size} data-width={props.width} data-variant={props.variant} diff --git a/packages/components/src/components/checkbox/checkbox.scss b/packages/components/src/components/checkbox/checkbox.scss index d9e13d4f0a31..59ed2bb8c854 100644 --- a/packages/components/src/components/checkbox/checkbox.scss +++ b/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 * diff --git a/packages/components/src/components/custom-select-list-item/custom-select-list-item.lite.tsx b/packages/components/src/components/custom-select-list-item/custom-select-list-item.lite.tsx index f36acc0ae7f3..d237a6259d9a 100644 --- a/packages/components/src/components/custom-select-list-item/custom-select-list-item.lite.tsx +++ b/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={getBoolean(props.showIcon)} data-icon-trailing={state.getIconTrailing()}> + data-show-icon={getBoolean(props.showIcon)}>