diff --git a/.changeset/tasty-mangos-sin.md b/.changeset/tasty-mangos-sin.md new file mode 100644 index 000000000..c6fb4a3fa --- /dev/null +++ b/.changeset/tasty-mangos-sin.md @@ -0,0 +1,5 @@ +--- +"@cube-dev/ui-kit": patch +--- + +Add `size` prop for Label with `small` and `medium` (default) values. diff --git a/src/components/form/FieldWrapper/FieldWrapper.stories.tsx b/src/components/form/FieldWrapper/FieldWrapper.stories.tsx index 6a47e67de..f0498635c 100644 --- a/src/components/form/FieldWrapper/FieldWrapper.stories.tsx +++ b/src/components/form/FieldWrapper/FieldWrapper.stories.tsx @@ -39,6 +39,11 @@ const Template: StoryFn = (args) => ( export const Default = Template.bind({}); +export const Small = Template.bind({}); +Small.args = { + labelProps: { size: 'small' }, +}; + export const WithTooltip = Template.bind({}); WithTooltip.args = { tooltip: 'Long description', diff --git a/src/components/form/Label.tsx b/src/components/form/Label.tsx index ef35cc2b5..94cb85458 100644 --- a/src/components/form/Label.tsx +++ b/src/components/form/Label.tsx @@ -59,7 +59,10 @@ export const INLINE_LABEL_STYLES: Styles = { export const LABEL_STYLES: Styles = { display: 'block', - preset: 't3m', + preset: { + '': 't3m', + '[data-size="small"]': 't4', + }, color: { '': '#dark', invalid: '#danger-text', @@ -86,6 +89,7 @@ export interface CubeLabelProps extends BaseProps, ContainerStyleProps { htmlFor?: string; for?: string; validationState?: ValidationState; + size?: 'medium' | 'small'; } function Label(props: CubeLabelProps, ref) { @@ -102,6 +106,7 @@ function Label(props: CubeLabelProps, ref) { htmlFor, isDisabled, validationState, + size = 'medium', for: labelFor, ...otherProps } = props; @@ -132,6 +137,7 @@ function Label(props: CubeLabelProps, ref) { ref={domRef} styles={styles} htmlFor={labelFor || htmlFor} + data-size={size} mods={{ side: labelPosition === 'side', disabled: isDisabled,