diff --git a/.changeset/sweet-suits-sit.md b/.changeset/sweet-suits-sit.md new file mode 100644 index 0000000000..b6f7fbadf5 --- /dev/null +++ b/.changeset/sweet-suits-sit.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-shortcuts': patch +--- + +Add tooltip to display shortcut title on hover. This should improve the readability of shortcuts with long names, which are cutoff by ellipsis. diff --git a/plugins/shortcuts/src/ShortcutItem.tsx b/plugins/shortcuts/src/ShortcutItem.tsx index d2ac716737..8ba1a96358 100644 --- a/plugins/shortcuts/src/ShortcutItem.tsx +++ b/plugins/shortcuts/src/ShortcutItem.tsx @@ -15,7 +15,9 @@ */ import React from 'react'; -import { IconButton, makeStyles } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; +import IconButton from '@material-ui/core/IconButton'; +import Tooltip from '@material-ui/core/Tooltip'; import EditIcon from '@material-ui/icons/Edit'; import { ShortcutIcon } from './ShortcutIcon'; import { EditShortcut } from './EditShortcut'; @@ -76,21 +78,23 @@ export const ShortcutItem = ({ shortcut, api }: Props) => { return ( <> - } - > - + } > - - - + + + + +