diff --git a/.changeset/pretty-goats-run.md b/.changeset/pretty-goats-run.md new file mode 100644 index 000000000..6a2cd1eb1 --- /dev/null +++ b/.changeset/pretty-goats-run.md @@ -0,0 +1,5 @@ +--- +'@cube-dev/ui-kit': minor +--- + +Always wrap Switch in a Field. diff --git a/.changeset/thick-horses-greet.md b/.changeset/thick-horses-greet.md new file mode 100644 index 000000000..77e51d4e6 --- /dev/null +++ b/.changeset/thick-horses-greet.md @@ -0,0 +1,5 @@ +--- +'@cube-dev/ui-kit': minor +--- + +Always wrap Checkbox in a Field except checkbox group case. diff --git a/src/components/fields/Checkbox/Checkbox.stories.tsx b/src/components/fields/Checkbox/Checkbox.stories.tsx index 5c313d087..4da36f119 100644 --- a/src/components/fields/Checkbox/Checkbox.stories.tsx +++ b/src/components/fields/Checkbox/Checkbox.stories.tsx @@ -21,30 +21,33 @@ export default { }, }; -const Template = (props) => ( - - console.log('onChange event', query)} - /> - console.log('onChange event', query)} - /> - -); +const Template = (props) => { + return ( + + console.log('onChange event', query)} + /> + console.log('onChange event', query)} + /> + + ); +}; export const Default = Template.bind({}); Default.args = { children: 'Checkbox' }; -export const WithoutValue = Template.bind({}); -WithoutValue.args = { - label: '', -}; +export const WithLabel = Template.bind({}); +WithLabel.args = { label: 'Checkbox' }; + +export const WithoutLabel = Template.bind({}); +WithoutLabel.args = {}; export const Intermediate = Template.bind({}); Intermediate.args = { @@ -54,11 +57,11 @@ Intermediate.args = { export const Disabled = Template.bind({}); Disabled.args = { isDisabled: true, - label: 'Checkbox', + children: 'Checkbox', }; export const Invalid = Template.bind({}); Invalid.args = { validationState: 'invalid', - label: 'Checkbox', + children: 'Checkbox', }; diff --git a/src/components/fields/Checkbox/Checkbox.tsx b/src/components/fields/Checkbox/Checkbox.tsx index 97251b678..0dbc32eca 100644 --- a/src/components/fields/Checkbox/Checkbox.tsx +++ b/src/components/fields/Checkbox/Checkbox.tsx @@ -90,7 +90,7 @@ const CheckboxElement = tasty({ styles: { display: 'grid', placeItems: 'center', - radius: '.25x', + radius: '.5r', fill: { '': '#white', 'checked | indeterminate': '#purple-text', @@ -165,10 +165,10 @@ function Checkbox( labelStyles = useMemo( () => ({ - ...(insideForm ? LABEL_STYLES : INLINE_LABEL_STYLES), + ...(!groupState ? LABEL_STYLES : INLINE_LABEL_STYLES), ...labelStyles, }), - [insideForm, labelStyles], + [groupState, labelStyles], ); let { isFocused, focusProps } = useFocus({ isDisabled }, true); @@ -234,12 +234,8 @@ function Checkbox( 'inside-form': insideForm, }; - const checkboxField = ( - + const checkbox = ( + <> {markIcon} + + ); + + const checkboxField = ( + + {checkbox} {children && {children}} ); - if (insideForm && !groupState) { + if (!groupState) { return wrapWithField(checkboxField, domRef, { ...props, children: null, @@ -264,15 +266,14 @@ function Checkbox( return ( - {checkboxField} - {label ? ( + {checkbox} + {label ?? children ? ( - {label} + {label ?? children} ) : null} diff --git a/src/components/fields/Switch/Switch.stories.tsx b/src/components/fields/Switch/Switch.stories.tsx index 643c909f4..8afc6aef4 100644 --- a/src/components/fields/Switch/Switch.stories.tsx +++ b/src/components/fields/Switch/Switch.stories.tsx @@ -34,21 +34,37 @@ const Template = (args) => ( export const Default = Template.bind({}); Default.args = { + children: 'Switch', +}; + +export const WithLabel = Template.bind({}); +WithLabel.args = { label: 'Switch', }; export const Small = Template.bind({}); Small.args = { - label: 'Switch', + children: 'Switch', size: 'small', }; export const WithoutLabel = Template.bind({}); -WithoutLabel.args = { - label: '', -}; +WithoutLabel.args = {}; export const Disabled = Template.bind({}); Disabled.args = { + children: 'Switch', isDisabled: true, }; + +export const Invalid = Template.bind({}); +Invalid.args = { + children: 'Switch', + validationState: 'invalid', +}; + +export const Loading = Template.bind({}); +Loading.args = { + children: 'Switch', + isLoading: true, +}; diff --git a/src/components/fields/Switch/Switch.tsx b/src/components/fields/Switch/Switch.tsx index 66de6c6cc..0c4e07317 100644 --- a/src/components/fields/Switch/Switch.tsx +++ b/src/components/fields/Switch/Switch.tsx @@ -1,4 +1,4 @@ -import { forwardRef, useMemo, useRef } from 'react'; +import { forwardRef, useRef } from 'react'; import { useFocusableRef } from '@react-spectrum/utils'; import { useSwitch, useHover, AriaSwitchProps } from 'react-aria'; import { useToggleState } from 'react-stately'; @@ -8,9 +8,7 @@ import { BaseProps, BLOCK_STYLES, BlockStyleProps, - Element, extractStyles, - filterBaseProps, OUTER_STYLES, OuterStyleProps, Styles, @@ -25,13 +23,7 @@ import { castNullableIsSelected, WithNullableSelected, } from '../../../utils/react/nullableValue'; -import { - useFieldProps, - useFormProps, - wrapWithField, - INLINE_LABEL_STYLES, - LABEL_STYLES, -} from '../../form'; +import { useFieldProps, useFormProps, wrapWithField } from '../../form'; import { LoadingIcon } from '../../../icons'; const SwitchWrapperElement = tasty({ @@ -49,23 +41,6 @@ const SwitchWrapperElement = tasty({ }, }); -const SwitchLabelElement = tasty({ - as: 'label', - qa: 'SwitchLabel', - styles: { - position: 'relative', - display: 'flex', - placeItems: 'center', - gap: '1x', - flow: 'row', - preset: 'input', - width: 'min-content', - cursor: 'pointer', - verticalAlign: 'baseline', - color: '#dark-02', - }, -}); - const SwitchElement = tasty({ qa: 'Switch', styles: { @@ -94,6 +69,10 @@ const SwitchElement = tasty({ }, transition: 'theme', cursor: 'pointer', + shadow: { + '': '0 0 0 0 #clear', + invalid: '0 0 0 1bw #white, 0 0 0 1ow #danger', + }, Thumb: { position: 'absolute', @@ -152,7 +131,6 @@ function Switch(props: WithNullableSelected, ref) { isDisabled = false, children, label, - labelProps, labelStyles, insideForm, isLoading, @@ -160,21 +138,12 @@ function Switch(props: WithNullableSelected, ref) { inputStyles, validationState, size = 'large', - ...otherProps } = props; let styles = extractStyles(props, OUTER_STYLES); inputStyles = extractStyles(props, BLOCK_STYLES, inputStyles); - labelStyles = useMemo( - () => ({ - ...(insideForm ? LABEL_STYLES : INLINE_LABEL_STYLES), - ...labelStyles, - }), - [insideForm, labelStyles], - ); - let { isFocused, focusProps } = useFocus({ isDisabled }, true); let { hoverProps, isHovered } = useHover({ isDisabled }); @@ -205,7 +174,7 @@ function Switch(props: WithNullableSelected, ref) { }; const switchField = ( - + , ref) {