fix(ui): State CSS classes

build/api/ui.api.md

@@ -276,6 +276,8 @@ export interface ButtonListProps extends ComponentClassNameProps, DeprecatedButt
 
 // @public (undocumented)
 export interface ButtonOwnProps extends DeprecatedButtonOwnProps, ComponentClassNameProps {
+    // (undocumented)
+    accent?: false | 'strong' | 'theme';
     // (undocumented)
     active?: boolean;
     // (undocumented)

packages/admin-sandbox/admin/pages/fieldContainers.tsx

@@ -1,5 +1,5 @@
 import { Button, ButtonGroup, Divider, FieldContainer, Label, Stack, TextInput } from '@contember/ui'
-import { AlignCenterHorizontalIcon, AlignCenterVerticalIcon, AlignEndHorizontalIcon, AlignEndVerticalIcon, AlignStartHorizontalIcon, AlignStartVerticalIcon, ColumnsIcon, RowsIcon, StretchHorizontalIcon } from 'lucide-react'
+import { AlignCenterVerticalIcon, AlignEndVerticalIcon, AlignStartVerticalIcon, ColumnsIcon, RowsIcon, StretchHorizontalIcon } from 'lucide-react'
 import { useState } from 'react'
 import { SlotSources } from '../components/Slots'
 

packages/admin/src/components/Auto/AutoGrid.tsx

@@ -42,7 +42,7 @@ const createDataGridColumns = (
 		<GenericCell key="action" shrunk>
 			<Stack horizontal>
 				{createEditLinkTarget && (
-					<LinkButton to={createEditLinkTarget(entityName)} distinction="seamless" size="small">
+					<LinkButton accent="strong" to={createEditLinkTarget(entityName)} distinction="seamless" size="small">
 						edit
 					</LinkButton>
 				)}

packages/admin/src/components/bindingFacade/collections/helpers/DeleteEntityButton.tsx

@@ -1,7 +1,5 @@
 import { EntityAccessor, useEntity, useMutationState } from '@contember/binding'
-import { useColorScheme } from '@contember/react-utils'
 import { Button, ButtonProps } from '@contember/ui'
-import { colorSchemeClassName, controlsThemeClassName, listClassName } from '@contember/utilities'
 import { Trash2Icon } from 'lucide-react'
 import { ReactNode, memo, useCallback } from 'react'
 import { usePersistWithFeedback } from '../../../ui'
@@ -24,22 +22,20 @@ export type DeleteEntityButtonProps =
  * @group Action buttons
  */
 export const DeleteEntityButton = memo((props: DeleteEntityButtonProps) => {
-	const { children, immediatePersist, className, ...rest } = props
+	const { children, immediatePersist, ...rest } = props
 	const parentEntity = useEntity()
 	const triggerPersist = usePersistWithFeedback()
 	const isMutating = useMutationState()
 	const onClick = useCallback(() => {
-		if (props.immediatePersist && !confirm('Really?')) {
+		if (immediatePersist && !confirm('Really?')) {
 			return
 		}
 		parentEntity.deleteEntity()
 
-		if (props.immediatePersist && triggerPersist) {
+		if (immediatePersist && triggerPersist) {
 			triggerPersist().catch(() => { })
 		}
-	}, [triggerPersist, props.immediatePersist, parentEntity])
-
-	const colorScheme = useColorScheme()
+	}, [triggerPersist, immediatePersist, parentEntity])
 
 	if (!(parentEntity instanceof EntityAccessor)) {
 		return null
@@ -48,15 +44,12 @@ export const DeleteEntityButton = memo((props: DeleteEntityButtonProps) => {
 	return (
 		<Button
 			square
+			accent="strong"
 			borderRadius="full"
 			distinction="seamless"
 			size="small"
 			{...rest}
-			className={listClassName([
-				controlsThemeClassName('danger', ':hover'),
-				colorSchemeClassName(colorScheme),
-				className,
-			])}
+			intent="danger"
 			disabled={isMutating || rest.disabled}
 			onClick={onClick}
 		>

packages/ui/src/components/ActionableBox/ActionableBox.tsx

@@ -1,7 +1,7 @@
 import { useClassNameFactory, useComposeRef } from '@contember/react-utils'
 import { ComponentClassNameProps, flatClassNameList } from '@contember/utilities'
 import { PencilIcon, Trash2Icon } from 'lucide-react'
-import { MouseEvent as ReactMouseEvent, ReactNode, memo, useCallback, useMemo, useRef, useState } from 'react'
+import { MouseEvent as ReactMouseEvent, ReactNode, memo, useMemo, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { HTMLDivElementProps } from '../../types'
 import { Box, BoxOwnProps } from '../Box'

packages/ui/src/components/Forms/Button/Button.tsx

@@ -1,7 +1,6 @@
 import { ColorSchemeContext, useClassNameFactory, useColorScheme } from '@contember/react-utils'
-import { colorSchemeClassName, contentThemeClassName, controlsThemeClassName, dataAttribute, deprecate, fallback } from '@contember/utilities'
+import { colorSchemeClassName, controlsThemeClassName, dataAttribute, deprecate, fallback, isDefined } from '@contember/utilities'
 import { createElement, forwardRef, memo } from 'react'
-import type { HTMLButtonElementProps } from '../../../types'
 import { Spinner } from '../../Spinner/Spinner'
 import { Text } from '../../Typography'
 import { AnchorButtonProps, BaseButtonProps, ButtonProps } from './Types'
@@ -89,6 +88,7 @@ Button.displayName = 'Interface.Button'
 
 export const BaseButton = memo(forwardRef<any, BaseButtonProps>(({
 	Component,
+	accent = 'theme',
 	active,
 	align,
 	bland,
@@ -130,7 +130,7 @@ export const BaseButton = memo(forwardRef<any, BaseButtonProps>(({
 	padding = fallback(padding, flow === 'generous' || flow === 'generousBlock', 'padding')
 
 	deprecate('1.3.0', typeof elevated !== 'boolean', '`elevate` prop', '`elevate` prop')
-	elevated = fallback(elevated, typeof elevation !== 'boolean', elevation === 'default' ? true : false)
+	elevated = fallback(elevated, elevation === 'default', true)
 
 	deprecate('1.3.0', justification !== undefined, '`justification` prop', '`justify` prop')
 	justify = fallback(justify, justification !== undefined, ({ default: 'center', justifyStart: 'start', justifyCenter: 'center', justifyEnd: 'end' } as const)[justification ?? 'default'])
@@ -146,17 +146,16 @@ export const BaseButton = memo(forwardRef<any, BaseButtonProps>(({
 		rest['tabIndex'] = -1
 	}
 
-	const themeIntent = !disabled ? intent : 'default'
 	const className = useClassNameFactory(componentClassName)
 	const colorScheme = useColorScheme()
 	const scheme = schemeProp ?? colorScheme
 
 	return createElement(Component, {
 		...rest,
+		'data-accent': dataAttribute(accent),
 		'data-active': dataAttribute(active),
 		'data-align': dataAttribute(align),
-		// TODO: deprecated since v1.3.0
-		'data-bland': dataAttribute(bland),
+		'data-bland': dataAttribute(bland), // TODO: deprecated since v1.3.0
 		'data-border-radius': dataAttribute(borderRadius),
 		'data-disabled': dataAttribute(disabled),
 		'data-display': dataAttribute(display),
@@ -172,8 +171,7 @@ export const BaseButton = memo(forwardRef<any, BaseButtonProps>(({
 		'data-square': dataAttribute(square),
 		disabled,
 		'className': className(null, [
-			contentThemeClassName(distinction === 'default' ? null : themeIntent),
-			controlsThemeClassName(themeIntent),
+			controlsThemeClassName(intent),
 			colorSchemeClassName(scheme),
 			classNameProp,
 		]),

packages/ui/src/components/Forms/Button/Types.ts

@@ -19,6 +19,7 @@ export interface AnchorBasedProps extends Omit<HTMLAnchorElementProps, 'ref' | '
 }
 
 export interface ButtonOwnProps extends DeprecatedButtonOwnProps, ComponentClassNameProps {
+	accent?: false | 'strong' | 'theme'
 	active?: boolean
 	align?: 'start' | 'center' | 'end' | 'stretch'
 	borderRadius?: Exclude<StackOwnProps['gap'], 'large' | 'larger'> | 'full'
@@ -88,7 +89,7 @@ export type ButtonGroupOrientation = Default | 'horizontal' | 'vertical'
 export type DeprecatedButtonDefault = Default
 /** @deprecated No alternative */
 export interface DeprecatedButtonOwnProps {
-	/** @deprecated Use `distinction` instead to suppress button visuals */
+	/** @deprecated Use `distinction`, `theme` or `accent={false}` props instead to suppress button visuals */
 	bland?: boolean
 	/** @deprecated Use `elevated` instead */
 	elevation?: ButtonElevation

packages/ui/src/components/Typography/Text.tsx

@@ -1,7 +1,6 @@
 import { useClassName } from '@contember/react-utils'
-import { ComponentClassNameProps, PolymorphicComponent, assert } from '@contember/utilities'
+import { ComponentClassNameProps, PolymorphicComponent } from '@contember/utilities'
 import { ReactNode, forwardRef, memo } from 'react'
-import { HTMLSpanElementProps } from '../../types'
 
 export interface TextOwnProps<Translate extends Function = Function> extends ComponentClassNameProps {
 	children?: ReactNode