feat: add display names to all components

tigranpetrossian · Jul 4, 2024 · d54f7f6 · d54f7f6
1 parent afc6e52
commit d54f7f6
Show file tree

Hide file tree

Showing 22 changed files with 102 additions and 0 deletions.
diff --git 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<ActionElement, ActionProps>((props, ref) => {
   return <RadixAlertDialog.Action ref={ref} asChild {...props} />;
 });
 
+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
@@ -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
@@ -35,5 +35,9 @@ const Content = React.forwardRef<ContentElement, ContentProps>((props, ref) => {
   return <RadixCollapsible.Content ref={ref} className={cx(className, 'fp-CollapsibleContent')} {...contentProps} />;
 });
 
+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
@@ -124,6 +124,16 @@ const RadioItem = React.forwardRef<RadioItemElement, RadioItemProps>((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
@@ -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
@@ -103,6 +103,12 @@ const Close = React.forwardRef<CloseElement, CloseProps>((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
@@ -125,6 +125,16 @@ const RadioItem = React.forwardRef<RadioItemElement, RadioItemProps>((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
@@ -77,5 +77,7 @@ const Flex = React.forwardRef<FlexElement, FlexProps>((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
@@ -50,5 +50,7 @@ const IconButton = React.forwardRef<IconButtonElement, IconButtonProps>((props,
   return disableTooltip ? buttonElement : <Tooltip content={tooltipContent ?? ariaLabel}>{buttonElement}</Tooltip>;
 });
 
+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
@@ -19,5 +19,7 @@ const Input = React.forwardRef<InputElement, InputProps>((props, forwardedRef) =
   return <input ref={composedRef} type={type} className={cx(className, 'fp-Input')} {...inputProps} />;
 });
 
+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
@@ -68,6 +68,11 @@ const Close = React.forwardRef<CloseElement, CloseProps>((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
@@ -55,5 +55,9 @@ const Label = React.forwardRef<LabelElement, LabelProps>((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
@@ -52,5 +52,9 @@ const Text = React.forwardRef<TextElement, TextProps>((props, ref) => {
   return <TextPrimitive ref={ref} className={cx(className, 'fp-SegmentedControlText')} {...textProps} />;
 });
 
+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
@@ -90,5 +90,12 @@ const Group = React.forwardRef<GroupElement, GroupProps>((props, ref) => {
   return <RadixSelect.Group ref={ref} className={cx(className, 'fp-MenuGroup')} {...groupProps} />;
 });
 
+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
@@ -133,6 +133,8 @@ const Slider = React.forwardRef<SliderElement, SliderProps>((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
@@ -14,5 +14,7 @@ const Switch = React.forwardRef<SwitchElement, SwitchProps>((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
@@ -53,5 +53,10 @@ const Content = React.forwardRef<ContentElement, ContentProps>((props, ref) => {
   return <RadixTabs.Content ref={ref} className={cx(className, 'fp-TabsContent')} {...contentProps} />;
 });
 
+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
@@ -50,6 +50,8 @@ const Text = React.forwardRef<TextElement, TextProps>((props, ref) => {
   );
 });
 
+Text.displayName = 'Text';
+
 type LabelElement = React.ElementRef<'label'>;
 type LabelProps = React.ComponentPropsWithoutRef<'label'> & VariantProps<typeof text>;
 
@@ -71,6 +73,8 @@ const Label = React.forwardRef<LabelElement, LabelProps>((props, ref) => {
   );
 });
 
+Label.displayName = 'Label';
+
 type ParagraphElement = React.ElementRef<'p'>;
 type ParagraphProps = React.ComponentPropsWithoutRef<'p'> & VariantProps<typeof text>;
 
@@ -98,6 +102,8 @@ type LinkProps = React.ComponentPropsWithoutRef<'a'> &
     asChild?: boolean;
   };
 
+Paragraph.displayName = 'Paragraph';
+
 const Link = React.forwardRef<LinkElement, LinkProps>((props, ref) => {
   const { asChild, className, size, weight, align, block, ...linkProps } = props;
   const Element = asChild ? Slot : 'a';
@@ -120,5 +126,7 @@ const Link = React.forwardRef<LinkElement, LinkProps>((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
@@ -11,5 +11,7 @@ const Textarea = React.forwardRef<TextareaElement, TextareaProps>((props, ref) =
   return <TextareaAutoSize className={cx(className, 'fp-textarea')} ref={ref} {...textareaProps} />;
 });
 
+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
@@ -55,5 +55,7 @@ const Tooltip = React.forwardRef<TooltipElement, TooltipProps>((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
@@ -118,5 +118,7 @@ const Base = <V,>(props: BaseProps<V>) => {
   );
 };
 
+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
@@ -65,5 +65,9 @@ const Label = React.forwardRef<LabelElement, LabelProps>((props, ref) => {
   );
 });
 
+Root.displayName = 'ValueField.Root';
+Label.displayName = 'ValueField.Label';
+Multi.displayName = 'ValueField.Multi';
+
 export type { RootProps, LabelProps, MultiProps };
 export { Root, Label, Multi, useValueFieldContext };