Support for unit in TextField #1152

wenche · 2021-03-09T13:42:32Z

wenche · 2021-03-09T13:45:09Z

We discussed to maybe use some grid or flex woo that would collapse if no input icon or unit were present. But reusing the Input component will make that hard to achieve, so I'll stick to an approach based on absolute positioning.

wenche · 2021-03-09T15:30:20Z

It's a lot easier to add things in Figma than in code and it would definitely be easier if the unit was to the right of the input 😓

The approach with absolute positioning don't work on unit with unknown width. To add the icon inside the input was easier as icon has a known size and we could add some padding to the text input field to make space for the icon. But with the flexible unit, it doesn't look good. See screenshot below

So I think we'll need to somehow wrap the Input, add unit and/or icon to the right and then create a fake background. This is how Material UI does this as well, using a lot of code to accomplish this. It will be a challenge to get all the variants, focus and so on back on track, and probably a lot of duplicate styling code.

It might actually be worth to consider doing this inside of the Input component itself. But I fear that would be a lot more work because we'll need to adjust the Select as well. And EDS users of the Input component would probably expect a simple Input without a lot of bells and whistles...

wenche · 2021-03-12T09:51:05Z

I'm still finding missing stuffs 🤷‍♀️ The disabled color was not in code.

wenche · 2021-03-12T10:04:58Z

@mimarz This textarea doesn't actually look beautiful, but seriously we cannot keep the version with absolute position in addition to all the new code magic just for this 😬

mimarz · 2021-03-12T10:14:44Z

@mimarz This textarea doesn't actually look beautiful, but seriously we cannot keep the version with absolute position in addition to all the new code magic just for this 😬

ugh, I was hoping we could drop absolute positioning all-together, but hmm. One option could be an absolute container with padding equal to the width of that container on the input, but that feels a tad hacky tho.... What are your thoughts? @wenche

…k OK

wenche · 2021-03-12T10:19:44Z

@mimarz This textarea doesn't actually look beautiful, but seriously we cannot keep the version with absolute position in addition to all the new code magic just for this 😬

ugh, I was hoping we could drop absolute positioning all-together, but hmm. One option could be an absolute container with padding equal to the width of that container on the input, but that feels a tad hacky tho.... What are your thoughts? @wenche

I suggest to just use resize=none I think this icon inside text area is a use case that I don't actually see. For validation we support the icon to the left of the helper text as an option as well

mimarz · 2021-03-12T10:27:32Z

@mimarz This textarea doesn't actually look beautiful, but seriously we cannot keep the version with absolute position in addition to all the new code magic just for this 😬

ugh, I was hoping we could drop absolute positioning all-together, but hmm. One option could be an absolute container with padding equal to the width of that container on the input, but that feels a tad hacky tho.... What are your thoughts? @wenche

I suggest to just use resize=none I think this icon inside text area is a use case that I don't actually see. For validation we support the icon to the left of the helper text as an option as well

Thats fair tbh, we should document that people should then use the native rows to control the size of the TextField when multiline is set to true.

wenche · 2021-03-12T10:28:39Z

@mimarz This textarea doesn't actually look beautiful, but seriously we cannot keep the version with absolute position in addition to all the new code magic just for this 😬

ugh, I was hoping we could drop absolute positioning all-together, but hmm. One option could be an absolute container with padding equal to the width of that container on the input, but that feels a tad hacky tho.... What are your thoughts? @wenche

I suggest to just use resize=none I think this icon inside text area is a use case that I don't actually see. For validation we support the icon to the left of the helper text as an option as well

Thats fair tbh, we should document that people should then use the native rows to control the size of the TextField when multiline is set to true.

Yup, I'll add a line or two about that in the storybook

libraries/core-react/src/components/Input/Input.tsx

libraries/core-react/stories/components/TextField.stories.tsx

mimarz

Reviewed in pair by @mimarz & @pomfrida.

Lots of good changes here! We like the way you wrote token values in css some places 😍
Mostly suggestions on cleaner code and some new stuff for discussion 😅

We also found a small visual bug when using multilines with scroll-bar and box-shadow as border. Not breaking (and in production). If you know of a fix for it, or else we can live with it I guess.

libraries/core-react/src/components/Input/Input.tsx

libraries/core-react/src/components/TextField/InputWrapper.tsx

mimarz · 2021-03-15T09:21:55Z

libraries/core-react/src/components/TextField/InputWrapper.tsx

+    box-shadow: ${() =>
+      isFocused
+        ? `none`
+        : variant === 'default'
+        ? `inset 0 -1px 0 0 ${
+            token.border?.type === 'border' && token.border?.color
+          }`
+        : `0 0 0 1px ${
+            token.border?.type === 'border' && token.border?.color
+          }`};


Don't think this needs to be inside an anonymous function.

Struggled a lot to find the easiest syntax for this 🔥 styled-components. Couldn't make it work without the func Might be a user error, but I gave up. 😓

I just tested, and I couldn't not see any difference without the removed func, so I suggest we remove it to avoid unintended consequences in the future

libraries/core-react/src/components/TextField/InputWrapper.tsx

libraries/core-react/src/components/TextField/TextField.tokens.ts

mimarz · 2021-03-15T09:48:36Z

libraries/core-react/src/components/TextField/TextField.tokens.ts

+  spacings: { comfortable },
+} = tokens
+
+export const textfield: ComponentToken = {


Recommend creating a TextFieldToken with a intersection type for which entities are present to help typing. In this case we are missing "unit".

export type TextFieldToken = ComponentToken & { entities?: { unit?: ComponentToken } }

mimarz · 2021-03-15T09:49:18Z

libraries/core-react/src/components/TextField/TextField.tsx

-          <RelativeContainer>
-            {inputIcon ? (
-              <>
-                <PaddedInputWrapper {...inputProps} />
-                <Icon isDisabled={disabled} variant={variant}>
-                  {inputIcon}
-                </Icon>
-              </>
-            ) : (
-              <InputWrapper {...inputProps} />
-            )}
-          </RelativeContainer>


libraries/core-react/src/components/TextField/context.tsx

mimarz · 2021-03-15T10:04:20Z

libraries/core-react/stories/components/TextField.stories.tsx

 )
+Multiline.parameters = {
+  docs: {
+    storyDescription: `With multiline we recommend to use <code>rows</code> in combination with a CSS rule of


Should maybe resize be set as default to none internally (with a default number of rows). Created a separate issue for this to be discussed later. #1155

mimarz · 2021-03-15T10:15:03Z

Storybook is also complaining on duplicate ids.

Will probably remove outline all together as we move on and this will make things more simple.

wenche · 2021-03-15T18:44:38Z

Storybook is also complaining on duplicate ids.

Aaarg, forgot to test with the a11y plugin, would have seen it there as well :)

pomfrida

Just nitpicking, there's also a few label="Multline" typos left in Textfield.stories, just do a search and replace 👍

libraries/core-react/src/components/TextField/InputWrapper.tsx

pomfrida

LGTM 👍

mimarz

Looks good! I think we should still remove some code as suggested to keep it clean 😅

mimarz · 2021-03-16T11:04:13Z

libraries/core-react/src/components/TextField/InputWrapper.tsx

+    box-shadow: ${() =>
+      isFocused
+        ? `none`
+        : variant === 'default'
+        ? `inset 0 -1px 0 0 ${
+            token.border?.type === 'border' && token.border?.color
+          }`
+        : `0 0 0 1px ${
+            token.border?.type === 'border' && token.border?.color
+          }`};


I just tested, and I couldn't not see any difference without the removed func, so I suggest we remove it to avoid unintended consequences in the future

libraries/core-react/src/components/TextField/InputWrapper.tsx

mimarz

wenche added 2 commits March 9, 2021 13:20

📝 Add a story for text field with unit

5a83307

🚧 Begin work on unit

a3c3eda

wenche added the core-react eds-core-react label Mar 9, 2021

wenche self-assigned this Mar 9, 2021

wenche added 2 commits March 9, 2021 15:36

🚧 Approach with absolute positioning, doesn't work very well

29aa142

🚧 Some work for extended input approach

f69dd99

wenche added 4 commits March 11, 2021 21:10

🚧 Lot's of playing around with the logic

61bca8c

📝 Add more stories for testing the different variants

7eed6d2

📝 Add even more stories to hightlight missing default text color

50cf1c0

✨ Temporary fix of the missing default color

29f6199

🐛 Fix positioning of icon in textarea. Resize none to make things loo…

f7f728a

…k OK

wenche added 11 commits March 12, 2021 11:45

⬇️ Add guidelines for using multiline

3dda844

♻️ Use the term adornment for unit and icon

3b89e93

♻️ Use outline template

d375252

🔥 Delete comments and unused vars

901ebb8

📝 Use defaultValue as it's no need for the examples to be controlled

f1a44c6

🔥 More clean up. Remove unnecessary wrappers and prop

b3672fb

💄 Add a tiny top margin to the unit

f6fc6b2

📝 Add variants for text field

ed97957

📝 More clarifications in the stories

60af987

✨ Separate disabled color for unit

16e69a5

📝 Add a more complete TextField as default

a61567c

wenche marked this pull request as ready for review March 12, 2021 15:14

wenche requested review from mimarz, pomfrida and vnys as code owners March 12, 2021 15:14

wenche mentioned this pull request Mar 12, 2021

Storybook crashes when changing certain controls #1128

Closed

pomfrida reviewed Mar 15, 2021

View reviewed changes

libraries/core-react/src/components/Input/Input.tsx Outdated Show resolved Hide resolved

pomfrida reviewed Mar 15, 2021

View reviewed changes

libraries/core-react/stories/components/TextField.stories.tsx Outdated Show resolved Hide resolved

mimarz suggested changes Mar 15, 2021

View reviewed changes

mimarz mentioned this pull request Mar 15, 2021

Textfield multilines interaction #1155

Closed

wenche added 6 commits March 15, 2021 19:04

🏷️ Remove unused type

43e705d

✏️ Fix typo

1bb0c41

♻️ Let InputWrapper extend Input and remove outline and box shadow

ef5072f

Will probably remove outline all together as we move on and this will make things more simple.

🏷️ Use TextFieldType to type the use of entities

a48db28

♻️ Easier to read with this Mickey-invented syntax ❤️

7ff8489

🏷️ Unit optional as well

3c9a85c

♿️ Remove duplicate ids

4c574c3

wenche requested a review from mimarz March 15, 2021 18:54

pomfrida suggested changes Mar 16, 2021

View reviewed changes

libraries/core-react/src/components/TextField/InputWrapper.tsx Outdated Show resolved Hide resolved

libraries/core-react/src/components/TextField/InputWrapper.tsx Outdated Show resolved Hide resolved

wenche added 2 commits March 16, 2021 10:49

✏️ Fix the rest of the multline typos

5e4db76

🏷️ Use correct type name.

92a9d0c

wenche requested a review from pomfrida March 16, 2021 10:07

pomfrida approved these changes Mar 16, 2021

View reviewed changes

mimarz suggested changes Mar 16, 2021

View reviewed changes

♻️ Remove func

e5b4019

wenche requested a review from mimarz March 16, 2021 11:17

mimarz approved these changes Mar 16, 2021

View reviewed changes

wenche merged commit f99ec6b into equinor:develop Mar 16, 2021

wenche deleted the textfield-unit branch March 16, 2021 11:29

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support for unit in TextField #1152

Support for unit in TextField #1152

wenche commented Mar 9, 2021 •

edited

Loading

wenche commented Mar 9, 2021 •

edited

Loading

wenche commented Mar 9, 2021 •

edited

Loading

wenche commented Mar 12, 2021

wenche commented Mar 12, 2021

mimarz commented Mar 12, 2021

wenche commented Mar 12, 2021

mimarz commented Mar 12, 2021

wenche commented Mar 12, 2021

mimarz left a comment •

edited by wenche

Loading

mimarz Mar 15, 2021

wenche Mar 15, 2021

mimarz Mar 16, 2021

mimarz Mar 15, 2021

mimarz Mar 15, 2021

mimarz Mar 15, 2021

mimarz commented Mar 15, 2021

wenche commented Mar 15, 2021

pomfrida left a comment

pomfrida left a comment

mimarz left a comment

mimarz Mar 16, 2021

mimarz left a comment

Support for unit in TextField #1152

Support for unit in TextField #1152

Conversation

wenche commented Mar 9, 2021 • edited Loading

wenche commented Mar 9, 2021 • edited Loading

wenche commented Mar 9, 2021 • edited Loading

wenche commented Mar 12, 2021

wenche commented Mar 12, 2021

mimarz commented Mar 12, 2021

wenche commented Mar 12, 2021

mimarz commented Mar 12, 2021

wenche commented Mar 12, 2021

mimarz left a comment • edited by wenche Loading

Choose a reason for hiding this comment

mimarz Mar 15, 2021

Choose a reason for hiding this comment

wenche Mar 15, 2021

Choose a reason for hiding this comment

mimarz Mar 16, 2021

Choose a reason for hiding this comment

mimarz Mar 15, 2021

Choose a reason for hiding this comment

mimarz Mar 15, 2021

Choose a reason for hiding this comment

mimarz Mar 15, 2021

Choose a reason for hiding this comment

mimarz commented Mar 15, 2021

wenche commented Mar 15, 2021

pomfrida left a comment

Choose a reason for hiding this comment

pomfrida left a comment

Choose a reason for hiding this comment

mimarz left a comment

Choose a reason for hiding this comment

mimarz Mar 16, 2021

Choose a reason for hiding this comment

mimarz left a comment

Choose a reason for hiding this comment

wenche commented Mar 9, 2021 •

edited

Loading

wenche commented Mar 9, 2021 •

edited

Loading

wenche commented Mar 9, 2021 •

edited

Loading

mimarz left a comment •

edited by wenche

Loading