Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: align properties with Figma to have a nearly 1:1 relationship #3459

Merged
merged 30 commits into from
Dec 2, 2024
Merged
Changes from 28 commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
7837d45
feat: align properties with figma to have a nearly 1:1 relationship
nmerget Nov 13, 2024
d029acb
Merge branch 'main' into feat-figma-properties-alignment
nmerget Nov 13, 2024
740ab22
fix: issue with showIcon
nmerget Nov 13, 2024
a5c1618
fix: issue with showIcon
nmerget Nov 13, 2024
2f4f7dc
fix: issue with vue output
nmerget Nov 13, 2024
ae0e2f1
fix: issue with showIcon
nmerget Nov 13, 2024
16cf7e7
chore: update snapshots
nmerget Nov 13, 2024
8bcb9f0
Merge branch 'main' into feat-figma-properties-alignment
nmerget Nov 14, 2024
71ed1e6
fix: issue with checkbox icon for tag
nmerget Nov 14, 2024
9474553
Merge remote-tracking branch 'origin/feat-figma-properties-alignment'…
nmerget Nov 14, 2024
f9336b4
fix: issue with checkbox icon for tag
nmerget Nov 14, 2024
27ee786
chore: update snapshots
nmerget Nov 14, 2024
f160fd1
Merge branch 'main' into feat-figma-properties-alignment
nmerget Nov 14, 2024
4617a75
Merge branch 'main' into feat-figma-properties-alignment
nmerget Nov 14, 2024
092f9d2
Merge branch 'main' into feat-figma-properties-alignment
nmerget Nov 14, 2024
57f4053
Merge branch 'main' into feat-figma-properties-alignment
mfranzke Nov 19, 2024
db6ee76
refactor: prettification
mfranzke Nov 19, 2024
4059b79
fix: issues with misplaced icons
nmerget Nov 21, 2024
578d1d7
Merge remote-tracking branch 'origin/main' into feat-figma-properties…
nmerget Nov 21, 2024
4a481b0
chore: update snapshots
nmerget Nov 21, 2024
685c384
Merge branch 'main' into feat-figma-properties-alignment
nmerget Nov 21, 2024
e999315
Merge branch 'main' into feat-figma-properties-alignment
nmerget Nov 21, 2024
05abb15
Merge branch 'main' into feat-figma-properties-alignment
nmerget Nov 21, 2024
30504a5
Merge branch 'main' into feat-figma-properties-alignment
nmerget Nov 21, 2024
6129963
Merge branch 'main' into feat-figma-properties-alignment
nmerget Nov 22, 2024
3e31b20
Merge branch 'main' into feat-figma-properties-alignment
mfranzke Dec 2, 2024
9829e5d
chore: update snapshots
nmerget Dec 2, 2024
9b24642
Update packages/components/src/shared/model.ts
mfranzke Dec 2, 2024
0aa7cc2
chore: update snapshots
nmerget Dec 2, 2024
0d1ca13
Merge remote-tracking branch 'origin/feat-figma-properties-alignment'…
nmerget Dec 2, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
nmerget marked this conversation as resolved.
Show resolved Hide resolved
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -15,4 +15,5 @@
- link "Small arrow_right\" / \""
- link "Content arrow_up_right\" / \""
- link "(Default) Internal arrow_right\" / \""
- link "External arrow_up_right\" / \""
- link "External arrow_up_right\" / \""
- link "Show Icon"
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -15,4 +15,5 @@
- link "Small arrow_right\" / \""
- link "Content arrow_up_right\" / \""
- link "(Default) Internal arrow_right\" / \""
- link "External arrow_up_right\" / \""
- link "External arrow_up_right\" / \""
- link "Show Icon"
nmerget marked this conversation as resolved.
Show resolved Hide resolved
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -15,4 +15,5 @@
- link "Small arrow_right\" / \""
- link "Content arrow_up_right\" / \""
- link "(Default) Internal arrow_right\" / \""
- link "External arrow_up_right\" / \""
- link "External arrow_up_right\" / \""
- link "Show Icon"
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -15,4 +15,5 @@
- link "Small arrow_right\" / \""
- link "Content arrow_up_right\" / \""
- link "(Default) Internal arrow_right\" / \""
- link "External arrow_up_right\" / \""
- link "External arrow_up_right\" / \""
- link "Show Icon"
nmerget marked this conversation as resolved.
Show resolved Hide resolved
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -15,4 +15,5 @@
- link "Small arrow_right\" / \""
- link "Content arrow_up_right\" / \""
- link "(Default) Internal arrow_right\" / \""
- link "External arrow_up_right\" / \""
- link "External arrow_up_right\" / \""
- link "Show Icon"
nmerget marked this conversation as resolved.
Show resolved Hide resolved
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -15,4 +15,5 @@
- link "Small arrow_right\" / \""
- link "Content arrow_up_right\" / \""
- link "(Default) Internal arrow_right\" / \""
- link "External arrow_up_right\" / \""
- link "External arrow_up_right\" / \""
- link "Show Icon"
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
nmerget marked this conversation as resolved.
Show resolved Hide resolved
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions docs/development.md
Original file line number Diff line number Diff line change
@@ -36,5 +36,5 @@ npx playwright test --update-snapshots

You can also use `docker-compose` to test or regenerate screenshots.

- testing: `docker-compose -f ./e2e/docker-compose.yml up`
- update screenshots: `docker-compose -f ./e2e/docker-compose.regenerate.yml up`
- testing: `docker-compose -f ./e2e/docker-compose.yml up`
- update screenshots: `docker-compose -f ./e2e/docker-compose.regenerate.yml up`
5 changes: 5 additions & 0 deletions packages/components/scripts/utils/index.ts
Original file line number Diff line number Diff line change
@@ -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,
5 changes: 4 additions & 1 deletion packages/components/src/components/badge/badge.lite.tsx
Original file line number Diff line number Diff line change
@@ -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}
<Show when={props.text} else={props.children}>
{props.text}
</Show>
nmerget marked this conversation as resolved.
Show resolved Hide resolved
</span>
);
}
6 changes: 4 additions & 2 deletions packages/components/src/components/badge/model.ts
Original file line number Diff line number Diff line change
@@ -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 = {};

9 changes: 6 additions & 3 deletions packages/components/src/components/brand/brand.lite.tsx
Original file line number Diff line number Diff line change
@@ -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, getHideIcon } from '../../utils';
import { DBBrandProps, DBBrandState } from './model';
import { DEFAULT_ICON } from '../../shared/constants';

@@ -15,9 +15,12 @@ export default function DBBrand(props: DBBrandProps) {
<div
ref={ref}
data-icon={props.hideLogo ? 'none' : (props.icon ?? DEFAULT_ICON)}
data-hide-icon={getHideIcon(props.showIcon)}
id={props.id}
class={cls('db-brand', props.className)}>
{props.children}
<Show when={props.text} else={props.children}>
{props.text}
</Show>
</div>
);
}
16 changes: 13 additions & 3 deletions packages/components/src/components/brand/model.ts
Original file line number Diff line number Diff line change
@@ -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 = {};

9 changes: 6 additions & 3 deletions packages/components/src/components/button/button.lite.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
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 { cls, getBooleanAsString, getHideIcon } from '../../utils';
import { ClickEvent } from '../../shared/model';

useMetadata({});
@@ -27,6 +27,7 @@ export default function DBButton(props: DBButtonProps) {
disabled={props.disabled}
aria-label={props.label}
data-icon={props.icon}
data-hide-icon={getHideIcon(props.showIcon)}
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<HTMLButtonElement>) =>
state.handleClick(event)
}>
{props.children}
<Show when={props.text} else={props.children}>
{props.text}
</Show>
</button>
);
}
6 changes: 5 additions & 1 deletion packages/components/src/components/button/model.ts
Original file line number Diff line number Diff line change
@@ -4,7 +4,9 @@ import {
GlobalProps,
GlobalState,
IconProps,
ShowIconProps,
SizeProps,
TextProps,
WidthProps
} from '../../shared/model';

@@ -79,7 +81,9 @@ export type DBButtonProps = DBButtonDefaultProps &
ClickEventProps<HTMLButtonElement> &
IconProps &
WidthProps &
SizeProps;
SizeProps &
ShowIconProps &
TextProps;

export type DBButtonDefaultState = {};

12 changes: 7 additions & 5 deletions packages/components/src/components/checkbox/checkbox.lite.tsx
Original file line number Diff line number Diff line change
@@ -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}
/>
<Show when={props.label}>
<span>{props.label}</span>
<Show when={props.label} else={props.children}>
{props.label}
</Show>
{props.children}
</label>

<Show when={props.message}>
<Show when={messageVisible(props.message, props.showMessage)}>
<DBInfotext
size="small"
icon={props.messageIcon}
Original file line number Diff line number Diff line change
@@ -67,7 +67,7 @@

border-width: form-components.$check-border-size;

&::before {
&:not([data-hide-icon-before="true"])::before {
align-content: center;
font-size: calc(
var(--db-icon-font-size) - 2 *
6 changes: 4 additions & 2 deletions packages/components/src/components/icon/icon.lite.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useMetadata, useRef, useStore } from '@builder.io/mitosis';
import { Show, useMetadata, useRef, useStore } from '@builder.io/mitosis';
import type { DBIconProps, DBIconState } from './model';
import { cls } from '../../utils';

@@ -20,7 +20,9 @@ export default function DBIcon(props: DBIconProps) {
data-icon-weight={props.weight}
data-icon-variant={props.variant}
aria-hidden="true">
{props.children}
<Show when={props.text} else={props.children}>
{props.text}
</Show>
</span>
);
}
12 changes: 10 additions & 2 deletions packages/components/src/components/icon/model.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,9 @@
import { GlobalProps, GlobalState, IconProps } from '../../shared/model';
import {
GlobalProps,
GlobalState,
IconProps,
TextProps
} from '../../shared/model';

export const IconVariantList = ['default', 'inverted', 'filled'] as const;
export type IconVariantType = (typeof IconVariantList)[number];
@@ -11,7 +16,10 @@ export type DBIconDefaultProps = {
weight?: IconWeightType;
};

export type DBIconProps = DBIconDefaultProps & GlobalProps & IconProps;
export type DBIconProps = DBIconDefaultProps &
GlobalProps &
IconProps &
TextProps;

export type DBIconDefaultState = {};

11 changes: 7 additions & 4 deletions packages/components/src/components/infotext/infotext.lite.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { useMetadata, useRef, useStore } from '@builder.io/mitosis';
import { Show, useMetadata, useRef, useStore } from '@builder.io/mitosis';
import { DBInfotextProps, DBInfotextState } from './model';
import { cls } from '../../utils';
import { cls, getHideIcon } from '../../utils';

useMetadata({});

@@ -18,8 +18,11 @@ export default function DBInfotext(props: DBInfotextProps) {
class={cls('db-infotext', props.className)}
data-icon={props.icon}
data-semantic={props.semantic}
data-size={props.size}>
{props.children}
data-size={props.size}
data-hide-icon-after={getHideIcon(props.showIcon ?? true)}>
<Show when={props.text} else={props.children}>
{props.text}
</Show>
</span>
);
}
8 changes: 6 additions & 2 deletions packages/components/src/components/infotext/model.ts
Original file line number Diff line number Diff line change
@@ -3,7 +3,9 @@ import {
GlobalState,
IconProps,
SemanticProps,
SizeProps
ShowIconProps,
SizeProps,
TextProps
} from '../../shared/model';

export type DBInfotextDefaultProps = {};
@@ -12,7 +14,9 @@ export type DBInfotextProps = DBInfotextDefaultProps &
GlobalProps &
SemanticProps &
IconProps &
SizeProps;
SizeProps &
ShowIconProps &
TextProps;

export type DBInfotextDefaultState = {};

20 changes: 16 additions & 4 deletions packages/components/src/components/input/input.lite.tsx
Original file line number Diff line number Diff line change
@@ -8,7 +8,14 @@ import {
useStore,
useTarget
} from '@builder.io/mitosis';
import { cls, delay, hasVoiceOver, isArrayOfStrings, uuid } from '../../utils';
import {
cls,
delay,
getHideIcon,
hasVoiceOver,
isArrayOfStrings,
uuid
} from '../../utils';
import { DBInputProps, DBInputState } from './model';
import {
DEFAULT_DATALIST_ID_SUFFIX,
@@ -27,7 +34,10 @@ import {
ValueLabelType
} from '../../shared/model';
import DBInfotext from '../infotext/infotext.lite';
import { handleFrameworkEvent } from '../../utils/form-components';
import {
handleFrameworkEvent,
messageVisible
} from '../../utils/form-components';

useMetadata({});

@@ -161,8 +171,10 @@ export default function DBInput(props: DBInputProps) {
<div
class={cls('db-input', props.className)}
data-variant={props.variant}
data-hide-icon={getHideIcon(props.showIcon)}
data-icon={props.icon}
data-icon-after={props.iconAfter}>
data-icon-after={props.iconAfter}
data-hide-icon-after={getHideIcon(props.showIcon)}>
<label htmlFor={state._id}>{props.label ?? DEFAULT_LABEL}</label>
<input
aria-invalid={props.customValidity === 'invalid'}
@@ -217,7 +229,7 @@ export default function DBInput(props: DBInputProps) {
</datalist>
</Show>
{props.children}
<Show when={props.message}>
<Show when={messageVisible(props.message, props.showMessage)}>
<DBInfotext
size="small"
icon={props.messageIcon}
Loading

Unchanged files with check annotations Beta

waitUntil: 'domcontentloaded'
});
await fn(page);
await expect(page).toHaveScreenshot([name, 'patternhub.png']);

Check failure on line 15 in showcases/patternhub/tests/default.spec.ts

GitHub Actions / test-showcase-patternhub / 🧪🎭 - patternhub:1/6

[chromium] › default.spec.ts:10:2 › brand › properties should match screenshot

1) [chromium] › default.spec.ts:10:2 › brand › properties should match screenshot ──────────────── Error: expect(page).toHaveScreenshot(expected) 427 pixels (ratio 0.01 of all image pixels) are different. Expected: /__w/mono/mono/__snapshots__/brand/patternhub/brand-properties-should-match-screenshot.png Received: /__w/mono/mono/showcases/patternhub/test-results/default-brand-properties-should-match-screenshot-chromium/brand/patternhub-actual.png Diff: /__w/mono/mono/showcases/patternhub/test-results/default-brand-properties-should-match-screenshot-chromium/brand/patternhub-diff.png Call log: - expect.toHaveScreenshot(brand/patternhub.png) with timeout 30000ms - verifying given screenshot expectation - taking page screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - 427 pixels (ratio 0.01 of all image pixels) are different. - waiting 100ms before taking screenshot - taking page screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - captured a stable screenshot - 427 pixels (ratio 0.01 of all image pixels) are different. 13 | }); 14 | await fn(page); > 15 | await expect(page).toHaveScreenshot([name, 'patternhub.png']); | ^ 16 | }); 17 | }; 18 | at /__w/mono/mono/showcases/patternhub/tests/default.spec.ts:15:22

Check failure on line 15 in showcases/patternhub/tests/default.spec.ts

GitHub Actions / test-showcase-patternhub / 🧪🎭 - patternhub:1/6

[chromium] › default.spec.ts:10:2 › brand › properties should match screenshot

1) [chromium] › default.spec.ts:10:2 › brand › properties should match screenshot ──────────────── Retry #1 ─────────────────────────────────────────────────────────────────────────────────────── Error: expect(page).toHaveScreenshot(expected) 427 pixels (ratio 0.01 of all image pixels) are different. Expected: /__w/mono/mono/__snapshots__/brand/patternhub/brand-properties-should-match-screenshot.png Received: /__w/mono/mono/showcases/patternhub/test-results/default-brand-properties-should-match-screenshot-chromium-retry1/brand/patternhub-actual.png Diff: /__w/mono/mono/showcases/patternhub/test-results/default-brand-properties-should-match-screenshot-chromium-retry1/brand/patternhub-diff.png Call log: - expect.toHaveScreenshot(brand/patternhub.png) with timeout 30000ms - verifying given screenshot expectation - taking page screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - 427 pixels (ratio 0.01 of all image pixels) are different. - waiting 100ms before taking screenshot - taking page screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - captured a stable screenshot - 427 pixels (ratio 0.01 of all image pixels) are different. 13 | }); 14 | await fn(page); > 15 | await expect(page).toHaveScreenshot([name, 'patternhub.png']); | ^ 16 | }); 17 | }; 18 | at /__w/mono/mono/showcases/patternhub/tests/default.spec.ts:15:22
});
};