[Tag] Improve outline behavior #2428

llorca · 2018-04-27T18:48:29Z

Add tabIndex on interactive tags only, for proper keyboard navigation
Clean up focus styles

blueprint-bot · 2018-04-27T18:52:44Z

add tabIndex for focus on interactive tags

Preview: documentation | landing | table

giladgray · 2018-04-27T19:31:00Z

@llorca TagInput backspace & arrow key interactions look broken -- no focus state

llorca · 2018-04-27T21:18:32Z

packages/core/src/components/tag-input/_tag-input.scss

@@ -5,10 +5,14 @@
 @import "../forms/common";
 @import "../tag/common";

-$ti-padding: ($pt-input-height - $tag-height) / 2;
+$tag-input-padding: ($pt-input-height - $tag-height) / 2;


was a bit confused by the namespace look of $ti so named this more classicly... if you feel strongly, I can revert back, but this seems more legible to me

llorca · 2018-04-27T21:19:17Z

@giladgray added a custom outline style for tag input tags only. let me know if that's a fair approach, otherwise could use some help figuring out the best way here

blueprint-bot · 2018-04-27T21:23:02Z

add custom outline styles for tag input tags

Preview: documentation | landing | table

giladgray · 2018-04-27T23:56:08Z

packages/core/src/components/tag-input/_tag-input.scss

    // NOTE: in order to wrap long words, you must set explicit width on TagInput,
    // or use .#{$ns}-fill CSS class modifier.
    overflow-wrap: break-word;
+
+    &::before {


not a fan of this special case, and even less a fan of not simply using outline / the default focus styles (which it used to before this PR)

blueprint-bot · 2018-05-04T20:27:59Z

use focus outline mixin instead of custom box shadow

Preview: documentation | landing | table

blueprint-bot · 2018-05-04T20:32:15Z

fix view source margin bottom by adding a heading

Preview: documentation | landing | table

giladgray · 2018-05-08T20:48:27Z

packages/core/src/components/tag/tag.tsx

@@ -88,7 +88,7 @@ export class Tag extends React.PureComponent<ITagProps, {}> {
        ) : null;

        return (
-            <span {...htmlProps} className={tagClasses}>
+            <span {...htmlProps} className={tagClasses} tabIndex={interactive ? 0 : -1}>


i think we want undefined in the false case (emphasis mine):

A negative value (usually tabindex="-1") means that the element should be focusable, but should not be reachable via sequential keyboard navigation. Mostly useful to create accessible widgets with JavaScript.
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

giladgray · 2018-05-08T20:48:41Z

packages/core/src/components/tag-input/_tag-input.scss

    }
  }

  .#{$ns}-tag {
+    position: relative;


don't think this chance is necessary. leftover from previous attempt?

giladgray · 2018-05-08T20:52:21Z

packages/core/src/components/tag-input/_tag-input.scss

    // NOTE: in order to wrap long words, you must set explicit width on TagInput,
    // or use .#{$ns}-fill CSS class modifier.
    overflow-wrap: break-word;
+
+    &.#{$ns}-active {
+      @include focus-outline(0);


i kinda think we want to adjust outline offset on all tags, not just in tag inputs:

(note how the outline touches the neighboring tags)

so this change should move back to core tag styles.

I don't think that's the right move, but did it anyway, Not sure what to do with outline design in general

giladgray · 2018-05-08T20:52:44Z

@llorca please merge latest master for the new build steps

blueprint-bot · 2018-05-08T21:33:07Z

address comments

Preview: documentation | landing | table

giladgray

a few more changes. i pushed a commit, so be sure to pull first

giladgray · 2018-05-08T21:45:55Z

packages/core/src/components/tag-input/_tag-input.scss

+$tag-input-icon-padding: ($pt-input-height - $pt-icon-size-standard) / 2;
+$tag-input-icon-padding-large: ($pt-input-height-large - $pt-icon-size-large) / 2;
+
+$tag-input-outline-color: $pt-outline-color;


~~remove this alias, use original name directly~~ also unused, please delete.

giladgray · 2018-05-08T21:46:16Z

packages/core/src/components/tag-input/_tag-input.scss

+
+$tag-input-outline-color: $pt-outline-color;
+$tag-input-outline-offset: 1px;
+$tag-input-outline-size: 2px;


these two vars are unused; please remove

giladgray · 2018-05-08T21:46:40Z

packages/core/src/components/tag/_common.scss

@@ -120,6 +121,7 @@ $tag-padding-large: ($tag-height-large - $pt-icon-size-large) / 2 !default;
      background-color: rgba($background-color, $opacity + 0.1);
    }

+    &.pt-active,


giladgray · 2018-05-08T21:46:43Z

packages/core/src/components/tag/_common.scss

@@ -106,6 +106,7 @@ $tag-padding-large: ($tag-height-large - $pt-icon-size-large) / 2 !default;
      background-color: rgba($background-color, $opacity - 0.15);
    }

+    &.pt-active,


pt ⇒ #{$ns}

giladgray · 2018-05-08T21:49:42Z

packages/core/src/components/tag-input/_tag-input.scss

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


can you add !default to all these (surviving) vars please?

blueprint-bot · 2018-05-08T21:52:17Z

use tabIndex from props if given

Preview: documentation | landing | table

…l/tag-outline

blueprint-bot · 2018-05-08T22:24:23Z

Merge branch 'al/tag-outline' of github.com:palantir/blueprint into al/tag-outline

Preview: documentation | landing | table

giladgray · 2018-05-09T01:18:35Z

packages/core/src/components/tag/_common.scss

@@ -27,6 +27,10 @@ $tag-padding-large: ($tag-height-large - $pt-icon-size-large) / 2 !default;
  color: $pt-dark-text-color;
  font-size: $pt-font-size-small;

+  &.#{$ns}-active {


ah dang actually i think this should be &:focus here, just to adjust the outline-offset.

and bring back this selector in .pt-tag-input .pt-tag like you had earlier

😄

pushed another commit, hopefully I got it right this time!

blueprint-bot · 2018-05-09T01:32:19Z

address more comments

Preview: documentation | landing | table

Antoine Llorca added 2 commits April 27, 2018 11:46

remove focus outline

c780896

add tabIndex for focus on interactive tags

221bdc0

llorca requested a review from giladgray April 27, 2018 18:48

add custom outline styles for tag input tags

f0e9eb6

llorca commented Apr 27, 2018

View reviewed changes

giladgray reviewed Apr 27, 2018

View reviewed changes

Antoine Llorca added 2 commits May 4, 2018 13:22

use focus outline mixin instead of custom box shadow

22633b7

fix view source margin bottom by adding a heading

059231e

giladgray suggested changes May 8, 2018

View reviewed changes

address comments

45b96f3

llorca requested a review from giladgray May 8, 2018 21:31

use tabIndex from props if given

d169afa

giladgray suggested changes May 8, 2018

View reviewed changes

giladgray reviewed May 8, 2018

View reviewed changes

more comments

f10e1c1

llorca requested a review from giladgray May 8, 2018 22:19

Merge branch 'al/tag-outline' of github.com:palantir/blueprint into a…

43c4c9f

…l/tag-outline

giladgray approved these changes May 8, 2018

View reviewed changes

giladgray reviewed May 9, 2018

View reviewed changes

address more comments

9198538

llorca requested a review from giladgray May 16, 2018 23:17

giladgray approved these changes May 16, 2018

View reviewed changes

giladgray merged commit 162d85b into develop May 16, 2018

giladgray deleted the al/tag-outline branch May 16, 2018 23:39

llorca mentioned this pull request Jun 7, 2018

Focus outline of active tags is not controlled by FocusStyleManager #2575

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Tag] Improve outline behavior #2428

[Tag] Improve outline behavior #2428

llorca commented Apr 27, 2018 •

edited by giladgray

Loading

blueprint-bot commented Apr 27, 2018

giladgray commented Apr 27, 2018

llorca Apr 27, 2018

llorca commented Apr 27, 2018

blueprint-bot commented Apr 27, 2018

giladgray Apr 27, 2018

blueprint-bot commented May 4, 2018

blueprint-bot commented May 4, 2018

giladgray May 8, 2018

giladgray May 8, 2018

giladgray May 8, 2018

llorca May 8, 2018

giladgray commented May 8, 2018

blueprint-bot commented May 8, 2018

giladgray left a comment

giladgray May 8, 2018 •

edited

Loading

giladgray May 8, 2018

giladgray May 8, 2018

giladgray May 8, 2018

giladgray May 8, 2018

blueprint-bot commented May 8, 2018

blueprint-bot commented May 8, 2018

giladgray May 9, 2018

llorca May 9, 2018

blueprint-bot commented May 9, 2018

[Tag] Improve outline behavior #2428

[Tag] Improve outline behavior #2428

Conversation

llorca commented Apr 27, 2018 • edited by giladgray Loading

blueprint-bot commented Apr 27, 2018

add tabIndex for focus on interactive tags

giladgray commented Apr 27, 2018

Choose a reason for hiding this comment

llorca commented Apr 27, 2018

blueprint-bot commented Apr 27, 2018

add custom outline styles for tag input tags

Choose a reason for hiding this comment

blueprint-bot commented May 4, 2018

use focus outline mixin instead of custom box shadow

blueprint-bot commented May 4, 2018

fix view source margin bottom by adding a heading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

giladgray commented May 8, 2018

blueprint-bot commented May 8, 2018

address comments

giladgray left a comment

Choose a reason for hiding this comment

giladgray May 8, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

blueprint-bot commented May 8, 2018

use tabIndex from props if given

blueprint-bot commented May 8, 2018

Merge branch 'al/tag-outline' of github.com:palantir/blueprint into al/tag-outline

Choose a reason for hiding this comment

Choose a reason for hiding this comment

blueprint-bot commented May 9, 2018

address more comments

llorca commented Apr 27, 2018 •

edited by giladgray

Loading

giladgray May 8, 2018 •

edited

Loading