angular / angular/components

feat(cdk-overlay): add css position classnames to parent panel when strategy is connected positioning

Open
#30,146 1 comment 0 reactions 0 assignees View on GitHub
area: cdk/overlay feature P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

### Feature Description

Currently, the only way to apply css to an overlay and target styles to a specific overlay position relative to a target element (e.g. above, below, etc.), you have to provide positions to the strategy you are using (such is this case in your autocomplete trigger where you need to swap the corner radius of the panel depending on if the position is above or below the target element). If you want to use the defaults of your connected position strategy, without providing positions to a position's strategy, it would be helpful to leverage css classnames that were automatically applied depending on whatever the position the cdk chose to apply.

### Use Case

A use case is exactly what you are doing in your autocomplete trigger. Rather than using an explicit css class we could leverage selectors supplied by the cdk overlay. For example, if the overlay was positioned above an element, the cdk would automatically apply '.cdk-overlay-positioned-above') to the parent element so we could leverage it to directly apply styles to the content in our overlay appropriately without needing to do so explicitly in our code. A common use case other than corner radius would be css animations where we would need to know the position to appropriately target our animations (slide down or slide up, for example). This would simplify our code and make applying styles under different positions much easier.

Contributor guide

Open the contributing guide

Research direction

Start by tracing the Angular CDK overlay connected positioning strategy and how it applies classes to the parent panel. Verify the behavior for positions above and below the target, and confirm that the selected position exposes CSS class names that can target overlay content and animations.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.