Merge pull request #2762 from db-ui/2698-improve-performance-of-has-c…

…ss-selector refactor: added a relevant selector part
db-ui · Jun 24, 2024 · ed4b798 · ed4b798
2 parents d71e4e3 + 5b211f4
commit ed4b798
Show file tree

Hide file tree

Showing 9 changed files with 87 additions and 40 deletions.
diff --git a/packages/components/src/components/badge/badge.lite.tsx b/packages/components/src/components/badge/badge.lite.tsx
@@ -1,14 +1,45 @@
-import { useMetadata, useRef, useStore } from '@builder.io/mitosis';
+import {
+	onMount,
+	onUpdate,
+	Show,
+	useMetadata,
+	useRef,
+	useStore
+} from '@builder.io/mitosis';
 import { DBBadgeProps, DBBadgeState } from './model';
 import { cls } from '../../utils';
+import { DEFAULT_LABEL } from '../../shared/constants';
 
 useMetadata({
 	isAttachedToShadowDom: true
 });
 
 export default function DBBadge(props: DBBadgeProps) {
 	const ref = useRef<HTMLSpanElement>(null);
-	const state = useStore<DBBadgeState>({});
+	const state = useStore<DBBadgeState>({
+		initialized: false
+	});
+
+	onMount(() => {
+		state.initialized = true;
+	});
+
+	onUpdate(() => {
+		if (ref && state.initialized) {
+			if (props.placement?.startsWith('corner')) {
+				let parent = ref.parentElement;
+
+				if (parent && parent.localName.includes('badge')) {
+					// Angular workaround
+					parent = parent.parentElement;
+				}
+
+				if (parent) {
+					parent.setAttribute('data-has-badge', 'true');
+				}
+			}
+		}
+	}, [ref, state.initialized]);
 
 	return (
 		<span
@@ -18,7 +49,11 @@ export default function DBBadge(props: DBBadgeProps) {
 			data-semantic={props.semantic}
 			data-size={props.size}
 			data-emphasis={props.emphasis}
-			data-placement={props.placement}>
+			data-placement={props.placement}
+			data-label={
+				props.placement?.startsWith('corner') &&
+				(props.label ?? DEFAULT_LABEL)
+			}>
 			{props.children}
 		</span>
 	);

diff --git a/packages/components/src/components/badge/badge.scss b/packages/components/src/components/badge/badge.scss
@@ -43,18 +43,11 @@
 	@extend %default-button;
 
 	@include tag-components.get-tag-colors();
-	border-radius: 42px; // extreme radius
+	border-radius: variables.$db-border-radius-full;
 	padding-inline: variables.$db-spacing-fixed-2xs;
 	block-size: fit-content;
 	inline-size: fit-content;
 
-	&:empty,
-	> span:empty {
-		block-size: var(--badge-size);
-		inline-size: var(--badge-size);
-		padding: 0;
-	}
-
 	&:has(.db-icon) {
 		padding: variables.$db-spacing-fixed-3xs;
 	}
@@ -69,11 +62,6 @@
 		@extend %db-overwrite-font-size-sm;
 		padding-inline: variables.$db-spacing-fixed-xs;
 
-		&:empty,
-		> span:empty {
-			padding: 0;
-		}
-
 		&:has(.db-icon) {
 			padding: variables.$db-spacing-fixed-2xs;
 		}
@@ -84,13 +72,28 @@
 		}
 	}
 
+	&:empty,
+	> span:empty {
+		block-size: var(--badge-size);
+		inline-size: var(--badge-size);
+		padding: 0;
+	}
+
 	&[data-placement^="corner"] {
 		@extend %absolute-badge;
+
+		&[data-label] {
+			&::before {
+				content: attr(data-label);
+				position: fixed;
+				font-size: 0;
+			}
+		}
 	}
 }
 
 // Global styles
 
-:has(> .db-badge[data-placement^="corner"]) {
+[data-has-badge="true"] {
 	position: relative;
 }
diff --git a/packages/components/src/components/badge/model.ts b/packages/components/src/components/badge/model.ts
@@ -3,7 +3,8 @@ import {
 	EmphasisProps,
 	GlobalProps,
 	GlobalState,
-	SizeProps
+	SizeProps,
+	InitializedState
 } from '../../shared/model';
 
 export const BadgePlacementList = [
@@ -22,6 +23,11 @@ export interface DBBadgeDefaultProps {
 	 * The `placement` attributes `corner-*` values change the position to absolute and adds a transform based on the placement.
 	 */
 	placement?: BadgePlacementType;
+
+	/**
+	 * Describes the badge for a11y if you use placement attribute with `corner-*`
+	 */
+	label?: string;
 }
 
 export type DBBadgeProps = DBBadgeDefaultProps &
@@ -32,4 +38,4 @@ export type DBBadgeProps = DBBadgeDefaultProps &
 
 export interface DBBadgeDefaultState {}
 
-export type DBBadgeState = DBBadgeDefaultState & GlobalState;
+export type DBBadgeState = DBBadgeDefaultState & GlobalState & InitializedState;
diff --git a/packages/components/src/components/tooltip/tooltip.lite.tsx b/packages/components/src/components/tooltip/tooltip.lite.tsx
@@ -6,8 +6,9 @@ import {
 	useStore
 } from '@builder.io/mitosis';
 import { DBTooltipProps, DBTooltipState } from './model';
-import { cls, handleDataOutside } from '../../utils';
+import { cls, handleDataOutside, uuid } from '../../utils';
 import { ClickEvent } from '../../shared/model';
+import { DEFAULT_ID } from '../../shared/constants';
 
 useMetadata({
 	isAttachedToShadowDom: true
@@ -17,6 +18,7 @@ export default function DBTooltip(props: DBTooltipProps) {
 	const ref = useRef<HTMLDivElement>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBTooltipState>({
+		_id: DEFAULT_ID,
 		initialized: false,
 		handleClick: (event: ClickEvent<HTMLElement>) => {
 			event.stopPropagation();
@@ -27,18 +29,27 @@ export default function DBTooltip(props: DBTooltipProps) {
 	});
 
 	onMount(() => {
+		state._id = props.id || 'tooltip-' + uuid();
 		state.initialized = true;
 	});
 
 	onUpdate(() => {
 		if (ref && state.initialized) {
-			const parent = ref.parentElement;
+			let parent = ref.parentElement;
+
+			if (parent && parent.localName.includes('tooltip')) {
+				// Angular workaround
+				parent = parent.parentElement;
+			}
+
 			if (parent) {
 				['mouseenter', 'focus'].forEach((event) => {
 					parent.addEventListener(event, () =>
 						state.handleAutoPlacement()
 					);
 				});
+				parent.setAttribute('data-has-tooltip', 'true');
+				parent.setAttribute('aria-describedby', state._id);
 			}
 
 			state.initialized = false;
@@ -53,7 +64,7 @@ export default function DBTooltip(props: DBTooltipProps) {
 			role="tooltip"
 			ref={ref}
 			className={cls('db-tooltip', props.className)}
-			id={props.id}
+			id={state._id}
 			data-emphasis={props.emphasis}
 			data-animation={props.animation}
 			data-delay={props.delay}

diff --git a/packages/components/src/components/tooltip/tooltip.scss b/packages/components/src/components/tooltip/tooltip.scss
@@ -112,10 +112,7 @@ $tooltip-arrow-shadow-size: variables.$db-sizing-2xs;
 // Global styles
 
 @mixin show-popover($state) {
-	:has(
-			> :is(db-tooltip, dbtooltip) > .db-tooltip:not([data-open]),
-			> .db-tooltip:not([data-open])
-		) {
+	[data-has-tooltip="true"] {
 		&:#{$state} {
 			.db-tooltip:first-of-type {
 				@extend %show-popover;
@@ -124,7 +121,7 @@ $tooltip-arrow-shadow-size: variables.$db-sizing-2xs;
 	}
 }
 
-:has(> db-tooltip, > dbtooltip, > .db-tooltip) {
+[data-has-tooltip="true"] {
 	position: relative;
 }
 

diff --git a/scripts/dev.js b/scripts/dev.js
@@ -69,8 +69,7 @@ inquirer
 			return;
 		}
 
-		// Let startCommand = 'npm-run-all -p start:foundations dev:sass';
-		let startCommand = 'npm run start:foundations & npm run dev:sass';
+		let startCommand = 'npm-run-all -p start:foundations dev:sass';
 
 		const currentAnswers = answers?.frameworks;
 
@@ -80,12 +79,12 @@ inquirer
 			);
 
 			if (isAnswerSelected) {
-				startCommand += ` & npm run dev:${framework}-components`;
+				startCommand += ` dev:${framework}-components`;
 			}
 		}
 
 		for (const currentAnswer of currentAnswers) {
-			startCommand += ` & npm run start-showcase:${currentAnswer} --if-present`;
+			startCommand += ` start-showcase:${currentAnswer}`;
 		}
 
 		// TODO: Handle child process better

diff --git a/showcases/angular-showcase/src/app/components/tooltip/tooltip.component.html b/showcases/angular-showcase/src/app/components/tooltip/tooltip.component.html
@@ -10,7 +10,7 @@
 		let-exampleIndex="exampleIndex"
 		let-variantIndex="variantIndex"
 	>
-		<db-button [describedbyid]="exampleProps.id">
+		<db-button>
 			{{ exampleName }}
 			<db-tooltip
 				[width]="exampleProps.width"
@@ -19,7 +19,6 @@
 				[animation]="exampleProps.animation"
 				[delay]="exampleProps.delay"
 				[variant]="exampleProps.variant"
-				[id]="exampleProps.id"
 				>{{ exampleProps.content }}</db-tooltip
 			>
 		</db-button>

diff --git a/showcases/react-showcase/src/components/tooltip/index.tsx b/showcases/react-showcase/src/components/tooltip/index.tsx
@@ -13,19 +13,17 @@ const getTooltip = ({
 	delay,
 	content,
 	animation,
-	variant,
-	id
+	variant
 }: DBTooltipProps & { content: string }) => (
-	<DBButton describedbyid={id}>
+	<DBButton>
 		{children}
 		<DBTooltip
 			width={width}
 			emphasis={emphasis}
 			placement={placement}
 			animation={animation}
 			delay={delay}
-			variant={variant}
-			id={id}>
+			variant={variant}>
 			{content}
 		</DBTooltip>
 	</DBButton>

diff --git a/showcases/vue-showcase/src/components/tooltip/Tooltip.vue b/showcases/vue-showcase/src/components/tooltip/Tooltip.vue
@@ -9,7 +9,7 @@ import { DBButton, DBTooltip } from "../../../../../output/vue/src";
 		<template
 			#example="{ exampleIndex, variantIndex, exampleName, exampleProps }"
 		>
-			<DBButton :describedbyid="exampleProps.id">
+			<DBButton>
 				{{ exampleName }}
 				<DBTooltip
 					:width="exampleProps.width"
@@ -18,7 +18,6 @@ import { DBButton, DBTooltip } from "../../../../../output/vue/src";
 					:animation="exampleProps.animation"
 					:delay="exampleProps.delay"
 					:variant="exampleProps.variant"
-					:id="exampleProps.id"
 				>
 					{{ exampleProps.content }}
 				</DBTooltip>