Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Implemented the tooltip for table column headers #2349

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Implemented the tooltip for table column headers #2349

wants to merge 6 commits into from
+90 −8

Conversation

nivzx
Copy link

@nivzx nivzx commented Jun 10, 2024 •
edited
Loading

The PR fulfills these requirements: (check all the apply)

  • It's submitted to the main branch.
  • When resolving a specific issue, it's referenced in the PR's title (e.g. feat: Add a button #xxx, where "xxx" is the issue number).
  • When resolving a specific issue, the PR description includes Closes #xxx, where "xxx" is the issue number.
  • If changes were made to ui folder, unit tests (make test) still pass.
  • New/updated tests are included

Closes #1792

Added a optional tooltip parameter to table_column

ui.table(name='table', columns=[
            ui.table_column(name='col1', label='Column 1', tooltip="I am a tooltip"),
            ui.table_column(name='col2', label='Column 2'),
        ]

The column header with tooltip property is displayed with a tooltip icon and the tooltip content is displayed when it's hovered.
image

cc @mturoci

@nivzx nivzx requested review from lo5 and mturoci as code owners June 10, 2024 07:28
mturoci
mturoci requested changes Jun 10, 2024
View reviewed changes
Copy link
Collaborator

@mturoci mturoci left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @nivzx!

  • The tooltip is too far away from the icon.
  • Hovering over icon shouldn't bring up pointer cursor since clicking the info icon triggers no action.
  • The table column styling should remain intact.
  • Please add a unit tests to verify that the info button with tooltip is only rendered when tooltip prop is specified on a col. Columns without the prop should not render the info icon.

@nivzx
Copy link
Author

nivzx commented Jun 11, 2024

Fixed the styling issues. Will update the tests. Meanwhile please let me know your thoughts.
cc: @mturoci

[x] The tooltip is too far away from the icon.
[x] Hovering over icon shouldn't bring up pointer cursor since clicking the info icon triggers no action.
[x] The table column styling should remain intact.
[] Please add a unit tests to verify that the info button with tooltip is only rendered when tooltip prop is specified on a col. Columns without the prop should not render the info icon.

image

mturoci
mturoci requested changes Sep 3, 2024
View reviewed changes
Copy link
Collaborator

@mturoci mturoci left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The table styling should remain intact as mentioned previously.

image

You can use our visual regression testing tool:

  • Checkout main
  • make build-ui
  • cd tools/showcase && make visual-regression
  • chekout your feature branch
  • make build-ui
  • cd tools/showcase && make visual-regression
  • make test-result.

See Makefile in tools/showcase for more info.

The tooltip is not centered, the icon is way too small and the spacing between other column icons is uneven.

image

Also, the tooltip probably needs either a border or slightly different background so that it's easier to spot:

image

Maybe needed for the rest of the tooltips as well so prefer generic solution.

ui/src/table.tsx
}
}, [onColumnClick, onColumnContextMenu, selectedFilters, sortCols]),
[columns, setColumns] = React.useState(m.columns.map(tableToWaveColumn)),
primaryColumnKey = m.columns.find(c => c.link)?.name || (m.columns[0].link === false ? undefined : m.columns[0].name),
onRenderDetailsHeader = React.useCallback((props?: Fluent.IDetailsHeaderProps) => {
if (!props) return <span />
const renderColumnHeaderTooltip = (tooltipHostProps: any) => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can this any be replaced with a proper type?

ui/src/table.test.tsx
expect(infoIcons).toHaveLength(1)

headers.forEach(header => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since there are only 2 cols, looping is overkill. Let's simply check that first col has tooltip and the second one does not.

@nivzx
Copy link
Author

nivzx commented Sep 26, 2024

The table styling should remain intact as mentioned previously.

You can use our visual regression testing tool

The tooltip is not centered, the icon is way too small and the spacing between other column icons is uneven.

Also, the tooltip probably needs either a border or slightly different background so that it's easier to spot:

Maybe needed for the rest of the tooltips as well so prefer generic solution.

Got it! I'll try to refine this further. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@mturoci mturoci mturoci requested changes

@lo5 lo5 Awaiting requested review from lo5 lo5 is a code owner

Requested changes must be addressed to merge this pull request.

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Column wise tooltip for table
2 participants
@nivzx @mturoci