Skip to content

Commit

Permalink
[core] flex box tag input (#2086)
Browse files Browse the repository at this point in the history
  • Loading branch information
@giladgray @adidahiya
giladgray authored and adidahiya committed Feb 7, 2018
1 parent f19e056 commit 0225a12
Show file tree
Hide file tree
Showing 6 changed files with 90 additions and 54 deletions.
3 changes: 2 additions & 1 deletion packages/core/src/common/classes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,7 +171,8 @@ export const TAG_REMOVABLE = "pt-tag-removable";
export const TAG_REMOVE = "pt-tag-remove";

export const TAG_INPUT = "pt-tag-input";
export const TAG_INPUT_ICON = `${TAG_INPUT}-icon`;
export const TAG_INPUT_ICON = "pt-tag-input-icon";
export const TAG_INPUT_VALUES = "pt-tag-input-values";

export const TOAST = "pt-toast";
export const TOAST_CONTAINER = "pt-toast-container";
Expand Down
4 changes: 2 additions & 2 deletions packages/core/src/components/button/_button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -200,12 +200,12 @@ Styleguide pt-button

&.pt-large,
.pt-large & {
@include pt-button-large();
@include pt-button-height-large();
}

&.pt-small,
.pt-small & {
@include pt-button-small();
@include pt-button-height-small();
}
}

Expand Down
28 changes: 17 additions & 11 deletions packages/core/src/components/button/_common.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,23 @@ $button-intents: (
min-height: $height;
}

@mixin pt-button-height-large() {
@include pt-button-height($pt-button-height-large);
@include pt-flex-margin(row, $button-icon-spacing-large);
padding: $button-padding-large;
font-size: $pt-font-size-large;
}

@mixin pt-button-height-default() {
@include pt-button-height($pt-button-height);
padding: $button-padding;
}

@mixin pt-button-height-small() {
@include pt-button-height($pt-button-height-small);
padding: $button-padding-small;
}

@mixin pt-button() {
box-shadow: $button-box-shadow;
background-color: $button-background-color;
Expand Down Expand Up @@ -431,14 +448,3 @@ $button-intents: (
}
}

@mixin pt-button-large() {
@include pt-button-height($pt-button-height-large);
@include pt-flex-margin(row, $button-icon-spacing-large);
padding: $button-padding-large;
font-size: $pt-font-size-large;
}

@mixin pt-button-small() {
@include pt-button-height($pt-button-height-small);
padding: $button-padding-small;
}
75 changes: 50 additions & 25 deletions packages/core/src/components/tag-input/_tag-input.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,28 +6,42 @@
@import "../tag/common";

$ti-padding: ($pt-input-height - $tag-height) / 2;
$ti-padding-right: ($pt-input-height - $pt-button-height-small) / 2;
$ti-large-padding-right: ($pt-input-height-large - $pt-button-height-small) / 2;

$ti-icon-padding: ($pt-input-height - $pt-icon-size-standard) / 2;
$ti-icon-padding-large: ($pt-input-height-large - $pt-icon-size-standard) / 2;
$ti-icon-padding-large: ($pt-input-height-large - $pt-icon-size-large) / 2;

.pt-tag-input {
display: flex;
flex-wrap: wrap;
align-items: center;
@include pt-flex-container(row, $fill: ".pt-tag-input-values");
align-items: flex-start;
cursor: text;
height: auto;
padding: $ti-padding $ti-padding-right 0 0;
min-height: $pt-input-height;
padding-right: 0;
padding-left: $ti-padding;

.pt-tag-input-icon {
// stylelint-disable-next-line max-line-length
margin: 0 ($ti-icon-padding - $ti-padding) $ti-padding $ti-icon-padding;
// margins to center icon in one-line input
margin-top: $ti-icon-padding;
margin-right: $ti-icon-padding;
margin-left: $ti-icon-padding - $ti-padding;
color: $pt-icon-color;
}

.pt-tag-input-values {
@include pt-flex-container(row, $ti-padding);
flex-wrap: wrap;
align-items: center;
// fill vertical height
align-self: stretch;
margin-top: $ti-padding;
margin-right: $ti-icon-padding;

> * {
margin-bottom: $ti-padding;
}
}

.pt-tag {
margin: 0 0 $ti-padding $ti-padding;
// NOTE: in order to wrap long words, you must set explicit width on TagInput,
// or use .pt-fill CSS class modifier.
overflow-wrap: break-word;
Expand All @@ -36,39 +50,50 @@ $ti-icon-padding-large: ($pt-input-height-large - $pt-icon-size-standard) / 2;
.pt-input-ghost {
// input fills remaining line
flex: 1 1 auto;
margin-bottom: $ti-padding;
// essentially a min-width, cuz flex allows it to grow or shrink:
width: $pt-grid-size * 10;
width: $pt-grid-size * 8;
line-height: $tag-height;

// match padding of other input elements iff no tags are selected
&:not(:first-child) {
padding: 0 ($input-padding-horizontal - $ti-padding);
}

&:disabled,
&.pt-disabled {
cursor: not-allowed;
}
}

~ * {
// shift right element up (to ignore top padding) so flex box will center it correctly
margin-top: -$ti-padding;
}
.pt-button,
.pt-spinner {
margin: ($pt-input-height - $pt-button-height-small) / 2;
margin-left: 0;
}

.pt-button {
@include pt-button-height-small();
}

&.pt-large {
@include pt-flex-margin(row, $ti-icon-padding-large);
height: auto;
padding-right: $ti-large-padding-right;
min-height: $pt-input-height-large;

.pt-tag-input-icon {
// stylelint-disable-next-line max-line-length
margin: 0 ($ti-icon-padding-large - $ti-padding) $ti-padding $ti-icon-padding-large;
margin-top: $ti-icon-padding-large;
margin-left: $ti-icon-padding-large - $ti-padding;
}

.pt-input-ghost {
line-height: $tag-height-large;
}

.pt-button {
@include pt-button-height-default();
margin: ($pt-input-height-large - $pt-button-height) / 2;
margin-left: 0;
}

.pt-spinner {
margin: ($pt-input-height-large - $pt-button-height-small) / 2;
margin-left: 0;
}
}

&.pt-active {
Expand Down Expand Up @@ -104,7 +129,7 @@ $ti-icon-padding-large: ($pt-input-height-large - $pt-icon-size-standard) / 2;
border: none;
box-shadow: none;
background: none;
padding: 0 $input-padding-horizontal;
padding: 0;

&:focus {
// remove focus state too
Expand Down
32 changes: 18 additions & 14 deletions packages/core/src/components/tag-input/tagInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,8 @@ export interface ITagInputProps extends IProps {

/**
* Element to render on right side of input.
* For best results, use a small minimal button, tag, or spinner.
* For best results, use a small spinner or minimal button (button height will adjust if `TagInput` use `.pt-large`).
* Other elements will likely require custom styles for correct positioning.
*/
rightElement?: JSX.Element;

Expand Down Expand Up @@ -206,19 +207,22 @@ export class TagInput extends AbstractPureComponent<ITagInputProps, ITagInputSta
icon={leftIcon}
iconSize={isLarge ? Icon.SIZE_LARGE : Icon.SIZE_STANDARD}
/>
{values.map(this.maybeRenderTag)}
<input
value={this.state.inputValue}
{...inputProps}
onFocus={this.handleInputFocus}
onChange={this.handleInputChange}
onKeyDown={this.handleInputKeyDown}
onKeyUp={this.handleInputKeyUp}
placeholder={resolvedPlaceholder}
ref={this.refHandlers.input}
className={classNames(Classes.INPUT_GHOST, inputProps.className)}
disabled={this.props.disabled}
/>
<div className={Classes.TAG_INPUT_VALUES}>
{values.map(this.maybeRenderTag)}
{this.props.children}
<input
value={this.state.inputValue}
{...inputProps}
onFocus={this.handleInputFocus}
onChange={this.handleInputChange}
onKeyDown={this.handleInputKeyDown}
onKeyUp={this.handleInputKeyUp}
placeholder={resolvedPlaceholder}
ref={this.refHandlers.input}
className={classNames(Classes.INPUT_GHOST, inputProps.className)}
disabled={this.props.disabled}
/>
</div>
{this.props.rightElement}
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion packages/docs-app/src/examples/core-examples/tagInputExample.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ export class TagInputExample extends BaseExample<ITagInputExampleState> {

const clearButton = (
<Button
className={classNames(Classes.MINIMAL, Classes.SMALL)}
className={Classes.MINIMAL}
disabled={disabled}
icon={values.length > 1 ? "cross" : "refresh"}
onClick={this.handleClear}
Expand Down

1 comment on commit 0225a12

@blueprint-bot
Copy link

Choose a reason for hiding this comment

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

[core] flex box tag input (#2086)

Preview: documentation | landing | table

Please sign in to comment.