From 7837d456a5f3f75bb18e26a032f95cda74784499 Mon Sep 17 00:00:00 2001 From: Nicolas Merget Date: Wed, 13 Nov 2024 12:55:35 +0100 Subject: [PATCH 01/12] feat: align properties with figma to have a nearly 1:1 relationship --- packages/components/scripts/utils/index.ts | 5 ++ .../accordion-item/accordion-item.lite.tsx | 5 +- .../src/components/badge/badge.lite.tsx | 5 +- .../components/src/components/badge/model.ts | 6 ++- .../src/components/brand/brand.lite.tsx | 9 ++-- .../components/src/components/brand/model.ts | 16 ++++-- .../src/components/button/button.lite.tsx | 7 ++- .../components/src/components/button/model.ts | 6 ++- .../src/components/checkbox/checkbox.lite.tsx | 12 +++-- .../src/components/icon/icon.lite.tsx | 6 ++- .../components/src/components/icon/model.ts | 12 ++++- .../src/components/infotext/infotext.lite.tsx | 11 ++-- .../src/components/infotext/model.ts | 8 ++- .../src/components/input/input.lite.tsx | 17 ++++-- .../components/src/components/input/model.ts | 4 +- .../src/components/link/link.lite.tsx | 6 +-- .../components/src/components/link/link.scss | 16 +++--- .../components/src/components/link/model.ts | 10 ++-- .../src/components/navigation-item/model.ts | 6 ++- .../navigation-item/navigation-item.lite.tsx | 11 +++- .../src/components/notification/model.ts | 8 ++- .../notification/notification.lite.tsx | 9 +++- .../src/components/radio/radio.lite.tsx | 5 +- .../components/src/components/select/model.ts | 6 ++- .../src/components/select/select.lite.tsx | 18 +++++-- .../src/components/switch/switch.lite.tsx | 5 +- .../src/components/tab-item/model.ts | 6 ++- .../src/components/tab-item/tab-item.lite.tsx | 5 +- .../components/src/components/tag/model.ts | 6 ++- .../src/components/tag/tag.lite.tsx | 1 + .../src/components/textarea/textarea.lite.tsx | 7 ++- packages/components/src/shared/model.ts | 15 ++++++ .../components/src/utils/form-components.ts | 10 +++- packages/foundations/scss/icons/include.scss | 2 + .../app/components/link/link.component.html | 1 + showcases/next-showcase/tsconfig.json | 47 +++++++++------- .../src/components/default-component.tsx | 53 ++++++++++++------- .../src/components/form/index.tsx | 4 +- .../src/components/link/index.tsx | 6 ++- showcases/shared/default-component-data.ts | 1 + showcases/shared/input.json | 4 ++ showcases/shared/link.json | 8 +++ .../vue-showcase/src/components/link/Link.vue | 1 + 43 files changed, 290 insertions(+), 116 deletions(-) diff --git a/packages/components/scripts/utils/index.ts b/packages/components/scripts/utils/index.ts index 2e01b14a794..7ea0b19c7a1 100644 --- a/packages/components/scripts/utils/index.ts +++ b/packages/components/scripts/utils/index.ts @@ -21,6 +21,11 @@ export const runReplacements = ( replacements = [...replacements, ...component.overwrites.global]; } + replacements.push({ + from: ',\n' + ',', + to: ',' + }); + for (const replacement of replacements) { const option = { files: file, diff --git a/packages/components/src/components/accordion-item/accordion-item.lite.tsx b/packages/components/src/components/accordion-item/accordion-item.lite.tsx index edbb92bb1d7..73c5f774a3d 100644 --- a/packages/components/src/components/accordion-item/accordion-item.lite.tsx +++ b/packages/components/src/components/accordion-item/accordion-item.lite.tsx @@ -53,8 +53,9 @@ export default function DBAccordionItem(props: DBAccordionItemProps) {
- {props.content} - {props.children} + + {props.content} +
); diff --git a/packages/components/src/components/badge/badge.lite.tsx b/packages/components/src/components/badge/badge.lite.tsx index 402e6449f3b..c0a11fe0e57 100644 --- a/packages/components/src/components/badge/badge.lite.tsx +++ b/packages/components/src/components/badge/badge.lite.tsx @@ -1,6 +1,7 @@ import { onMount, onUpdate, + Show, useMetadata, useRef, useStore @@ -51,7 +52,9 @@ export default function DBBadge(props: DBBadgeProps) { props.placement?.startsWith('corner') && (props.label ?? DEFAULT_LABEL) }> - {props.children} + + {props.text} + ); } diff --git a/packages/components/src/components/badge/model.ts b/packages/components/src/components/badge/model.ts index 9307b8d2732..3773cfe1936 100644 --- a/packages/components/src/components/badge/model.ts +++ b/packages/components/src/components/badge/model.ts @@ -4,7 +4,8 @@ import { GlobalState, InitializedState, SemanticProps, - SizeProps + SizeProps, + TextProps } from '../../shared/model'; export const BadgePlacementList = [ @@ -34,7 +35,8 @@ export type DBBadgeProps = DBBadgeDefaultProps & GlobalProps & SemanticProps & SizeProps & - EmphasisProps; + EmphasisProps & + TextProps; export type DBBadgeDefaultState = {}; diff --git a/packages/components/src/components/brand/brand.lite.tsx b/packages/components/src/components/brand/brand.lite.tsx index 96e995aef9e..dcb07c0a219 100644 --- a/packages/components/src/components/brand/brand.lite.tsx +++ b/packages/components/src/components/brand/brand.lite.tsx @@ -1,5 +1,5 @@ -import { useMetadata, useRef, useStore } from '@builder.io/mitosis'; -import { cls } from '../../utils'; +import { Show, useMetadata, useRef, useStore } from '@builder.io/mitosis'; +import { cls, getBooleanAsString } from '../../utils'; import { DBBrandProps, DBBrandState } from './model'; import { DEFAULT_ICON } from '../../shared/constants'; @@ -15,9 +15,12 @@ export default function DBBrand(props: DBBrandProps) {
- {props.children} + + {props.text} +
); } diff --git a/packages/components/src/components/brand/model.ts b/packages/components/src/components/brand/model.ts index c18d7387b9f..2b6b2f5ce87 100644 --- a/packages/components/src/components/brand/model.ts +++ b/packages/components/src/components/brand/model.ts @@ -1,13 +1,23 @@ -import { GlobalProps, GlobalState, IconProps } from '../../shared/model'; +import { + GlobalProps, + GlobalState, + IconProps, + ShowIconProps, + TextProps +} from '../../shared/model'; export type DBBrandDefaultProps = { /** - * Disable the default logo svg to pass in a custom `img` + * @deprecated: Disable the default logo svg to pass in a custom `img` */ hideLogo?: boolean; }; -export type DBBrandProps = DBBrandDefaultProps & GlobalProps & IconProps; +export type DBBrandProps = DBBrandDefaultProps & + GlobalProps & + IconProps & + ShowIconProps & + TextProps; export type DBBrandDefaultState = {}; diff --git a/packages/components/src/components/button/button.lite.tsx b/packages/components/src/components/button/button.lite.tsx index ef0d1b20f83..6d2281301fa 100644 --- a/packages/components/src/components/button/button.lite.tsx +++ b/packages/components/src/components/button/button.lite.tsx @@ -1,4 +1,4 @@ -import { useMetadata, useRef, useStore } from '@builder.io/mitosis'; +import { Show, useMetadata, useRef, useStore } from '@builder.io/mitosis'; import type { DBButtonProps, DBButtonState } from './model'; import { cls, getBooleanAsString } from '../../utils'; import { ClickEvent } from '../../shared/model'; @@ -27,6 +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-size={props.size} data-state={props.state} data-width={props.width} @@ -40,7 +41,9 @@ export default function DBButton(props: DBButtonProps) { onClick={(event: ClickEvent) => state.handleClick(event) }> - {props.children} + + {props.text} + ); } diff --git a/packages/components/src/components/button/model.ts b/packages/components/src/components/button/model.ts index 469b2cf6094..752342f7b7d 100644 --- a/packages/components/src/components/button/model.ts +++ b/packages/components/src/components/button/model.ts @@ -4,7 +4,9 @@ import { GlobalProps, GlobalState, IconProps, + ShowIconProps, SizeProps, + TextProps, WidthProps } from '../../shared/model'; @@ -79,7 +81,9 @@ export type DBButtonProps = DBButtonDefaultProps & ClickEventProps & IconProps & WidthProps & - SizeProps; + SizeProps & + ShowIconProps & + TextProps; export type DBButtonDefaultState = {}; diff --git a/packages/components/src/components/checkbox/checkbox.lite.tsx b/packages/components/src/components/checkbox/checkbox.lite.tsx index 40e0083c26c..8acd9cf9ac0 100644 --- a/packages/components/src/components/checkbox/checkbox.lite.tsx +++ b/packages/components/src/components/checkbox/checkbox.lite.tsx @@ -17,7 +17,10 @@ import { DEFAULT_VALID_MESSAGE_ID_SUFFIX } from '../../shared/constants'; import { ChangeEvent, InteractionEvent } from '../../shared/model'; -import { handleFrameworkEvent } from '../../utils/form-components'; +import { + handleFrameworkEvent, + messageVisible +} from '../../utils/form-components'; import DBInfotext from '../infotext/infotext.lite'; useMetadata({}); @@ -167,13 +170,12 @@ export default function DBCheckbox(props: DBCheckboxProps) { } aria-describedby={state._descByIds} /> - - {props.label} + + {props.label} - {props.children} - +