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

Document all positioning options in Fluent UI v9 #26786

Open
ling1726 opened this issue Feb 9, 2023 · 17 comments
Open

Document all positioning options in Fluent UI v9 #26786

ling1726 opened this issue Feb 9, 2023 · 17 comments

Comments

@ling1726
Copy link
Member

ling1726 commented Feb 9, 2023

Not all positioning options are documented here: https://react.fluentui.dev/?path=/docs/concepts-developer-positioning-components--default

Document all the options

export interface PositioningOptions {
/** Alignment for the component. Only has an effect if used with the @see position option */
align?: Alignment;
/** The element which will define the boundaries of the positioned element for the flip behavior. */
flipBoundary?: Boundary | null;
/** The element which will define the boundaries of the positioned element for the overflow behavior. */
overflowBoundary?: Boundary | null;
/**
* Position for the component. Position has higher priority than align. If position is vertical ('above' | 'below')
* and align is also vertical ('top' | 'bottom') or if both position and align are horizontal ('before' | 'after'
* and 'start' | 'end' respectively),
* then provided value for 'align' will be ignored and 'center' will be used instead.
*/
position?: Position;
/**
* Enables the position element to be positioned with 'fixed' (default value is position: 'absolute')
* @default false
*/
positionFixed?: boolean;
/**
* Lets you displace a positioned element from its reference element.
* This can be useful if you need to apply some margin between them or if you need to fine tune the
* position according to some custom logic.
*/
offset?: Offset;
/**
* Defines padding between the corner of the popup element and the arrow.
* Use to prevent the arrow from overlapping a rounded corner, for example.
*/
arrowPadding?: number;
/**
* Applies max-height and max-width on the positioned element to fit it within the available space in viewport.
* true enables this for both width and height when overflow happens.
* 'always' applies `max-height`/`max-width` regardless of overflow.
* 'height' applies `max-height` when overflow happens, and 'width' for `max-width`
* `height-always` applies `max-height` regardless of overflow, and 'width-always' for always applying `max-width`
*/
autoSize?: AutoSize;
/**
* Modifies position and alignment to cover the target
*/
coverTarget?: boolean;
/**
* Disables automatic repositioning of the component; it will always be placed according to the values of `align` and
* `position` props, regardless of the size of the component, the reference element or the viewport.
*/
pinned?: boolean;
/**
* When the reference element or the viewport is outside viewport allows a positioned element to be fully in viewport.
* "all" enables this behavior for all axis.
*/
// eslint-disable-next-line @typescript-eslint/naming-convention
unstable_disableTether?: boolean | 'all';
}

@layershifter layershifter changed the title Document all positioning options in Fluent U v9 Document all positioning options in Fluent UI v9 Feb 20, 2023
@microsoft-github-policy-service microsoft-github-policy-service bot added the Resolution: Soft Close Soft closing inactive issues over a certain period label Aug 25, 2023
@microsoft-github-policy-service

Because this issue has not had activity for over 180 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

@microsoft-github-policy-service

Because this issue has not had activity for over 180 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

@microsoft-github-policy-service

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

1 similar comment
@microsoft-github-policy-service

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

@microsoft-github-policy-service

Because this issue has not had activity for over 180 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

@microsoft-github-policy-service

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

@microsoft-github-policy-service

Because this issue has not had activity for over 180 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

1 similar comment
@microsoft-github-policy-service

Because this issue has not had activity for over 180 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

@microsoft-github-policy-service

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

@microsoft-github-policy-service

Because this issue has not had activity for over 180 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

5 similar comments
@microsoft-github-policy-service

Because this issue has not had activity for over 180 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

@microsoft-github-policy-service

Because this issue has not had activity for over 180 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

@microsoft-github-policy-service

Because this issue has not had activity for over 180 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

@microsoft-github-policy-service

Because this issue has not had activity for over 180 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

@microsoft-github-policy-service

Because this issue has not had activity for over 180 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

@ling1726 ling1726 reopened this Aug 28, 2023

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

This issue has not had activity for over 180 days! We're adding Soft close label and will close it soon for house-keeping purposes.
Still require assistance? Please add comment - "keep open".

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants