From d54f7f6487eb5b2f1736d6ac784529f4c040a309 Mon Sep 17 00:00:00 2001 From: Tigran Date: Thu, 4 Jul 2024 16:59:06 +0400 Subject: [PATCH] feat: add display names to all components --- figma-kit/src/components/alert-dialog/alert-dialog.tsx | 9 +++++++++ figma-kit/src/components/checkbox/checkbox.tsx | 6 ++++++ figma-kit/src/components/collapsible/collapsible.tsx | 4 ++++ figma-kit/src/components/context-menu/context-menu.tsx | 10 ++++++++++ figma-kit/src/components/dialog.base/dialog.base.tsx | 4 ++++ figma-kit/src/components/dialog/dialog.tsx | 6 ++++++ .../src/components/dropdown-menu/dropdown-menu.tsx | 10 ++++++++++ figma-kit/src/components/flex/flex.tsx | 2 ++ figma-kit/src/components/icon-button/icon-button.tsx | 2 ++ figma-kit/src/components/input/input.tsx | 2 ++ figma-kit/src/components/popover/popover.tsx | 5 +++++ figma-kit/src/components/radio-group/radio-group.tsx | 4 ++++ .../components/segmented-control/segmented-control.tsx | 4 ++++ figma-kit/src/components/select/select.tsx | 7 +++++++ figma-kit/src/components/slider/slider.tsx | 2 ++ figma-kit/src/components/switch/switch.tsx | 2 ++ figma-kit/src/components/tabs/tabs.tsx | 5 +++++ figma-kit/src/components/text/text.tsx | 8 ++++++++ figma-kit/src/components/textarea/textarea.tsx | 2 ++ figma-kit/src/components/tooltip/tooltip.tsx | 2 ++ .../src/components/value-field/value-field-base.tsx | 2 ++ .../components/value-field/value-field-elements.tsx | 4 ++++ 22 files changed, 102 insertions(+) diff --git a/figma-kit/src/components/alert-dialog/alert-dialog.tsx b/figma-kit/src/components/alert-dialog/alert-dialog.tsx index df30230..1521dca 100644 --- a/figma-kit/src/components/alert-dialog/alert-dialog.tsx +++ b/figma-kit/src/components/alert-dialog/alert-dialog.tsx @@ -121,6 +121,15 @@ const Action = React.forwardRef((props, ref) => { return ; }); +Trigger.displayName = 'AlertDialog.Trigger'; +Content.displayName = 'AlertDialog.Content'; +Overlay.displayName = 'AlertDialog.Overlay'; +Title.displayName = 'AlertDialog.Title'; +Description.displayName = 'AlertDialog.Description'; +Actions.displayName = 'AlertDialog.Actions'; +Cancel.displayName = 'AlertDialog.Cancel'; +Action.displayName = 'AlertDialog.Action'; + export type { RootProps, TriggerProps, diff --git a/figma-kit/src/components/checkbox/checkbox.tsx b/figma-kit/src/components/checkbox/checkbox.tsx index 4f459e3..4ef5869 100644 --- a/figma-kit/src/components/checkbox/checkbox.tsx +++ b/figma-kit/src/components/checkbox/checkbox.tsx @@ -108,5 +108,11 @@ function useIndeterminateState(indeterminate: boolean | undefined) { ); } +Root.displayName = 'Checkbox.Root'; +Input.displayName = 'Checkbox.Input'; +Indicator.displayName = 'Checkbox.Indicator'; +Label.displayName = 'Checkbox.Label'; +Description.displayName = 'Checkbox.Description'; + export type { CheckboxProps }; export { Root, Input, Label, Description }; diff --git a/figma-kit/src/components/collapsible/collapsible.tsx b/figma-kit/src/components/collapsible/collapsible.tsx index c7a0301..32903e4 100644 --- a/figma-kit/src/components/collapsible/collapsible.tsx +++ b/figma-kit/src/components/collapsible/collapsible.tsx @@ -35,5 +35,9 @@ const Content = React.forwardRef((props, ref) => { return ; }); +Root.displayName = 'Collapsible.Root'; +Trigger.displayName = 'Collapsible.Trigger'; +Content.displayName = 'Collapsible.Content'; + export type { RootProps, ContentProps, TriggerProps }; export { Root, Content, Trigger }; diff --git a/figma-kit/src/components/context-menu/context-menu.tsx b/figma-kit/src/components/context-menu/context-menu.tsx index 5143a6f..e69f920 100644 --- a/figma-kit/src/components/context-menu/context-menu.tsx +++ b/figma-kit/src/components/context-menu/context-menu.tsx @@ -124,6 +124,16 @@ const RadioItem = React.forwardRef((props, ref ); }); +Content.displayName = 'ContextMenu.Content'; +Item.displayName = 'ContextMenu.Item'; +Separator.displayName = 'ContextMenu.Separator'; +Label.displayName = 'ContextMenu.Label'; +Group.displayName = 'ContextMenu.Group'; +SubTrigger.displayName = 'ContextMenu.SubTrigger'; +SubContent.displayName = 'ContextMenu.SubContent'; +CheckboxItem.displayName = 'ContextMenu.CheckboxItem'; +RadioItem.displayName = 'ContextMenu.RadioItem'; + export type { RootProps, TriggerProps, diff --git a/figma-kit/src/components/dialog.base/dialog.base.tsx b/figma-kit/src/components/dialog.base/dialog.base.tsx index 171df44..9cc4633 100644 --- a/figma-kit/src/components/dialog.base/dialog.base.tsx +++ b/figma-kit/src/components/dialog.base/dialog.base.tsx @@ -44,5 +44,9 @@ const section = cva('fp-DialogBaseSection', { }, }); +Header.displayName = 'Dialog.Header'; +Section.displayName = 'Dialog.Section'; +Controls.displayName = 'Dialog.Controls'; + export { Header, Section, Controls }; export type { HeaderProps, SectionProps, ControlsProps }; diff --git a/figma-kit/src/components/dialog/dialog.tsx b/figma-kit/src/components/dialog/dialog.tsx index f75fea8..747d473 100644 --- a/figma-kit/src/components/dialog/dialog.tsx +++ b/figma-kit/src/components/dialog/dialog.tsx @@ -103,6 +103,12 @@ const Close = React.forwardRef((props, ref) => { ); }); +Trigger.displayName = 'Dialog.Trigger'; +Content.displayName = 'Dialog.Content'; +Overlay.displayName = 'Dialog.Overlay'; +Title.displayName = 'Dialog.Title'; +Close.displayName = 'Dialog.Close'; + export type { RootProps, TriggerProps, PortalProps, ContentProps, OverlayProps, TitleProps, CloseProps }; export { Root, Trigger, Portal, Content, Overlay, Title, Close }; export type { HeaderProps, SectionProps, ControlsProps } from '@components/dialog.base/'; diff --git a/figma-kit/src/components/dropdown-menu/dropdown-menu.tsx b/figma-kit/src/components/dropdown-menu/dropdown-menu.tsx index ae31d20..190a790 100644 --- a/figma-kit/src/components/dropdown-menu/dropdown-menu.tsx +++ b/figma-kit/src/components/dropdown-menu/dropdown-menu.tsx @@ -125,6 +125,16 @@ const RadioItem = React.forwardRef((props, ref ); }); +Content.displayName = 'DropdownMenu.Content'; +Item.displayName = 'DropdownMenu.Item'; +Separator.displayName = 'DropdownMenu.Separator'; +Group.displayName = 'DropdownMenu.Group'; +Label.displayName = 'DropdownMenu.Label'; +SubTrigger.displayName = 'DropdownMenu.SubTrigger'; +SubContent.displayName = 'DropdownMenu.SubContent'; +CheckboxItem.displayName = 'DropdownMenu.CheckboxItem'; +RadioItem.displayName = 'DropdownMenu.RadioItem'; + export type { RootProps, TriggerProps, diff --git a/figma-kit/src/components/flex/flex.tsx b/figma-kit/src/components/flex/flex.tsx index d9a9a71..71ceb12 100644 --- a/figma-kit/src/components/flex/flex.tsx +++ b/figma-kit/src/components/flex/flex.tsx @@ -77,5 +77,7 @@ const Flex = React.forwardRef((props, ref) => { ); }); +Flex.displayName = 'Flex'; + export type { FlexProps }; export { Flex }; diff --git a/figma-kit/src/components/icon-button/icon-button.tsx b/figma-kit/src/components/icon-button/icon-button.tsx index 9c1b96d..2a0b99e 100644 --- a/figma-kit/src/components/icon-button/icon-button.tsx +++ b/figma-kit/src/components/icon-button/icon-button.tsx @@ -50,5 +50,7 @@ const IconButton = React.forwardRef((props, return disableTooltip ? buttonElement : {buttonElement}; }); +IconButton.displayName = 'IconButton'; + export type { IconButtonProps }; export { IconButton }; diff --git a/figma-kit/src/components/input/input.tsx b/figma-kit/src/components/input/input.tsx index b4b5a10..3eb9c50 100644 --- a/figma-kit/src/components/input/input.tsx +++ b/figma-kit/src/components/input/input.tsx @@ -19,5 +19,7 @@ const Input = React.forwardRef((props, forwardedRef) = return ; }); +Input.displayName = 'Input'; + export type { InputProps }; export { Input }; diff --git a/figma-kit/src/components/popover/popover.tsx b/figma-kit/src/components/popover/popover.tsx index b16abf8..6918644 100644 --- a/figma-kit/src/components/popover/popover.tsx +++ b/figma-kit/src/components/popover/popover.tsx @@ -68,6 +68,11 @@ const Close = React.forwardRef((props, ref) => { ); }); +Trigger.displayName = 'Popover.Trigger'; +Content.displayName = 'Popover.Content'; +Title.displayName = 'Popover.Title'; +Close.displayName = 'Popover.Close'; + export type { RootProps, TriggerProps, PortalProps, ContentProps, TitleProps, CloseProps, AnchorProps }; export { Root, Trigger, Content, Portal, Title, Close, Anchor }; diff --git a/figma-kit/src/components/radio-group/radio-group.tsx b/figma-kit/src/components/radio-group/radio-group.tsx index 39b5200..6790846 100644 --- a/figma-kit/src/components/radio-group/radio-group.tsx +++ b/figma-kit/src/components/radio-group/radio-group.tsx @@ -55,5 +55,9 @@ const Label = React.forwardRef((props, ref) => { ); }); +Root.displayName = 'RadioGroup.Root'; +Item.displayName = 'RadioGroup.Item'; +Label.displayName = 'RadioGroup.Label'; + export type { RootProps, ItemProps, LabelProps }; export { Root, Item, Label }; diff --git a/figma-kit/src/components/segmented-control/segmented-control.tsx b/figma-kit/src/components/segmented-control/segmented-control.tsx index 4f809fc..2024060 100644 --- a/figma-kit/src/components/segmented-control/segmented-control.tsx +++ b/figma-kit/src/components/segmented-control/segmented-control.tsx @@ -52,5 +52,9 @@ const Text = React.forwardRef((props, ref) => { return ; }); +Root.displayName = 'SegmentedControl.Root'; +Item.displayName = 'SegmentedControl.Item'; +Text.displayName = 'SegmentedControl.Text'; + export type { RootProps, ItemProps, TextProps }; export { Root, Item, Text }; diff --git a/figma-kit/src/components/select/select.tsx b/figma-kit/src/components/select/select.tsx index 1c79dee..7c2bd1b 100644 --- a/figma-kit/src/components/select/select.tsx +++ b/figma-kit/src/components/select/select.tsx @@ -90,5 +90,12 @@ const Group = React.forwardRef((props, ref) => { return ; }); +Trigger.displayName = 'Select.Trigger'; +Content.displayName = 'Select.Content'; +Item.displayName = 'Select.Item'; +Separator.displayName = 'Select.Separator'; +Group.displayName = 'Select.Group'; +Label.displayName = 'Select.Label'; + export type { RootProps, TriggerProps, ContentProps, ItemProps, SeparatorProps, GroupProps, LabelProps }; export { Root, Trigger, Content, Item, Separator, Group, Label, Arrow }; diff --git a/figma-kit/src/components/slider/slider.tsx b/figma-kit/src/components/slider/slider.tsx index 786b415..a9c39f6 100644 --- a/figma-kit/src/components/slider/slider.tsx +++ b/figma-kit/src/components/slider/slider.tsx @@ -133,6 +133,8 @@ const Slider = React.forwardRef((props, forwardedRef ); }); +Slider.displayName = 'Slider'; + type HintProps = { hint: number; baseValue?: number; diff --git a/figma-kit/src/components/switch/switch.tsx b/figma-kit/src/components/switch/switch.tsx index dbc00d6..2cbdedf 100644 --- a/figma-kit/src/components/switch/switch.tsx +++ b/figma-kit/src/components/switch/switch.tsx @@ -14,5 +14,7 @@ const Switch = React.forwardRef((props, ref) => { ); }); +Switch.displayName = 'Switch'; + export type { SwitchProps }; export { Switch }; diff --git a/figma-kit/src/components/tabs/tabs.tsx b/figma-kit/src/components/tabs/tabs.tsx index 9e36c73..89ff93e 100644 --- a/figma-kit/src/components/tabs/tabs.tsx +++ b/figma-kit/src/components/tabs/tabs.tsx @@ -53,5 +53,10 @@ const Content = React.forwardRef((props, ref) => { return ; }); +Root.displayName = 'Tabs.Root'; +List.displayName = 'Tabs.List'; +Trigger.displayName = 'Tabs.Trigger'; +Content.displayName = 'Tabs.Content'; + export type { RootProps, ListProps, TriggerProps, ContentProps }; export { Root, List, Trigger, Content }; diff --git a/figma-kit/src/components/text/text.tsx b/figma-kit/src/components/text/text.tsx index aeb3bd9..954259d 100644 --- a/figma-kit/src/components/text/text.tsx +++ b/figma-kit/src/components/text/text.tsx @@ -50,6 +50,8 @@ const Text = React.forwardRef((props, ref) => { ); }); +Text.displayName = 'Text'; + type LabelElement = React.ElementRef<'label'>; type LabelProps = React.ComponentPropsWithoutRef<'label'> & VariantProps; @@ -71,6 +73,8 @@ const Label = React.forwardRef((props, ref) => { ); }); +Label.displayName = 'Label'; + type ParagraphElement = React.ElementRef<'p'>; type ParagraphProps = React.ComponentPropsWithoutRef<'p'> & VariantProps; @@ -98,6 +102,8 @@ type LinkProps = React.ComponentPropsWithoutRef<'a'> & asChild?: boolean; }; +Paragraph.displayName = 'Paragraph'; + const Link = React.forwardRef((props, ref) => { const { asChild, className, size, weight, align, block, ...linkProps } = props; const Element = asChild ? Slot : 'a'; @@ -120,5 +126,7 @@ const Link = React.forwardRef((props, ref) => { ); }); +Link.displayName = 'Link'; + export type { TextProps, LabelProps, ParagraphProps, LinkProps }; export { Text, Label, Paragraph, Link }; diff --git a/figma-kit/src/components/textarea/textarea.tsx b/figma-kit/src/components/textarea/textarea.tsx index 8594203..609b6f2 100644 --- a/figma-kit/src/components/textarea/textarea.tsx +++ b/figma-kit/src/components/textarea/textarea.tsx @@ -11,5 +11,7 @@ const Textarea = React.forwardRef((props, ref) = return ; }); +Textarea.displayName = 'Textarea'; + export type { TextareaProps }; export { Textarea }; diff --git a/figma-kit/src/components/tooltip/tooltip.tsx b/figma-kit/src/components/tooltip/tooltip.tsx index 87ca995..071911b 100644 --- a/figma-kit/src/components/tooltip/tooltip.tsx +++ b/figma-kit/src/components/tooltip/tooltip.tsx @@ -55,5 +55,7 @@ const Tooltip = React.forwardRef((props, ref) => { ); }); +Tooltip.displayName = 'Tooltip'; + export { TooltipProvider, Tooltip }; export type { TooltipProps, TooltipProviderProps }; diff --git a/figma-kit/src/components/value-field/value-field-base.tsx b/figma-kit/src/components/value-field/value-field-base.tsx index 389cf09..11d216e 100644 --- a/figma-kit/src/components/value-field/value-field-base.tsx +++ b/figma-kit/src/components/value-field/value-field-base.tsx @@ -118,5 +118,7 @@ const Base = (props: BaseProps) => { ); }; +Base.displayName = 'ValueField.Base'; + export type { BaseProps }; export { Base }; diff --git a/figma-kit/src/components/value-field/value-field-elements.tsx b/figma-kit/src/components/value-field/value-field-elements.tsx index d9494c3..7d41839 100644 --- a/figma-kit/src/components/value-field/value-field-elements.tsx +++ b/figma-kit/src/components/value-field/value-field-elements.tsx @@ -65,5 +65,9 @@ const Label = React.forwardRef((props, ref) => { ); }); +Root.displayName = 'ValueField.Root'; +Label.displayName = 'ValueField.Label'; +Multi.displayName = 'ValueField.Multi'; + export type { RootProps, LabelProps, MultiProps }; export { Root, Label, Multi, useValueFieldContext };