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.

Sign up for GitHub

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

Jump to bottom

[Tag] fill & [TagInput] intent props #3237

Merged
merged 3 commits into from
Jan 18, 2019
Merged

[Tag] fill & [TagInput] intent props #3237

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
50bb455
add Tag fill prop
Dec 13, 2018
5dfef06
add TagInput intent prop
Dec 13, 2018
2f6a297
add tag fill styles & example switch
Jan 18, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions packages/core/src/components/tag-input/tagInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,12 @@ import * as React from "react";
import { AbstractPureComponent } from "../../common/abstractPureComponent";
import * as Classes from "../../common/classes";
import * as Keys from "../../common/keys";
import { DISPLAYNAME_PREFIX, HTMLInputProps, IProps, MaybeElement } from "../../common/props";
import { DISPLAYNAME_PREFIX, HTMLInputProps, IIntentProps, IProps, MaybeElement } from "../../common/props";
import * as Utils from "../../common/utils";
import { Icon, IconName } from "../icon/icon";
import { ITagProps, Tag } from "../tag/tag";

export interface ITagInputProps extends IProps {
export interface ITagInputProps extends IIntentProps, IProps {
/**
* If true, `onAdd` will be invoked when the input loses focus.
* Otherwise, `onAdd` is only invoked when `enter` is pressed.
Expand Down Expand Up @@ -211,7 +211,7 @@ export class TagInput extends AbstractPureComponent<ITagInputProps, ITagInputSta
}

public render() {
const { className, disabled, fill, inputProps, large, leftIcon, placeholder, values } = this.props;
const { className, disabled, fill, inputProps, intent, large, leftIcon, placeholder, values } = this.props;

const classes = classNames(
Classes.INPUT,
Expand All @@ -222,6 +222,7 @@ export class TagInput extends AbstractPureComponent<ITagInputProps, ITagInputSta
[Classes.FILL]: fill,
[Classes.LARGE]: large,
},
Classes.intentClass(intent),
className,
);
const isLarge = classes.indexOf(Classes.LARGE) > NONE;
Expand Down
5 changes: 5 additions & 0 deletions packages/core/src/components/tag/_tag.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,11 @@ Styleguide tag
}
}

&.#{$ns}-fill {
display: flex;
width: 100%;
}

&.#{$ns}-minimal {
@include pt-tag-minimal();

Expand Down
8 changes: 8 additions & 0 deletions packages/core/src/components/tag/tag.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,12 @@ export interface ITagProps extends IProps, IIntentProps, React.HTMLAttributes<HT
*/
active?: boolean;

/**
* Whether the tag should take up the full width of its container.
* @default false
*/
fill?: boolean;

/** Name of a Blueprint UI icon (or an icon element) to render before the children. */
icon?: IconName | MaybeElement;

Expand Down Expand Up @@ -83,6 +89,7 @@ export class Tag extends React.PureComponent<ITagProps, {}> {
active,
children,
className,
fill,
icon,
intent,
interactive,
Expand All @@ -101,6 +108,7 @@ export class Tag extends React.PureComponent<ITagProps, {}> {
Classes.intentClass(intent),
{
[Classes.ACTIVE]: active,
[Classes.FILL]: fill,
Copy link
Contributor

Choose a reason for hiding this comment

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

there is no corresponding CSS change, so this doesn't seem to do anything

Copy link
Member

Choose a reason for hiding this comment

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

https://github.com/palantir/blueprint/blob/develop/packages/core/src/common/_flex.scss#L8

Copy link
Contributor

Choose a reason for hiding this comment

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

are you able to get it working in the docs? I can't

Copy link
Member

Choose a reason for hiding this comment

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

The parent in the docs isn't a @pt-flex-container, so no.

Why does .pt-flex only work inside a @pt-flex-container? Why not just globally allow it? I doubt consumers use the mixin, I certainly never have.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

i added this prop to support flex containers, as you've noticed. i'm happy to add some corresponding styles (display: flex; width: 100%) if you'd like to see that too @adidahiya @invliD?

Copy link
Contributor

Choose a reason for hiding this comment

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

yeah, I would like to see some way to enable this style modifier in the docs, thanks

Copy link
Contributor Author

Choose a reason for hiding this comment

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

done

[Classes.INTERACTIVE]: interactive,
[Classes.LARGE]: large,
[Classes.MINIMAL]: minimal,
Expand Down
6 changes: 5 additions & 1 deletion packages/docs-app/src/examples/core-examples/tagExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { Example, handleBooleanChange, handleStringChange, IExampleProps } from
import { IntentSelect } from "./common/intentSelect";

export interface ITagExampleState {
fill: boolean;
icon: boolean;
intent: Intent;
interactive: boolean;
Expand All @@ -24,6 +25,7 @@ export interface ITagExampleState {

export class TagExample extends React.PureComponent<IExampleProps, ITagExampleState> {
public state: ITagExampleState = {
fill: false,
icon: false,
intent: Intent.NONE,
interactive: false,
Expand All @@ -35,6 +37,7 @@ export class TagExample extends React.PureComponent<IExampleProps, ITagExampleSt
tags: INITIAL_TAGS,
};

private handleFillChange = handleBooleanChange(fill => this.setState({ fill }));
private handleIconChange = handleBooleanChange(icon => this.setState({ icon }));
private handleIntentChange = handleStringChange((intent: Intent) => this.setState({ intent }));
private handleInteractiveChange = handleBooleanChange(interactive => this.setState({ interactive }));
Expand Down Expand Up @@ -68,10 +71,11 @@ export class TagExample extends React.PureComponent<IExampleProps, ITagExampleSt
}

private renderOptions() {
const { icon, intent, interactive, large, minimal, removable, rightIcon, round } = this.state;
const { fill, icon, intent, interactive, large, minimal, removable, rightIcon, round } = this.state;
return (
<>
<H5>Props</H5>
<Switch label="Fill" checked={fill} onChange={this.handleFillChange} />
<Switch label="Large" checked={large} onChange={this.handleLargeChange} />
<Switch label="Minimal" checked={minimal} onChange={this.handleMinimalChange} />
<Switch label="Interactive" checked={interactive} onChange={this.handleInteractiveChange} />
Expand Down
37 changes: 25 additions & 12 deletions packages/docs-app/src/examples/core-examples/tagInputExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@
import * as React from "react";

import { Button, H5, Intent, ITagProps, Switch, TagInput } from "@blueprintjs/core";
import { Example, handleBooleanChange, IExampleProps } from "@blueprintjs/docs-theme";
import { Example, handleBooleanChange, handleStringChange, IExampleProps } from "@blueprintjs/docs-theme";
import { IntentSelect } from "./common/intentSelect";

const INTENTS = [Intent.NONE, Intent.PRIMARY, Intent.SUCCESS, Intent.DANGER, Intent.WARNING];

Expand All @@ -27,10 +28,11 @@ export interface ITagInputExampleState {
addOnPaste: boolean;
disabled: boolean;
fill: boolean;
intent: boolean;
intent: Intent;
large: boolean;
leftIcon: boolean;
minimal: boolean;
tagIntents: boolean;
tagMinimal: boolean;
values: React.ReactNode[];
}

Expand All @@ -40,24 +42,26 @@ export class TagInputExample extends React.PureComponent<IExampleProps, ITagInpu
addOnPaste: true,
disabled: false,
fill: false,
intent: false,
intent: "none",
large: false,
leftIcon: true,
minimal: false,
tagIntents: false,
tagMinimal: false,
values: VALUES,
};

private handleAddOnBlurChange = handleBooleanChange(addOnBlur => this.setState({ addOnBlur }));
private handleAddOnPasteChange = handleBooleanChange(addOnPaste => this.setState({ addOnPaste }));
private handleDisabledChange = handleBooleanChange(disabled => this.setState({ disabled }));
private handleFillChange = handleBooleanChange(fill => this.setState({ fill }));
private handleIntentChange = handleBooleanChange(intent => this.setState({ intent }));
private handleIntentChange = handleStringChange((intent: Intent) => this.setState({ intent }));
private handleLargeChange = handleBooleanChange(large => this.setState({ large }));
private handleLeftIconChange = handleBooleanChange(leftIcon => this.setState({ leftIcon }));
private handleMinimalChange = handleBooleanChange(minimal => this.setState({ minimal }));
private handleTagIntentsChange = handleBooleanChange(tagIntents => this.setState({ tagIntents }));
private handleTagMinimalChange = handleBooleanChange(tagMinimal => this.setState({ tagMinimal }));

public render() {
const { minimal, values, ...props } = this.state;
const { tagIntents, tagMinimal, values, ...props } = this.state;

const clearButton = (
<Button
Expand All @@ -72,9 +76,9 @@ export class TagInputExample extends React.PureComponent<IExampleProps, ITagInpu
// NOTE: avoid this pattern in your app (use this.getTagProps instead); this is only for
// example purposes!!
const getTagProps = (_v: string, index: number): ITagProps => ({
intent: this.state.intent ? INTENTS[index % INTENTS.length] : Intent.NONE,
intent: tagIntents ? INTENTS[index % INTENTS.length] : Intent.NONE,
large: props.large,
minimal,
minimal: tagMinimal,
});

return (
Expand Down Expand Up @@ -102,9 +106,18 @@ export class TagInputExample extends React.PureComponent<IExampleProps, ITagInpu
<Switch label="Add on blur" checked={this.state.addOnBlur} onChange={this.handleAddOnBlurChange} />
<Switch label="Add on paste" checked={this.state.addOnPaste} onChange={this.handleAddOnPasteChange} />
<Switch label="Fill container width" checked={this.state.fill} onChange={this.handleFillChange} />
<IntentSelect intent={this.state.intent} onChange={this.handleIntentChange} />
<H5>Tag props</H5>
<Switch label="Use minimal tags" checked={this.state.minimal} onChange={this.handleMinimalChange} />
<Switch label="Cycle through intents" checked={this.state.intent} onChange={this.handleIntentChange} />
<Switch
label="Use minimal tags"
checked={this.state.tagMinimal}
onChange={this.handleTagMinimalChange}
/>
<Switch
label="Cycle through intents"
checked={this.state.tagIntents}
onChange={this.handleTagIntentsChange}
/>
</>
);
}
Expand Down