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.

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

feat: Picker - Item description support #1855

Merged
merged 18 commits into from
Mar 8, 2024

Conversation

bmingles
Copy link
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
Copy link

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.

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
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
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.

@mofojed
Copy link
Member

mofojed commented Mar 7, 2024

Need to update e2e snapshots as well.

@@ -56,7 +56,7 @@ export function SamplesMenu(): JSX.Element {
);

const spectrumComparisonSamples = document.querySelector(
`#${SPECTRUM_COMPARISON_SAMPLES_ID}`
`#sample-section-${SPECTRUM_COMPARISON_SAMPLES_ID}`
Copy link
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
7 checks passed
@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