Skip to content

feat: Picker - Item description support#1855

Merged
bmingles merged 18 commits intodeephaven:mainfrom
bmingles:293-picker-table-support
Mar 8, 2024
Merged

feat: Picker - Item description support#1855
bmingles merged 18 commits intodeephaven:mainfrom
bmingles:293-picker-table-support

Conversation

@bmingles
Copy link
Copy Markdown
Contributor

@bmingles bmingles commented Mar 6, 2024

  • Normalized keys for item / section now remain undefined if not provided. Same for item textValue
  • Proper rendering of items with descriptions
  • Fixed tooltips for items with descriptions. Also changed default placement to right
  • isElementOfType util
  • Added SpectrumThemeProvider to Popper

Supports deephaven/deephaven-plugins/issues/293

@bmingles bmingles marked this pull request as ready for review March 6, 2024 22:29
@bmingles bmingles requested a review from mofojed March 6, 2024 22:29
@codecov
Copy link
Copy Markdown

codecov Bot commented Mar 6, 2024

Codecov Report

Attention: Patch coverage is 24.39024% with 31 lines in your changes are missing coverage. Please review.

Project coverage is 46.11%. Comparing base (c965fc9) to head (1abfa97).

Files Patch % Lines
packages/components/src/popper/Popper.tsx 7.69% 12 Missing ⚠️
...mponents/src/spectrum/picker/PickerItemContent.tsx 0.00% 10 Missing ⚠️
packages/components/src/spectrum/picker/Picker.tsx 0.00% 9 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main    #1855      +/-   ##
==========================================
- Coverage   46.12%   46.11%   -0.02%     
==========================================
  Files         635      636       +1     
  Lines       38025    38044      +19     
  Branches     9612     9623      +11     
==========================================
+ Hits        17540    17544       +4     
- Misses      20432    20447      +15     
  Partials       53       53              
Flag Coverage Δ
unit 46.11% <24.39%> (-0.02%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@bmingles bmingles force-pushed the 293-picker-table-support branch from a709176 to b746685 Compare March 7, 2024 14:27
Comment on lines +38 to +59
content = content.map((item, i) =>
isElementOfType(item, Text)
? cloneElement(item, {
...item.props,
// `cloneElement` has the side effect of resetting React's internal
// `_store.validated` value to `false on the item. This causes it
// to be re-validated as a child in an array when is is rendered,
// even if the item was originally provided as an inline child.
// Since React expects array children to have explicit keys, this
// will show devtools warnings for items that wouldn't usually
// require explicit keys. Since we are only cloning `Text` nodes, it
// should be reasonable to fallback to a key matching the stringified
// content. The index suffix is an extra precation for when 2 <Text>
// nodes have the same value.
key: item.key ?? `${item.props.children}_${i}`,
UNSAFE_className: cl(
item.props.UNSAFE_className,
stylesCommon.spectrumEllipsis
),
})
: item
);
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Ah, when we were talking about this, I didn't realize the children we were talking about were inside the picker items - i.e. there's no need for a key.

You should be able to get around this warning by just using React.Children instead:

    content = React.Children.map(content, (element, i) =>
      isElementOfType(element, Text)
        ? cloneElement(element, {
            ...element.props,
            UNSAFE_className: cl(
              element.props.UNSAFE_className,
              stylesCommon.spectrumEllipsis
            ),
          })
        : element
    );

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Ah nice, glad you knew about this one. It felt gross the way I implemented it.

Comment thread packages/components/src/spectrum/picker/PickerUtils.ts
@mofojed
Copy link
Copy Markdown
Member

mofojed commented Mar 7, 2024

Need to update e2e snapshots as well.


const spectrumComparisonSamples = document.querySelector(
`#${SPECTRUM_COMPARISON_SAMPLES_ID}`
`#sample-section-${SPECTRUM_COMPARISON_SAMPLES_ID}`
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

This was a bug causing duplicate ids and the menu would always navigate to the first occurrence

@bmingles bmingles changed the title feat: Picker feat: Picker - Item description support Mar 7, 2024
@bmingles bmingles requested a review from mofojed March 7, 2024 23:27
@bmingles bmingles merged commit 026c101 into deephaven:main Mar 8, 2024
@bmingles bmingles deleted the 293-picker-table-support branch March 8, 2024 19:04
@github-actions github-actions Bot locked and limited conversation to collaborators Mar 8, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants