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) {
{children ? {children} : null}
+ {isLoading ? (
+ <>
+ {label ? <> > : null}
+
+ >
+ ) : null}
);
- if (insideForm) {
- return wrapWithField(switchField, domRef, {
- ...props,
- children: null,
- labelStyles,
- inputStyles,
- styles,
- });
- }
-
- return (
-
- {switchField}
- {label ? (
-
- {label}
- {isLoading ? (
- <>
- {label ? <> > : null}
-
- >
- ) : null}
-
- ) : null}
-
- );
+ return wrapWithField(switchField, domRef, {
+ ...props,
+ children: null,
+ labelStyles,
+ inputStyles,
+ styles,
+ });
}
/**
diff --git a/src/components/form/Label.tsx b/src/components/form/Label.tsx
index 3c6cd51cc..ab273d45f 100644
--- a/src/components/form/Label.tsx
+++ b/src/components/form/Label.tsx
@@ -51,7 +51,7 @@ const INTL_MESSAGES = {
export const INLINE_LABEL_STYLES: Styles = {
preset: 't3',
color: {
- '': '#dark.85',
+ '': '#dark-02',
invalid: '#danger-text',
},
whiteSpace: 'nowrap',