Skip to content

Commit

Permalink
fix(uniform): fix various styles
Browse files Browse the repository at this point in the history
  • Loading branch information
fighter3005 committed Oct 10, 2024
1 parent bd35112 commit 90f9e09
Show file tree
Hide file tree
Showing 10 changed files with 1,285 additions and 1,145 deletions.
61 changes: 54 additions & 7 deletions packages/uniform/src/CheckboxGroup/CheckboxGroup.tsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,37 @@
import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';

import { Controller } from 'react-hook-form';

import {
Checkbox,
CheckboxGroup as NextCheckboxGroup,
} from '@nextui-org/checkbox';

import { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';

import { slugify } from '../helpers';
import { useFormContext } from '../hooks';
import { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';
import { FieldValidationError } from '../partials/FieldValidationError';

export const checkboxGroupVariants = tv({
slots: {
base: 'group', // Needs group for group-data condition
errorMessage: 'text-tiny',
itemBase: '',
itemIcon: '',
itemLabel: 'text-sm',
itemWrapper: '',
// See NextUI styles for group-data condition, e.g.: https://github.com/nextui-org/nextui/blob/main/packages/core/theme/src/components/select.ts
label:
'text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:!text-danger',
wrapper: '',
},
});

type VariantProps = TVProps<typeof checkboxGroupVariants>;
type ClassName = TVClassName<typeof checkboxGroupVariants>;

export type CheckboxGroupOption = {
/** option label */
label?: React.ReactNode;
Expand All @@ -21,9 +43,9 @@ export type CheckboxGroupOption = {
testId?: string;
};

export interface CheckboxGroupProps {
export interface CheckboxGroupProps extends VariantProps {
/** CSS class name. ClassName: string | { buttons?: string | { base?: string; active?: string }; base?: string;} */
className?: string;
className?: ClassName;
/** label displayed above the Checkboxes */
label?: React.ReactNode;
/** Name the Field is registered on the form. */
Expand All @@ -50,6 +72,21 @@ const CheckboxGroup = ({
const { getFieldState, control } = useFormContext();
const { error, invalid, required, testId } = getFieldState(name, _testId);

const variants = checkboxGroupVariants();
const classNames = variantsToClassNames(variants, className, 'base');

const itemClassName = {
base: classNames.itemBase,
wrapper: classNames.itemWrapper,
icon: classNames.itemIcon,
label: classNames.itemLabel,
};
const itemGroupClassName = {
base: classNames.base,
wrapper: classNames.wrapper,
label: classNames.label,
};

return (
<Controller
control={control}
Expand All @@ -58,18 +95,26 @@ const CheckboxGroup = ({
render={({ field: { onChange, value, ref, onBlur } }) => {
return (
<NextCheckboxGroup
className={className}
name={name}
classNames={itemGroupClassName}
data-testid={testId}
errorMessage={error && <FieldValidationError error={error} />}
// See NextUI styles for group-data condition (data-invalid), e.g.: https://github.com/nextui-org/nextui/blob/main/packages/components/select/src/use-select.ts
data-invalid={invalid}
errorMessage={
error && (
<FieldValidationError
error={error}
className={classNames.errorMessage}
/>
)
}
isDisabled={disabled}
isInvalid={invalid}
isRequired={required}
label={
label && (
// eslint-disable-next-line jsx-a11y/label-has-associated-control
<label
className={`text-bold text-ellipsis text-small ${invalid ? 'text-danger' : 'text-foreground-500'}`}
>
<label>
{label}
<FieldCopyTestIdButton testId={testId} />
</label>
Expand All @@ -91,6 +136,8 @@ const CheckboxGroup = ({
{options?.map((option) => {
return (
<Checkbox
data-invalid={invalid}
classNames={itemClassName}
key={`index_${option.value}`}
isDisabled={disabled || option.disabled}
value={option?.value}
Expand Down
Loading

0 comments on commit 90f9e09

Please sign in to comment.