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(cdk/overlay): Allow passing separate X and Y values for the view… #29563

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

LukeyBeachBoy
Copy link

…portMargin

The overlay directive now accepts two additional (optional parameters) [viewportMarginX] and [viewportMarginY]. You can use these to pass separate margin values for the viewport.

@LukeyBeachBoy LukeyBeachBoy requested a review from a team as a code owner August 9, 2024 12:44
@LukeyBeachBoy LukeyBeachBoy requested review from crisbeto and wagnermaciel and removed request for a team August 9, 2024 12:44
@angular-robot angular-robot bot added the detected: feature PR contains a feature commit label Aug 9, 2024
Copy link
Member

@crisbeto crisbeto left a comment

Choose a reason for hiding this comment

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

Can you add a couple of tests to src/cdk/overlay/position/flexible-connected-position-strategy.spec.ts?

@LukeyBeachBoy LukeyBeachBoy force-pushed the feature-cdk-overlay-split-viewport-margin branch 2 times, most recently from 37b5e76 to 0903d6e Compare August 18, 2024 12:24
@LukeyBeachBoy
Copy link
Author

Can you add a couple of tests to src/cdk/overlay/position/flexible-connected-position-strategy.spec.ts?

Hi, done :)

@LukeyBeachBoy LukeyBeachBoy force-pushed the feature-cdk-overlay-split-viewport-margin branch from 0903d6e to 2a78c90 Compare October 7, 2024 09:34
@LukeyBeachBoy
Copy link
Author

Hi @crisbeto, could I get another review? Thanks!

* Sets a minimum distance the overlay may be positioned from the left edge of the viewport.
* @param margin Required margin between the overlay and the viewport edge in pixels.
*/
withViewportMarginLeft(margin: number): this {
Copy link
Member

Choose a reason for hiding this comment

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

A couple of notes:

  1. Instead of introducing properties for each direction, we should just change the viewport margin to be something like number | {top: number, bottom: number, start: number, end: number}.
  2. We should use start and end, instead of left and right, because they get inverted in RTL.

Copy link
Author

Choose a reason for hiding this comment

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

Good points, I've updated the parameter to a union type as suggested as well as renamed left/right -> start/end

@LukeyBeachBoy LukeyBeachBoy force-pushed the feature-cdk-overlay-split-viewport-margin branch from 2a78c90 to 742668a Compare October 7, 2024 11:03
@LukeyBeachBoy LukeyBeachBoy force-pushed the feature-cdk-overlay-split-viewport-margin branch 3 times, most recently from 6804076 to 73539f2 Compare October 9, 2024 07:36
@LukeyBeachBoy
Copy link
Author

Hi @crisbeto, I updated my tests and everything should build correctly now. Could you review again when you have time?

@@ -0,0 +1 @@
export type ViewportMargin = number | {top?: number; bottom?: number; start?: number; end?: number};
Copy link
Member

Choose a reason for hiding this comment

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

It looks like this file is missing a license header. You can also put the type in one of the existing files.

…portMargin

The overlay directive now accepts two additional (optional parameters) [viewportMarginX] and [viewportMarginY]. You can use these to pass separate margin values for the viewport.
@LukeyBeachBoy LukeyBeachBoy force-pushed the feature-cdk-overlay-split-viewport-margin branch from 73539f2 to 70450b2 Compare October 9, 2024 09:34
@LukeyBeachBoy
Copy link
Author

@crisbeto Right, sorry. I've moved it to another file now

@LukeyBeachBoy
Copy link
Author

Is there something else I need to change for this PR? I see the merge status and internal tests are failing but I'm unable to see any details

Copy link
Member

@crisbeto crisbeto left a comment

Choose a reason for hiding this comment

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

It looks like this broke some internal screenshot tests, but I haven't had the time to debug them. In some of them an autocomplete that is close to the viewport edge was the same width as the trigger, but after the change it's slightly smaller. I suspect the margin might be getting doubled somewhere where previously it wasn't.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
detected: feature PR contains a feature commit
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants