From e4f28a2db078483c4730121552e3e8bdeb4c386e Mon Sep 17 00:00:00 2001 From: Cedric Dupuis Date: Thu, 27 Jan 2022 16:38:15 +0100 Subject: [PATCH 1/5] feat: TextField, allow react component label --- components/TextField/TextField.tsx | 35 ++++++++++++++++++++++++------ 1 file changed, 28 insertions(+), 7 deletions(-) diff --git a/components/TextField/TextField.tsx b/components/TextField/TextField.tsx index de936494..8a5b7c9a 100644 --- a/components/TextField/TextField.tsx +++ b/components/TextField/TextField.tsx @@ -13,10 +13,16 @@ import { } from '@radix-ui/react-icons'; // TYPES +export interface TextFieldLabelProps { + variant: 'red' | 'subtle' | 'contrast' | 'default' + disabled?: boolean + invalid?: boolean + htmlFor?: string +} export type TextFieldProps = InputProps & { type?: string; clearable?: boolean; - label?: string; + label?: string | ((TextFieldLabelProps) => JSX.Element); }; export type TextFieldVariants = InputVariants; @@ -60,7 +66,7 @@ const StyledCrossCircledIcon = styled(CrossCircledIcon, { export const TextField = React.forwardRef, TextFieldProps>( ( - { state, clearable, label, id, type, disabled, readOnly, onBlur, onFocus, css, ...props }, + { state, clearable, label: LabelOrComponent, id, type, disabled, readOnly, onBlur, onFocus, css, ...props }, forwardedRef ) => { const inputRef = React.useRef(null); @@ -85,6 +91,25 @@ export const TextField = React.forwardRef, TextFi return 'default'; }, [invalid, disabled, inputHasFocus]); + const LabelNode = React.useMemo( + () => { + if (LabelOrComponent === undefined || LabelOrComponent === null) { + return null; + } + if (typeof LabelOrComponent === 'string') { + return ( + + ); + } + return ( + + ); + }, + [LabelOrComponent, labelVariant, disabled, invalid, id], + ); + const isPasswordType = React.useMemo(() => type === 'password', [type]); const typeOrInnerType = React.useMemo(() => (isPasswordType ? innerType : type), [ @@ -154,11 +179,7 @@ export const TextField = React.forwardRef, TextFi return ( - {label && ( - - )} + {LabelNode} Date: Thu, 27 Jan 2022 17:23:38 +0100 Subject: [PATCH 2/5] feat: textField stories, add story for label component --- components/TextField/TextField.stories.tsx | 60 +++++++++++++++++++++- 1 file changed, 58 insertions(+), 2 deletions(-) diff --git a/components/TextField/TextField.stories.tsx b/components/TextField/TextField.stories.tsx index f1bb4078..a96e5f35 100644 --- a/components/TextField/TextField.stories.tsx +++ b/components/TextField/TextField.stories.tsx @@ -2,8 +2,12 @@ import React from 'react'; import { ComponentStory, ComponentMeta } from '@storybook/react'; import { Flex } from '../Flex'; +import { Label } from '../Label'; +import { Text } from '../Text'; +import { Popover, PopoverTrigger, PopoverContent } from '../Popover'; import { TextField, TextFieldProps, TextFieldVariants } from './TextField'; -import { MagnifyingGlassIcon } from '@radix-ui/react-icons'; +import { MagnifyingGlassIcon, InfoCircledIcon } from '@radix-ui/react-icons'; +import { styled } from '../../stitches.config'; import { modifyVariantsForStory } from '../../utils/modifyVariantsForStory'; import ignoreArgType from '../../utils/ignoreArgType'; @@ -97,4 +101,56 @@ DisplayClearable.args = { id: 'displayclearable', clearable: true, }; -ignoreArgType('id', DisplayClearable); \ No newline at end of file +ignoreArgType('id', DisplayClearable); + +export const LabelComponent: ComponentStory = ({ id, ...args }) => ( + + + + + + +) + +const StyledInfoCircledIcon = styled(InfoCircledIcon, { + ml: '$2', + '@hover': { + '&:hover': { + cursor: 'pointer' + } + } +}); + +const label = (props) => ( + +) + +LabelComponent.args = { + id: 'labelcomponent', + label: label, +} +ignoreArgType('id', LabelComponent); \ No newline at end of file From 13779f3af2afe85b4837daeed799cbc109867bcb Mon Sep 17 00:00:00 2001 From: Cedric Dupuis Date: Thu, 27 Jan 2022 17:25:04 +0100 Subject: [PATCH 3/5] refactor: Tooltip stories, cleanup obsolete imports --- components/Tooltip/Tooltip.stories.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/components/Tooltip/Tooltip.stories.tsx b/components/Tooltip/Tooltip.stories.tsx index 8fe7a74d..005480d1 100644 --- a/components/Tooltip/Tooltip.stories.tsx +++ b/components/Tooltip/Tooltip.stories.tsx @@ -6,10 +6,7 @@ import { modifyVariantsForStory } from '../../utils/modifyVariantsForStory'; import { Text } from '../Text'; import { Container } from '../Container'; import { Flex } from '../Flex'; -import { Button } from '../Button'; import { Box } from '../Box'; -import { Bubble } from '../Bubble'; -import { TextField } from '../TextField'; import { CrossCircledIcon, ExclamationTriangleIcon } from '@radix-ui/react-icons'; import { styled } from '../../stitches.config'; From 406b5723fd378d10f6921c10e6b18a5cd0962648 Mon Sep 17 00:00:00 2001 From: Cedric Dupuis Date: Thu, 27 Jan 2022 17:47:06 +0100 Subject: [PATCH 4/5] fix: TextFieldProps, typo --- components/TextField/TextField.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/TextField/TextField.tsx b/components/TextField/TextField.tsx index 8a5b7c9a..45f030e4 100644 --- a/components/TextField/TextField.tsx +++ b/components/TextField/TextField.tsx @@ -22,7 +22,7 @@ export interface TextFieldLabelProps { export type TextFieldProps = InputProps & { type?: string; clearable?: boolean; - label?: string | ((TextFieldLabelProps) => JSX.Element); + label?: string | ((props: TextFieldLabelProps) => JSX.Element); }; export type TextFieldVariants = InputVariants; From 31676cc64820550a7c8957e95f42de4e5e821533 Mon Sep 17 00:00:00 2001 From: Cedric Dupuis Date: Fri, 28 Jan 2022 14:46:11 +0100 Subject: [PATCH 5/5] fix: TextField label component story, align label and icon --- components/TextField/TextField.stories.tsx | 24 ++++++++++++---------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/components/TextField/TextField.stories.tsx b/components/TextField/TextField.stories.tsx index a96e5f35..8bacfbdb 100644 --- a/components/TextField/TextField.stories.tsx +++ b/components/TextField/TextField.stories.tsx @@ -135,17 +135,19 @@ const StyledInfoCircledIcon = styled(InfoCircledIcon, { const label = (props) => ( )