flex menu item #2075
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| // Copyright 2018 Palantir Technologies, Inc. All rights reserved. | ||
| // Licensed under the terms of the LICENSE file distributed with this project. | ||
|
|
||
| // this element becomes a flex container in the given direction. | ||
| // supply `$margin` to put space between each child. | ||
| // supply `$inline: inline` to use `display: flex-inline`. | ||
| // customize `flex: 1 1` child selector with $fill. | ||
| @mixin pt-flex-container($direction: row, $margin: none, $inline: none, $fill: ".pt-fill") { | ||
| @if $inline == inline or $inline == true { | ||
| display: inline-flex; | ||
| } @else { | ||
| display: flex; | ||
| } | ||
| flex-direction: $direction; | ||
|
|
||
| > * { | ||
| flex: 0 0 auto; | ||
| } | ||
|
|
||
| > #{$fill} { | ||
| flex: 1 1 auto; | ||
| } | ||
|
|
||
| @if $margin != none { | ||
| @include pt-flex-margin($direction, $margin); | ||
| } | ||
| } | ||
|
|
||
| // applies margin along axis of direction between every direct child, with no margins on either end. | ||
| // $direction: row | column | ||
| // $margin: margin[-right|-bottom] value | ||
| @mixin pt-flex-margin($direction, $margin) { | ||
| // CSS API support | ||
| &::before, | ||
| > :not(:last-child) { | ||
| @if $direction == row { | ||
| margin-right: $margin; | ||
| } @else { | ||
| margin-bottom: $margin; | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -26,6 +26,13 @@ export interface IMenuItemProps extends IActionProps, ILinkProps { | |
| */ | ||
| label?: string | JSX.Element; | ||
|
|
||
| /** | ||
| * Whether the text should be allowed to wrap to multiple lines. | ||
| * If `false`, text will be truncated with an ellipsis when it reaches `max-width`. | ||
| * @default false | ||
| */ | ||
| multiline?: boolean; | ||
|
There was a problem hiding this comment. @llorca thoughts on the centered icon alignment when multiline? (see your screenshot in comment below) There was a problem hiding this comment. good call, actually aligned at the top would be better in this case |
||
|
|
||
| /** Props to spread to `Popover`. Note that `content` and `minimal` cannot be changed. */ | ||
| popoverProps?: Partial<IPopoverProps>; | ||
|
|
||
|
|
@@ -45,6 +52,7 @@ export interface IMenuItemProps extends IActionProps, ILinkProps { | |
| export class MenuItem extends AbstractPureComponent<IMenuItemProps> { | ||
| public static defaultProps: IMenuItemProps = { | ||
| disabled: false, | ||
| multiline: false, | ||
| popoverProps: {}, | ||
| shouldDismissPopover: true, | ||
| text: "", | ||
|
|
@@ -66,6 +74,7 @@ export class MenuItem extends AbstractPureComponent<IMenuItemProps> { | |
| }, | ||
| this.props.className, | ||
| ); | ||
| const textClasses = classNames(Classes.FILL, { [Classes.TEXT_OVERFLOW_ELLIPSIS]: !this.props.multiline }); | ||
|
|
||
| const target = ( | ||
| <a | ||
|
|
@@ -76,8 +85,9 @@ export class MenuItem extends AbstractPureComponent<IMenuItemProps> { | |
| target={this.props.target} | ||
| > | ||
| <Icon iconName={this.props.iconName} /> | ||
| <span className={textClasses}>{this.props.text}</span> | ||
|
There was a problem hiding this comment. back to the topic of our public CSS API! this is very similar to what I had a few months ago--it was considered breaking then, so it's technically breaking now since you're adding a span. if you remove the span from this current PR, this is what it looks like: reiterating that it's quite annoying, this sort of internal refactor should not be considered breaking, and we should be able to do these outside of major versions There was a problem hiding this comment. this implementation is not an API break, though! i added an element but only inside the React component. you can of course easily break the appearance by mucking in the console--that doesn't mean it's an API break. you'll notice, most importantly, that all the CSS markup examples still look perfect, like before. I made no external changes to the CSS or React APIs. folks who use only |
||
| {label && <span className={Classes.MENU_ITEM_LABEL}>{label}</span>} | ||
| {hasSubmenu && <Icon iconName="caret-right" />} | ||
| </a> | ||
| ); | ||
|
|
||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -29,5 +29,5 @@ | |
| } | ||
|
|
||
| .docs-releases-menu .pt-menu { | ||
| min-width: 270px; | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
align-itemsis much better at alignment than humans, so this shouldn't be necessary. keep an eye out for SVG icons mixed with text to ensure they're centered.