Add a disabled state to <TagInput> #1819
Conversation
|
Thanks for your interest in palantir/blueprint, @marvinsum! Before we can accept your pull request, you need to sign our contributor license agreement - just visit https://cla.palantir.com/ and follow the instructions. Once you sign, I'll automatically update this pull request. |
Added test for disabling a TagInput componentPreview: documentation |
| @@ -157,6 +164,9 @@ export class TagInput extends AbstractComponent<ITagInputProps, ITagInputState> | |||
| { | |||
| [CoreClasses.ACTIVE]: this.state.isInputFocused, | |||
| }, | |||
| { | |||
| [CoreClasses.DISABLED]: this.props.disabled, | |||
There was a problem hiding this comment.
Put this in the same object that was already in place:
{
[CoreClasses.ACTIVE]: this.state.isInputFocused,
[CoreClasses.DISABLED]: this.props.disabled,
}There was a problem hiding this comment.
@cmslewis ah yes, I didn't realize you could do that.
packages/labs/test/tagInputTests.tsx
Outdated
| .find(".pt-input-ghost") | ||
| .first() | ||
| .prop("disabled"), | ||
| ".pt-input-ghost does not have a 'disabled' attribute", |
There was a problem hiding this comment.
nit: Use the same language here to clarify whether this is what the state should be vs what it is: .pt-input-ghost should have a 'disabled' attribute
| @@ -23,6 +23,13 @@ import { | |||
| import * as Classes from "../../common/classes"; | |||
|
|
|||
| export interface ITagInputProps extends IProps { | |||
| /** | |||
| * Whether the component is non-interactive. | |||
| * Note that you'll also need to disable the component's rightElement, if appropriate. | |||
There was a problem hiding this comment.
nit: wrap comments to 80-char lines.
There was a problem hiding this comment.
nit: wrap in back ticks: rightElement
There was a problem hiding this comment.
@cmslewis does the linter not enforce comments < 80-char lines?
There was a problem hiding this comment.
Nah, it just enforces a global max of 120 chars. To achieve 80-char lines in comments, I use the VS Code Rewrap plugin: https://marketplace.visualstudio.com/items?itemName=stkb.rewrap
|
Can we go ahead and disable the
|
| @@ -48,6 +48,10 @@ $ti-icon-padding-large: ($pt-input-height-large - $pt-icon-size-standard) / 2; | |||
| padding: 0 ($input-padding-horizontal - $ti-padding); | |||
| } | |||
|
|
|||
| &[disabled] { | |||
There was a problem hiding this comment.
nice, please also add support for .pt-disabled 👌 it's part of our generic modifiers
Update TagInput test messages for consistencyPreview: documentation | landing | table |
Support .pt-disabled class on .pt-ghost-inputPreview: documentation | landing | table |
|
@marvinsum Yes, but we control the example, so we should demonstrate how to disable the |
|
@marvinsum ^ sorry, I realize now that you were probably asking if your current approach was reasonable. I think it's fine as is, yes. Just want to make sure the example behaves as a walk-up user would expect. |
|
@cmslewis ah, got it. I updated the docs to explain that and disabled the button when the |
Updated docs to include disabled rightElement example for TagInputPreview: documentation | landing | table |
cmslewis
dismissed stale reviews from llorca and themself
Comments addressed
Added an extra property to the
TagInputcomponent. Setting the property to true makes it non-interactive in the UI. Updated the docs and tests.