- added comment to describe why displayName is needed

WestpacGEL · Oct 12, 2023 · a68dd14 · a68dd14
1 parent 34dfc37
commit a68dd14
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 0 deletions.
diff --git a/packages/ui/src/components/accordion/accordion.stories.tsx b/packages/ui/src/components/accordion/accordion.stories.tsx
@@ -11,6 +11,12 @@ const meta: Meta<typeof Accordion> = {
   tags: ['autodocs'],
   decorators: [
     (Story: StoryFn) => {
+      /**
+       * NOTE:
+       * Needed to change displayName here so subcomponent shows correct name in code view
+       * Could not change it on the component as Item from react-stately is used in three components
+       * and one displayName would overwrite the others
+       */
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       Accordion.Item.displayName = 'Accordion.Item';

diff --git a/packages/ui/src/components/autocomplete/autocomplete.stories.tsx b/packages/ui/src/components/autocomplete/autocomplete.stories.tsx
@@ -9,6 +9,12 @@ const meta: Meta<typeof Autocomplete> = {
   tags: ['autodocs'],
   decorators: [
     (Story: StoryFn) => {
+      /**
+       * NOTE:
+       * Needed to change displayName here so subcomponent shows correct name in code view
+       * Could not change it on the component as Item from react-stately is used in three components
+       * and one displayName would overwrite the others
+       */
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       Autocomplete.Item.displayName = 'Autocomplete.Item';

diff --git a/packages/ui/src/components/tabs/tabs.stories.tsx b/packages/ui/src/components/tabs/tabs.stories.tsx
@@ -9,6 +9,12 @@ const meta: Meta<typeof Tabs> = {
   tags: ['autodocs'],
   decorators: [
     (Story: StoryFn) => {
+      /**
+       * NOTE:
+       * Needed to change displayName here so subcomponent shows correct name in code view
+       * Could not change it on the component as Item from react-stately is used in three components
+       * and one displayName would overwrite the others
+       */
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       Tabs.Panel.displayName = 'Tabs.Panel';