[Bug]: AddOn - TooltipLinkList "left" does not render (8.0.0-beta.2)

[stevensacks]

Describe the bug

If you put something in "left", it does not render.

"title" and "right" still work

To Reproduce

Put anything into "left" in the TooltipLinkList links prop.

System

System:
    OS: macOS 14.3.1
    CPU: (12) arm64 Apple M2 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v20.11.0/bin/yarn
    npm: 10.4.0 - ~/.nvm/versions/node/v20.11.0/bin/npm <----- active
    pnpm: 8.1.0 - ~/.nvm/versions/node/v20.11.0/bin/pnpm
  Browsers:
    Chrome: 122.0.6261.94
    Safari: 17.3.1
  npmPackages:
    @storybook/addon-essentials: 8.0.0-beta.2 => 8.0.0-beta.2 
    @storybook/addon-interactions: 8.0.0-beta.2 => 8.0.0-beta.2 
    @storybook/addon-links: 8.0.0-beta.2 => 8.0.0-beta.2 
    @storybook/blocks: 8.0.0-beta.2 => 8.0.0-beta.2 
    @storybook/components: 8.0.0-beta.2 => 8.0.0-beta.2 
    @storybook/core-events: 8.0.0-beta.2 => 8.0.0-beta.2 
    @storybook/manager: 8.0.0-beta.2 => 8.0.0-beta.2 
    @storybook/manager-api: 8.0.0-beta.2 => 8.0.0-beta.2 
    @storybook/preview: 8.0.0-beta.2 => 8.0.0-beta.2 
    @storybook/preview-api: 8.0.0-beta.2 => 8.0.0-beta.2 
    @storybook/react: 8.0.0-beta.2 => 8.0.0-beta.2 
    @storybook/react-vite: 8.0.0-beta.2 => 8.0.0-beta.2 
    @storybook/testing-library: ^0.2.2 => 0.2.2 
    @storybook/theming: 8.0.0-beta.2 => 8.0.0-beta.2 
    @storybook/types: 8.0.0-beta.2 => 8.0.0-beta.2 
    storybook: 8.0.0-beta.2 => 8.0.0-beta.2

Additional context

// pseudo-code example

[ 
  {title: 'English', right: '🇺🇸'},
  {title: 'English', right: 'GB'},
  {title: 'Français', left: '🇫🇷'},
  {left: '🇯🇵'},
  {right: '🇩🇪'},
  'Spain',
  '🇮🇹 Italiano',
],

[shilman]

@JReinhold @cdedreuille is this an intentional 8.0 change?

[valentinpalkovic]

This was already an intentional change for Storybook 7. See #20898 and #20897

A left property doesn't exist. You must use icon if you want to place an icon on the left. See the property definition here: https://github.com/storybookjs/storybook/blob/next/code/ui/components/src/components/tooltip/ListItem.tsx#L175

@stevensacks Where did you find the information that the left property can be configured? Have we documented it somewhere wrongly?

[stevensacks]

Ok. I see in the code you linked that even though there is a component called <Left> the “left” prop has been removed in favor of an “icon” prop. I noticed there are two props for the center called “center” and “title”, and a “right” prop for the <Right> component. The naming isn’t consistent, so it’s a bit confusing 😅

The “icon” prop is not technically an icon, it’s a ReactNode, so it could be text, or an emoji (like my example usage). Maybe that’s why it was named “left” all these years? 🤷🏻‍♂️

I’ll change my addon to use the new name, but since this is a breaking change for all addons that use the TooltipListLink component, it should be included in the migration docs 🙏🏼

[valentinpalkovic]

@stevensacks I have added an entry to the migration docs here:
#26324

Please reach out if you need some further help. And don't get confused about the icon property in globalTypes, because before we pass the icon further to the ToolTipListLink component, we will pass the string into the Icon component from @storybook/components (which is deprecated).

And I agree. The API of the TooltipListLink is pretty messy. I hope, at some point, we can clean it up! Thanks for pointing it out.