feat: input component #129

muratcorlu · 2022-06-21T12:10:26Z

Known issues:

Storybook demos for validation and focus states don't have a proper visual regression tests
Component argument reference has duplicate values for the properties like help-text since its property is helpText. We need to analyze how to properly document properties and attributes.

Also there are many missing features that we'll need near future for sure. But we wanted to iterate on this because input component is a quite complex component and we thought it makes sense to improve it step by step.

…t-component

Co-authored-by: Murat Çorlu <murat.corlu@trendyol.com>

muratcorlu · 2022-06-30T13:28:08Z

Medium input height looks 32.5px, should be 32px. Also, Large input height looks 40.5px, should be 40px.

We were using line-height for calculating input height but while we are implementing bl-badge (#131) we converted values to rem and decided to starting setting height. Once that PR merged, we needed to update current components (including button @leventozen ) to use this new approach.

I fixed it and should be ok now.

package.json

leventozen · 2022-06-30T13:32:33Z

Medium input height looks 32.5px, should be 32px. Also, Large input height looks 40.5px, should be 40px.

We were using line-height for calculating input height but while we are implementing bl-badge (#131) we converted values to rem and decided to starting setting height. Once that PR merged, we needed to update current components (including button @leventozen ) to use this new approach.

I fixed it and should be ok now.

Yes, I am aware of it. I commented for this reason. I checked, seems done 👍

buseselvi · 2022-06-30T14:53:07Z

When error message appears in the input validation section in storybook, the other input slides down, can we fix it so that it stays above? When we show descriptions, the alignment of the other inputs should not change.

muratcorlu · 2022-06-30T20:24:05Z

When error message appears in the input validation section in storybook, the other input slides down, can we fix it so that it stays above? When we show descriptions, the alignment of the other inputs should not change.

This is fixed.

But for doing that, I just styled demo pane to align component demostrations to the top. As a result of this that demo looks not aligned but I think we'll accept that. Right?

buseselvi · 2022-07-01T06:16:12Z

If we can't do bottom alignment in this part separately, can we put these 3 input types one under the other? We do not use inputs in different label styles side by side in the design.

Also, the text color of the input on the right looks different from the others, can we check?

muratcorlu · 2022-07-01T08:54:20Z

@buseselvi Good catch! 😊 Fixed it. Please check this version. Storybook will be re-rendered soon.

src/themes/default.css

buseselvi · 2022-07-01T12:47:29Z

Can we make the label background primary background color (white)?

github-actions · 2022-07-01T13:34:29Z

🎉 This PR is included in version 2.0.0-beta.11 🎉

The release is available on:

Your semantic-release bot 📦🚀

* feat: input component first boilerplate * feat: input work in progress * feat(input): more attributes are defined * feat(input): set validity with custom validation * feat(input): styling input * feat: input error validation and label defined * feat(input): added input medium features * feat(input): added input large, added all types * test(input): some tests are added * test: fix esbuild plugin causes ts decorators dont run * test(input): test coverage increased * refactor(input): linter fixes * docs(input): story file created * docs(storybook): adding user interaction test addon * feat: adding reportValidity method * docs(storybook): adding basic input ant input labels * refactor: linter fixes * fix(input): label-fixed placeholder visibility * test: include styles in unit tests (#133) Co-authored-by: Murat Çorlu <murat.corlu@trendyol.com> * test: clean forgotten tag in test html * test: dependency fix * refactor: linter fix * refactor: linter fix * fix(storybook): version fixed to 6.5.5 * docs(input): storybook doc improved * fix(input): css lint fix * fix(input): css part definition forgotten in the code * fix(input): font style fixed * fix(input): ui fixes with new rem sizes * chore(storybook): multi column demos aligned top * refactor(input): private properties pointed, better jsdoc * refactor: better web component analyzer * fix(input): placeholder color fix * fix(design): duplicate colors removed * fix(input): label bg color fixed Co-authored-by: mehmet.tanas <mehmet.tanas@trendyol.com>

github-actions · 2023-04-06T14:01:16Z

🎉 This PR is included in version 2.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

muratcorlu and others added 11 commits June 7, 2022 14:16

feat: input component first boilerplate

68461f2

feat: input work in progress

8ef0519

feat(input): more attributes are defined

0467ce9

Merge branch 'next' into 87-input-component

9766ffc

feat(input): set validity with custom validation

42f10c4

feat(input): styling input

6fa148e

feat: input error validation and label defined

793632f

feat(input): added input medium features

5598650

feat(input): added input large, added all types

7603b90

test(input): some tests are added

3d87b49

Merge remote-tracking branch 'origin/87-input-component' into 87-inpu…

f14e57c

…t-component

muratcorlu linked an issue Jun 21, 2022 that may be closed by this pull request

Input Component #87

Closed

muratcorlu and others added 18 commits June 21, 2022 14:20

test: fix esbuild plugin causes ts decorators dont run

e092923

test(input): test coverage increased

f7735e2

refactor(input): linter fixes

73de121

docs(input): story file created

8b9b169

Merge remote-tracking branch 'origin/87-input-component' into 87-inpu…

cb1fa18

…t-component

docs(storybook): adding user interaction test addon

3038e35

feat: adding reportValidity method

7629bf2

docs(storybook): adding basic input ant input labels

550bf44

refactor: linter fixes

e293fe7

Merge remote-tracking branch 'origin/87-input-component' into 87-inpu…

e16719f

…t-component

fix(input): label-fixed placeholder visibility

4b70174

test: include styles in unit tests (#133)

9d604f8

Co-authored-by: Murat Çorlu <murat.corlu@trendyol.com>

test: clean forgotten tag in test html

e9e40f8

test: dependency fix

7fbcb3c

refactor: linter fix

8f15e2d

refactor: linter fix

d3364e6

fix(storybook): version fixed to 6.5.5

60c7532

docs(input): storybook doc improved

abcddef

leventozen reviewed Jun 30, 2022

View reviewed changes

package.json Show resolved Hide resolved

muratcorlu added 3 commits June 30, 2022 18:17

chore(storybook): multi column demos aligned top

9ea64a0

refactor(input): private properties pointed, better jsdoc

f94129a

refactor: better web component analyzer

b40219d

fix(input): placeholder color fix

a19385f

DamlaDemir reviewed Jul 1, 2022

View reviewed changes

src/themes/default.css Outdated Show resolved Hide resolved

muratcorlu added 2 commits July 1, 2022 11:32

fix(design): duplicate colors removed

aeb350a

Merge branch 'next' into 87-input-component

f10f178

leventozen approved these changes Jul 1, 2022

View reviewed changes

muratcorlu requested review from DamlaDemir and removed request for leventozen July 1, 2022 12:26

fix(input): label bg color fixed

165b691

leventozen added the baklava-ds label Jul 1, 2022

leventozen assigned muratcorlu Jul 1, 2022

leventozen added this to the v2.0 milestone Jul 1, 2022

buseselvi approved these changes Jul 1, 2022

View reviewed changes

muratcorlu merged commit 66ec832 into next Jul 1, 2022

muratcorlu deleted the 87-input-component branch July 1, 2022 13:30

github-actions bot added the released on @beta label Jul 1, 2022

github-actions bot added the released label Apr 6, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: input component #129

feat: input component #129

muratcorlu commented Jun 21, 2022 •

edited by oemolla

Loading

muratcorlu commented Jun 30, 2022

leventozen commented Jun 30, 2022 •

edited

Loading

buseselvi commented Jun 30, 2022 •

edited

Loading

muratcorlu commented Jun 30, 2022

buseselvi commented Jul 1, 2022

muratcorlu commented Jul 1, 2022

buseselvi commented Jul 1, 2022

github-actions bot commented Jul 1, 2022

github-actions bot commented Apr 6, 2023

feat: input component #129

feat: input component #129

Conversation

muratcorlu commented Jun 21, 2022 • edited by oemolla Loading

muratcorlu commented Jun 30, 2022

leventozen commented Jun 30, 2022 • edited Loading

buseselvi commented Jun 30, 2022 • edited Loading

muratcorlu commented Jun 30, 2022

buseselvi commented Jul 1, 2022

muratcorlu commented Jul 1, 2022

buseselvi commented Jul 1, 2022

github-actions bot commented Jul 1, 2022

github-actions bot commented Apr 6, 2023

muratcorlu commented Jun 21, 2022 •

edited by oemolla

Loading

leventozen commented Jun 30, 2022 •

edited

Loading

buseselvi commented Jun 30, 2022 •

edited

Loading