Skip to content

Pickers: Fix popover elevation and gap#10270

Merged
ScarletKuro merged 3 commits intoMudBlazor:devfrom
danielchalmers:date-picker-popover-shadow
Nov 20, 2024
Merged

Pickers: Fix popover elevation and gap#10270
ScarletKuro merged 3 commits intoMudBlazor:devfrom
danielchalmers:date-picker-popover-shadow

Conversation

@danielchalmers
Copy link
Member

@danielchalmers danielchalmers commented Nov 18, 2024

Description

Regression by: #9993
Resolves #10235

  • Moves the drop shadow for inline pickers up to the popover itself and up to the picker element for others
  • Adds a mud-picker-popover class to the popover
  • MudPicker.Elevation is now nullable
    • Defaults to MudGlobal.PopoverDefaults.Elevation for inline pickers
    • Defaults to 0 for other variants
    • This avoids the hardcoded logic around the default of 8; you couldn't use that number to add an elevation for other variants

Additionally resolves issue caused by #10071 where there was a (now no longer needed) margin between the picker input and the picker itself:

image

This PR may or may not be considered a breaking change.

How Has This Been Tested?

visually

Type of Changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Documentation (fix or improvement to the website or code docs)

Checklist

  • The PR is submitted to the correct branch (dev).
  • My code follows the code style of this project.
  • I've added relevant tests.

@github-actions github-actions bot added bug Unexpected behavior or functionality not working as intended PR: needs review labels Nov 18, 2024
@danielchalmers
Copy link
Member Author

Tested visually briefly, needs confirmation that it fixes the issues mentioned. If any further refactoring or unit tests is wanted, kindly edit the branch.

@sonarqubecloud
Copy link

@codecov
Copy link

codecov bot commented Nov 18, 2024

Codecov Report

Attention: Patch coverage is 80.00000% with 1 line in your changes missing coverage. Please review.

Project coverage is 91.51%. Comparing base (a68891e) to head (f3f5866).
Report is 4 commits behind head on dev.

Files with missing lines Patch % Lines
src/MudBlazor/Components/Picker/MudPicker.razor.cs 80.00% 0 Missing and 1 partial ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##              dev   #10270      +/-   ##
==========================================
- Coverage   91.53%   91.51%   -0.02%     
==========================================
  Files         414      414              
  Lines       12989    12988       -1     
  Branches     2452     2452              
==========================================
- Hits        11889    11886       -3     
  Misses        555      555              
- Partials      545      547       +2     

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


🚨 Try these New Features:

@ScarletKuro
Copy link
Member

Did not check the PR yet, but found another regression by this PR;#9993 (comment)

Found another regression by this PR.
Arrow tooltips do not show the arrow:
https://dev.mudblazor.com/components/tooltip#arrow-tooltips

@ScarletKuro
Copy link
Member

Tested visually briefly, needs confirmation that it fixes the issues mentioned. If any further refactoring or unit tests is wanted, kindly edit the branch.

Want to help to test it visually @jperson2000?

@jperson2000
Copy link
Contributor

Want to help to test it visually @jperson2000?

You bet. It looks like we're testing all popovers after this change. Here's what I see for components when I test this branch:

MudAutoComplete

I see the 20px top margin is now fixed.
image

MudColorPicker

I see the 20px top margin is now fixed.
image

MudDatePicker

I see the 20px top margin is now fixed.
image

MudDateRangePicker

I see the 20px top margin is now fixed. Despite the 3px whitespace between the line and the popover, the popover really is adjacent to the date range picker.
image

MudPopover

I see good alignments in the "popoverception" example.
image

MudSelect

I see the 20px top margin is now fixed.
image

MudTimePicker

I see the 20px top margin is now fixed.
image

Looks good to me! Anything else I can help test?

@ScarletKuro
Copy link
Member

Did not check the PR yet, but found another regression by this PR;#9993 (comment)

What about the arrows?

@danielchalmers
Copy link
Member Author

Thank you @jperson2000 !

Did not check the PR yet, but found another regression by this PR;#9993 (comment)

What about the arrows?

@ScarletKuro Good catch, I'll take care of that in a second PR

@danielchalmers danielchalmers changed the title Pickers: Fix popover elevation Pickers: Fix popover elevation and gap Nov 20, 2024
@ScarletKuro ScarletKuro merged commit aa723c2 into MudBlazor:dev Nov 20, 2024
@ScarletKuro
Copy link
Member

@ScarletKuro Good catch, I'll take care of that in a second PR

Ok, merging then

ScarletKuro pushed a commit to ScarletKuro/MudBlazor that referenced this pull request Nov 21, 2024
LLauter pushed a commit to cannellamedia/MudBlazor that referenced this pull request Dec 16, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Unexpected behavior or functionality not working as intended

Projects

None yet

Development

Successfully merging this pull request may close these issues.

MudBlazor v8.0.0-preview.4 - DatePicker Issue

3 participants