From 643c3d7af02d74861b42ae3e8f37eff8b77a5fc9 Mon Sep 17 00:00:00 2001 From: Martin Adamko Date: Sat, 9 Sep 2023 08:02:58 +0200 Subject: [PATCH 1/6] chore(ui): Remove unused imports --- packages/ui/src/components/ActionableBox/ActionableBox.tsx | 2 +- packages/ui/src/components/Typography/Text.tsx | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/ui/src/components/ActionableBox/ActionableBox.tsx b/packages/ui/src/components/ActionableBox/ActionableBox.tsx index f477a57f24..76ae1d655d 100644 --- a/packages/ui/src/components/ActionableBox/ActionableBox.tsx +++ b/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' diff --git a/packages/ui/src/components/Typography/Text.tsx b/packages/ui/src/components/Typography/Text.tsx index c85b80f013..f045d8d30d 100644 --- a/packages/ui/src/components/Typography/Text.tsx +++ b/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 extends ComponentClassNameProps { children?: ReactNode From b51bd9b4194ca10d1dc324346fba026f20350763 Mon Sep 17 00:00:00 2001 From: Martin Adamko Date: Thu, 7 Sep 2023 08:47:38 +0200 Subject: [PATCH 2/6] chore(admin-sandbox): Remove unused import --- packages/admin-sandbox/admin/pages/fieldContainers.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/admin-sandbox/admin/pages/fieldContainers.tsx b/packages/admin-sandbox/admin/pages/fieldContainers.tsx index 08abb1529a..de7902bb0f 100644 --- a/packages/admin-sandbox/admin/pages/fieldContainers.tsx +++ b/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' From f1acc57d38192a2640b5dd9db681f9937093a1c7 Mon Sep 17 00:00:00 2001 From: Martin Adamko Date: Tue, 12 Sep 2023 10:03:21 +0200 Subject: [PATCH 3/6] fix(ui): Deprecate state classes (e.g. `:hover`) This introduces `Button.accent` prop to set button "accent" allowing it to blend with content and apply theming only for hover/active/focus states. --- .../admin-sandbox/admin/pages/buttons.tsx | 25 -- .../admin/src/components/Auto/AutoGrid.tsx | 2 +- .../helpers/DeleteEntityButton.tsx | 19 +- .../ui/src/components/Forms/Button/Button.css | 314 ++++++++++++------ .../ui/src/components/Forms/Button/Button.tsx | 14 +- .../ui/src/components/Forms/Button/Types.ts | 3 +- packages/ui/src/styles/schemes.css | 212 ++++++++---- .../utilities/src/class-name/constants.ts | 19 +- .../src/class-name/filterThemedClassName.ts | 2 + .../src/class-name/themeClassName.ts | 23 +- 10 files changed, 388 insertions(+), 245 deletions(-) diff --git a/packages/admin-sandbox/admin/pages/buttons.tsx b/packages/admin-sandbox/admin/pages/buttons.tsx index cb19147d90..6a55ad8454 100644 --- a/packages/admin-sandbox/admin/pages/buttons.tsx +++ b/packages/admin-sandbox/admin/pages/buttons.tsx @@ -3,15 +3,8 @@ import { ArrowLeftIcon, ArrowRightIcon } from 'lucide-react' import { Fragment, useState } from 'react' import { SlotSources } from '../components/Slots' -const options = [ - { value: 'small', label: 'small' }, - { value: 'medium', label: 'medium' }, - { value: 'large', label: 'large' }, -] - export default () => { const [size, setSize] = useState<'small' | 'medium' | 'large'>('medium') - const [v, setV] = useState(2) return ( <> @@ -52,24 +45,6 @@ export default () => { Lorem ipsum - {/*
- -
Default
- -
Elevated
-
Default
-
Go
-
Default
-
+
-
-
-
-
-
- - data-Lorem ipsum -
*/} -
diff --git a/packages/admin/src/components/Auto/AutoGrid.tsx b/packages/admin/src/components/Auto/AutoGrid.tsx index 54f9558c25..ba387b2957 100644 --- a/packages/admin/src/components/Auto/AutoGrid.tsx +++ b/packages/admin/src/components/Auto/AutoGrid.tsx @@ -42,7 +42,7 @@ const createDataGridColumns = ( {createEditLinkTarget && ( - + edit )} diff --git a/packages/admin/src/components/bindingFacade/collections/helpers/DeleteEntityButton.tsx b/packages/admin/src/components/bindingFacade/collections/helpers/DeleteEntityButton.tsx index 7d4ebbf363..5a75803579 100644 --- a/packages/admin/src/components/bindingFacade/collections/helpers/DeleteEntityButton.tsx +++ b/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 (