feat(text-input): add experimental text-input #1074

alisonjoseph · 2018-09-09T19:53:50Z

http://carbon-dev-environment-optimistic-kangaroo.stage1.mybluemix.net/component/text-input--default

asudoh

LGTM 👍 - Thanks @alisonjoseph!

tw15egan · 2018-09-13T16:14:02Z

I'm getting a different hover action in my local environment... I could be checking it out wrong, all I need to do is flip the switch at the top, right?

alisonjoseph · 2018-09-13T16:22:50Z

Oops, the staging link is wrong. sorry! @tw15egan

This one definitely needs some design review/input.

tw15egan · 2018-09-13T16:29:48Z

Okay, going to wait on design review before doing code review, as things may change

tw15egan · 2018-09-17T19:22:03Z

@alisonjoseph can you add a preview link when you get a chance, so we can get design review?

alisonjoseph · 2018-09-17T19:34:40Z

I'm trying... my computer hates me 😢

alisonjoseph · 2018-09-17T19:51:12Z

Screen shots for now, until I can figure out a staging link. Full disclosure that I just copied styles from duo-components for this and didn't check against any designs (because I don't have any)

Hover State

Focus State

aagonzales · 2018-09-18T12:58:55Z

src/components/text-input/_text-input.scss

+    height: rem(40px);
+    padding: 0 $spacing-xl 0 $spacing-md;
+    color: $text-02;
+    border: none;


There should be a 1px border on all sides with $ui-04 as the border color

aagonzales · 2018-09-18T16:32:44Z

src/components/text-input/_text-input.scss

+  }
+
+  .#{$prefix}--text-input[data-invalid],
+  .#{$prefix}--text-input:invalid {


What invalid state should look like according to duo.

no *

font-weight: regular/400

font-color: support-01

add error icon to the right inside the field

invalid message should only be 4px from the bottom of the field

aagonzales · 2018-09-18T16:32:58Z

src/components/text-input/_text-input.scss

+
+  .#{$prefix}--text-input[data-invalid],
+  .#{$prefix}--text-input:invalid {
+    outline: 1px solid $support-01;


outline should be 2px thick

alisonjoseph · 2018-09-18T18:11:56Z

@aagonzales Is the label text the correct size?

alisonjoseph · 2018-09-18T19:04:12Z

src/components/text-input/_text-input.scss

+    outline-offset: -2px;
+    box-shadow: none;
+    background: $field-01
+      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16" class="ibm-icons ibm-icons--error--filled"><path fill="#da1e28" d="M6.95 26.66A14 14 0 0 0 26.67 6.93zM16 2A14 14 0 0 0 5.35 25.07L25.08 5.34A13.93 13.93 0 0 0 16 2z"/></svg>');


@IBM/carbon-developers thoughts on this for the error icon to avoid html changes for now?

asudoh

Nice progress @alisonjoseph!

asudoh · 2018-09-19T23:16:53Z

package.json

@@ -167,6 +167,7 @@
  "scripts": {
    "build": "gulp build",
    "build-dev": "gulp build:dev",
+    "rollup": "gulp build:dev --rollup -e",


Thank you for adding in @alisonjoseph! Would it make sense to name it build-dev-rollup to make it align with build-dev? BTW -e is for building experimental version of style - Probably we'd create build-dev-rollup and build-dev-rollup-experimental, like:

"build-dev-rollup": "gulp build:dev --rollup", "build-dev-rollup-experimental": "gulp build:dev --rollup -e",

What do you think? Thanks!

Yes, will update the name. Thanks for the suggestion.

asudoh · 2018-09-19T23:22:34Z

src/components/text-input/_text-input.scss

+  .#{$prefix}--text-input:disabled {
+    cursor: not-allowed;
+    // THIS SHOULD BE MOVED TO AN INLINE SVG IN NEXT MAJOR RELEASE
+    background-image: url("data:image/svg+xml;charset=UTF-8, %3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='16' height='16' class='ibm-icons ibm-icons--error--filled' fill='%23bebebe'%3e%3cpath d='M6.95 26.66A14 14 0 0 0 26.67 6.93zM16 2A14 14 0 0 0 5.35 25.07L25.08 5.34A13.93 13.93 0 0 0 16 2z'/%3e%3c/svg%3e");


Double-checking - Do you think usage this technique should be only temporarily? Something that came up to my mind is build toolchain addition to generate Sass variables from SVG, but I guess only if we'd ship this code to stable.

I think this is just temporary, I think the we should continue with inline svgs as our standard for stable releases.

aagonzales

looks good! 👍

tw15egan

Changes look great!

jeanservaas · 2018-09-20T16:33:59Z

Text Input Feedback

Question: can we use a smaller line for the field, like just "Place holder" or "Type here" so it doesn't cut off?

Text Color

Hint text needs to be Gray 50 (right now it is at Gray 70)
"Typing" and "Finished" states are both Gray 100
(right now it has an active "typing" state of Gray 100 and finished typing is at (Gray 70)

(See grabs)

Helper text

There is no helper text below the field, only a validation message (in the red). Helper text appears in a tool tip. (See grab) This is different from how Carbon does it now, so it won’t be a 1:1 relationship.

(See helper_text grab)

Disabled

Can’t find it in the inspection, we need to use Plex Sans Regular (Font weight 400)— but it looks like you’re using the semi-bold here (font-weight:600), the font weight is thicker…

Vertical center

This is a niggling detail. Looks like the type is riding slightly low in the box (like 1px) Should be on vertical center

alisonjoseph · 2018-09-20T22:00:04Z

Thanks for the feedback @jeanservaas

http://carbon-dev-environment-optimistic-kangaroo.stage1.mybluemix.net/component/text-input--default

Text Color -- updated
Helper text -- I believe this will have to be addressed in the future since it is a html / ux change and we are trying to add css only updates right now. (however someone should be able to just add an icon with tooltip next to the label and it will work)
Disabled -- It's actually the same font weight (400) as the other text inputs, the color makes it look a little different in browser.
Vertical center -- added 1px padding-bottom

carbon-bot · 2018-09-21T14:21:31Z

🎉 This PR is included in version 9.19.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

feat(text-input): add experimental text-input

2547bc3

alisonjoseph added status: ready for review 👀 labels Sep 9, 2018

asudoh approved these changes Sep 9, 2018

View reviewed changes

alisonjoseph and others added 2 commits September 11, 2018 15:10

Merge branch 'master' into text-input-x

8097044

Merge branch 'master' into text-input-x

b6c9b13

shinytoyrobots removed status: visual review 👀 labels Sep 13, 2018

Merge branch 'master' into text-input-x

c9a64b7

alisonjoseph added the status: visual review 🔍 label Sep 14, 2018

alisonjoseph added 2 commits September 17, 2018 14:39

chore: merge

b1d08ac

chore: merge

ed1c3f4

alisonjoseph added 3 commits September 17, 2018 16:36

chore: test

5769b86

chore: test

afe0c88

chore: add lockfile back

9e31963

alisonjoseph requested a review from a team September 17, 2018 21:53

aagonzales requested changes Sep 18, 2018

View reviewed changes

alisonjoseph and others added 3 commits September 18, 2018 12:39

Merge branch 'master' into text-input-x

03164c2

fix: update border color

dfbe7c5

chore: merge

1b0e54a

feat: add error icon to text input

a2f10be

alisonjoseph commented Sep 18, 2018

View reviewed changes

chore: convert svg

12f0004

alisonjoseph added 3 commits September 19, 2018 13:38

chore: fix duplicate IDs

ab238d3

chore: add comments to code

76b2195

chore: add code comments

39f07c3

asudoh reviewed Sep 19, 2018

View reviewed changes

chore: update scripts in package json

a924ab6

alisonjoseph assigned jeanservaas Sep 19, 2018

alisonjoseph requested review from jeanservaas, aagonzales and tw15egan September 19, 2018 23:42

aagonzales approved these changes Sep 20, 2018

View reviewed changes

alisonjoseph added status: merge conflict 🚫 and removed status: visual review 🔍 labels Sep 20, 2018

chore: merge

04eb88f

alisonjoseph added status: one more review 👀 and removed status: merge conflict 🚫 labels Sep 20, 2018

tw15egan approved these changes Sep 20, 2018

View reviewed changes

tw15egan and others added 2 commits September 20, 2018 12:30

Merge branch 'master' into text-input-x

8405f01

chore: color updates

251a072

chore: merge

9f400aa

asudoh added status: visual review 🔍 and removed status: one more review 👀 labels Sep 20, 2018

Merge branch 'master' into text-input-x

28f4e87

alisonjoseph merged commit b8bf8b8 into carbon-design-system:master Sep 21, 2018

alisonjoseph deleted the text-input-x branch September 21, 2018 14:14

alisonjoseph removed status: ready for review 👀 status: visual review 🔍 labels Sep 21, 2018

emyarod mentioned this pull request Feb 6, 2019

Experimental components: Update final error states #1535

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(text-input): add experimental text-input #1074

feat(text-input): add experimental text-input #1074

alisonjoseph commented Sep 9, 2018 •

edited

Loading

asudoh left a comment

tw15egan commented Sep 13, 2018

alisonjoseph commented Sep 13, 2018

tw15egan commented Sep 13, 2018

tw15egan commented Sep 17, 2018

alisonjoseph commented Sep 17, 2018 •

edited

Loading

alisonjoseph commented Sep 17, 2018 •

edited

Loading

aagonzales Sep 18, 2018

alisonjoseph Sep 18, 2018

aagonzales Sep 18, 2018 •

edited

Loading

aagonzales Sep 18, 2018

alisonjoseph Sep 18, 2018

alisonjoseph commented Sep 18, 2018

alisonjoseph Sep 18, 2018

asudoh left a comment

asudoh Sep 19, 2018

alisonjoseph Sep 19, 2018

asudoh Sep 19, 2018

alisonjoseph Sep 19, 2018

aagonzales left a comment •

edited

Loading

tw15egan left a comment

jeanservaas commented Sep 20, 2018

alisonjoseph commented Sep 20, 2018 •

edited

Loading

carbon-bot commented Sep 21, 2018

feat(text-input): add experimental text-input #1074

feat(text-input): add experimental text-input #1074

Conversation

alisonjoseph commented Sep 9, 2018 • edited Loading

asudoh left a comment

Choose a reason for hiding this comment

tw15egan commented Sep 13, 2018

alisonjoseph commented Sep 13, 2018

tw15egan commented Sep 13, 2018

tw15egan commented Sep 17, 2018

alisonjoseph commented Sep 17, 2018 • edited Loading

alisonjoseph commented Sep 17, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aagonzales Sep 18, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alisonjoseph commented Sep 18, 2018

Choose a reason for hiding this comment

asudoh left a 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

Choose a reason for hiding this comment

aagonzales left a comment • edited Loading

Choose a reason for hiding this comment

tw15egan left a comment

Choose a reason for hiding this comment

jeanservaas commented Sep 20, 2018

Text Input Feedback

alisonjoseph commented Sep 20, 2018 • edited Loading

carbon-bot commented Sep 21, 2018

alisonjoseph commented Sep 9, 2018 •

edited

Loading

alisonjoseph commented Sep 17, 2018 •

edited

Loading

alisonjoseph commented Sep 17, 2018 •

edited

Loading

aagonzales Sep 18, 2018 •

edited

Loading

aagonzales left a comment •

edited

Loading

alisonjoseph commented Sep 20, 2018 •

edited

Loading