mui / toolpad

Toolpad: Full stack components and low-code builder for dashboards and internal apps.
https://mui.com/toolpad/
MIT License
1.31k stars 294 forks source link

[PageContainer] Setting `title` prop manually gives all children title tooltip #4452

Open christiancookbuzz opened 5 days ago

christiancookbuzz commented 5 days ago

Steps to reproduce

Steps:

  1. Add a PageContainer component
  2. Give the PageContainer a title prop (Overriding default behaviour) e.g. title='Test'
  3. Within the PageContainer component, add an element e.g. Button
  4. Load the page and hover on the Button and observe the title from the PageContainer is applied to the button, displaying a title tooltip with your PageContainer's title

image

Current behavior

Child elements to the PageContainer (And PageContainer itself) all display a title browser tooltip.

Expected behavior

No title tooltip should be displayed.

Context

I am trying to override the title for a page based on the context of where the page is being displayed without changing the title in the navigation.

Your environment

npx @mui/envinfo ``` System: OS: macOS 14.4.1 Binaries: Node: 18.19.0 - ~/.nvm/versions/node/v18.19.0/bin/node npm: 9.9.2 - ~/.nvm/versions/node/v18.19.0/bin/npm pnpm: Not Found Browsers: Chrome: 131.0.6778.86 Edge: Not Found Safari: 17.4.1 npmPackages: @emotion/react: ^11.11.4 => 11.13.3 @emotion/styled: ^11.11.0 => 11.13.0 @mui/base: 5.0.0-beta.61 @mui/core-downloads-tracker: 6.1.8 @mui/icons-material: ^6.1.0 => 6.1.1 @mui/lab: ^6.0.0-beta.10 => 6.0.0-beta.14 @mui/material: ^6.1.0 => 6.1.8 @mui/private-theming: 6.1.8 @mui/styled-engine: 6.1.8 @mui/styled-engine-sc: ^6.1.0 => 6.1.1 @mui/system: 6.1.8 @mui/types: 7.2.19 @mui/utils: 6.1.8 @mui/x-charts: ^7.15.0 => 7.17.0 @mui/x-charts-vendor: 7.16.0 @mui/x-data-grid: 7.17.0 @mui/x-data-grid-pro: ^7.17.0 => 7.17.0 @mui/x-date-pickers: ^7.16.0 => 7.17.0 @mui/x-internals: 7.17.0 @mui/x-license: 7.17.0 @toolpad/core: ^0.9.0 => 0.9.0 @toolpad/utils: 0.9.0 @types/react: ^18.2.66 => 18.3.7 react: ^18.2.0 => 18.3.1 react-dom: ^18.2.0 => 18.3.1 styled-components: ^6.1.8 => 6.1.13 typescript: ^5.2.2 => 5.6.2 ```

Browser: Chrome

Search keywords: PageContainer title

Janpot commented 5 days ago

it's spreading the title prop to the top level element. this is unintended. PR welcome.

christiancookbuzz commented 1 day ago

@Janpot Would you consider a change to the title prop name to something like pageTitle so it doesn't conflict with the title global attribute?

Janpot commented 1 day ago

I think we could start by destructuring it here so that it doesn't end up in the rest variable. renaming it would be a breaking change.