feat: ✨ add sd-input #515

abudd1094 · 2023-11-02T11:13:43Z

Description:

Added sd-input component and samples. Closes #255

Please read the TODO comments. They are meant to call attention to certain lines where there is not full clarity.

Definition of Reviewable:

Documentation has been created/updated (if applicable)
Migration Guide has been created/updated (if applicable)
Relevant E2E tests (Features, A11y, Bug fixes) are created/updated
Relevant stories (Features, A11y) are created/updated
Implementation works successfully on feature branch

## Description: Add css components sd-table and sd-table-cell. ## Definition of Reviewable: - [x] Documentation is created/updated - [x] Migration Guide is created/updated - [x] Stories (features, a11y) are created/updated - [x] relevant tickets are linked - [x] PR is assigned to project board

# [@solid-design-system/components-v1.13.0](components/1.12.0...components/1.13.0) (2023-09-20) ### Features * ✨ add sd-table and sd-table-cell ([#379](#379)) ([ef7c5a9](ef7c5a9))

# [@solid-design-system/components-v1.13.1](components/1.13.0...components/1.13.1) (2023-09-21) ### Bug Fixes * 🤔changed paragraph default size to text-base ([#419](#419)) ([40e6605](40e6605))

Author: yoezlem <[email protected]> Co-authored-by: mariohamann <[email protected]>

# [@solid-design-system/components-v1.14.0](components/1.13.1...components/1.14.0) (2023-09-21) ### Features * ✨ quote pattern ([#405](#405)) ([f8bc6d8](f8bc6d8))

…cted in sd-teaser (#422) ## Description: Fixed a bug in sd-teaser to prevent rewrite of inset property when changing variants and added a corresponding test for it. Closes #362 ## Definition of Reviewable: *PR notes: Irrelevant elements should be removed.* - [x] relevant tickets are linked - [x] PR is assigned to project board

# [@solid-design-system/components-v1.14.1](components/1.14.0...components/1.14.1) (2023-09-22) ### Bug Fixes * 🐛 prevent rewrite of inset property when border variant was selected in sd-teaser ([#422](#422)) ([ada5be7](ada5be7)), closes [#362](#362)

This reverts commit 9ab2401.

# [@solid-design-system/components-v1.14.2](components/1.14.1...components/1.14.2) (2023-09-25) ### Bug Fixes * 🐛 fix CEM loading in Storybook ([#427](#427)) ([de7368f](de7368f))

# [@solid-design-system/components-v1.14.3](components/1.14.2...components/1.14.3) (2023-09-25) ### Bug Fixes * 🤔 make styles available on CDN ([#411](#411)) ([8048e94](8048e94))

# [@solid-design-system/components-v1.14.4](components/1.14.3...components/1.14.4) (2023-09-25) ### Bug Fixes * use own customElement decorator ([6a2787f](6a2787f))

coraliefeil · 2023-11-09T14:10:56Z

Pls reassign when last comments have been implemented. THX

coraliefeil · 2023-11-09T19:47:10Z

Approved. Thank you @abudd1094 for pushing through! Really a tough component. Appreciate all your helpful questions. <3

karlbaumhauer · 2023-11-10T10:27:46Z

As there have been so many reviews already, I will remove myself from the assignees. I dont feel, I could contribute anything meaningful to the PR and especially dont want to block the merge anymore.

If you need anything specific from me about this PR, pls reach out to me directly.

yoezlem · 2023-11-10T10:45:39Z

Ok, more updates are pushed.

help-text is now text-neutral-700 for all states and variants. This is not documented in Figma, refer to comment from Coralie on Chromatic:

As per the discussion, text-neutral-400 is not available. text-neutral-500 is used instead, TODO comment left:

Do we want to leave the 'message' slot in the component or remove it?

Solid icon styling. For the calendar and clock, this is an open question. Is the order correct and how would you like to apply colors in the various states to these icons @coraliefeil? Currently nothing is implemented so it inherits color.

Regarding differences in the input types, I have followed Mario's and Coralie's suggestions. Solid clock icon is used for the time type. Solid calendar icon is used for the date and datetime-local types, except for firefox, which keeps the default browser datepicker instead (impossible to hide without ugly hacks). flatpickr will not allow someone to use sd-input with type 'date' or 'datetime-local' it will foce the input to 'text' type and thus voids the built in browser formatting and validation. This is an open topic for us and how we would like to handle form validation and dates in our library.

As far as a 'success' state for validation, I'm not sure if my implementation is what is expected. Please have a look. @saemik94 made a valid point above that he did not understand the conditions for 'hasValidationAttr', 'isInvalid', and 'isValid' which I used in the render method. Is it also confusing for you? How would you recommend changing it if so?

I updated the stories to resemble Shoelace, they have a pretty readable presentation. The sample is also fixed. I think it can be refined a bit further. Maybe we should replace the Validation story with a types story? Any thoughts?

I await new feedback. @solid-design-system/current-sds-team

@coraliefeil do you need to document this to Figma too?
Thx for the comment, do we need to create also a follow up ticket for that? @mariohamann
I would leave it as it is, but we can also create a follow-up ticket (as I mentioned in Point 2), remove it here for now, and specify in the follow-up ticket that it needs to be added back. However, I find it unnecessary, so I suggest we leave it in.
For me it looks how it should!
I'm not sure if we should postpone this discussion until we have a "proper" datepicker. Documentation will likely be crucial there so that the user understands what they can do with and Flatpickr .
I find it understandable, and I'm not sure how it could be explained in more detail.
can't we do both?

coraliefeil · 2023-11-10T11:34:18Z

All adjustments while coding are documented in the figma branch
I opened up a ticket tackling color tokens icon-fill / text - foreground #155
– not design related
Fine ...
We’ll talk next week. Postponing sounds good.
We could add an inline notification or just a text on top telling the user to fill out all required fields to see valid states
–

mariohamann

From what I see from code there are just some small issues to resolve. If I missed a comment or something where you need feedback, please give ma hint via chat. :) (Will have a look on the comments in the PR now.)

packages/components/src/components/input/input.ts

packages/components/src/components/input/input.stories.ts

mariohamann · 2023-11-13T09:22:13Z

Okay, from what I read everything from a concept perspective is resolved. So if you can implemented the suggested changes I think we're good to go!

Props for the stories. This is really extensive and helpful.

mariohamann · 2023-11-13T09:57:54Z

Oh, one last thing before I forget it: Please add transitions to the colors especially on hover, but maybe even focus and error. We try to avoid hard color changes.

abudd1094 · 2023-11-13T10:24:50Z

Oh, one last thing before I forget it: Please add transitions to the colors especially on hover, but maybe even focus and error. We try to avoid hard color changes.

I've added transition-all to the base and border parts, adding it to input yields some strange behaviors (flickering of border around native input). Give a shout if it is still lacking

mariohamann

Really appreciate your effort here. 🙏🏻

# [@solid-design-system/components-v1.24.0](components/1.23.0...components/1.24.0) (2023-11-13) ### Features * ✨ add sd-input ([#515](#515)) ([327dcd0](327dcd0)), closes [#255](#255)

yoezlem and others added 30 commits August 9, 2023 11:50

feat: add radio

ef33d29

Merge branch 'main' into feat/sd-radio

a8fb8fd

feat: add group-hover

57b2b3f

feat: get rid of unused and wrong styles

a971d70

feat: init sd-radio-group

5b72415

fix: add invalid to radio-button

c5896fe

feat: removed shoelace component

5320534

feat: removed logs

ca4e31e

feat: added all important controller and functions

ffaad73

feat: added Part Story

f589500

feat: changed version and edit parts

d9c4026

feat: changed version and parts

69e4f9b

feat: Edit story

4d34736

chore(release/components): 1.13.0 [skip actions]

60649c4

# [@solid-design-system/components-v1.13.0](components/1.12.0...components/1.13.0) (2023-09-20) ### Features * ✨ add sd-table and sd-table-cell ([#379](#379)) ([ef7c5a9](ef7c5a9))

fix: 🤔changed paragraph default size to text-base (#419)

bd744bc

chore(release/components): 1.13.1 [skip actions]

d9c6738

# [@solid-design-system/components-v1.13.1](components/1.13.0...components/1.13.1) (2023-09-21) ### Bug Fixes * 🤔changed paragraph default size to text-base ([#419](#419)) ([40e6605](40e6605))

feat: ✨ quote pattern (#405)

f36da3f

Author: yoezlem <[email protected]> Co-authored-by: mariohamann <[email protected]>

chore(release/components): 1.14.0 [skip actions]

7ee4453

# [@solid-design-system/components-v1.14.0](components/1.13.1...components/1.14.0) (2023-09-21) ### Features * ✨ quote pattern ([#405](#405)) ([f8bc6d8](f8bc6d8))

docs: fix docs

1342610

docs: revert fix docs

8295aaf

This reverts commit 9ab2401.

fix: 🐛 fix CEM loading in Storybook (#427)

fa8ffaa

chore(release/components): 1.14.2 [skip actions]

a2dc0a9

# [@solid-design-system/components-v1.14.2](components/1.14.1...components/1.14.2) (2023-09-25) ### Bug Fixes * 🐛 fix CEM loading in Storybook ([#427](#427)) ([de7368f](de7368f))

fix: 🤔 make styles available on CDN (#411)

fab249e

chore(release/components): 1.14.3 [skip actions]

fdbc03d

# [@solid-design-system/components-v1.14.3](components/1.14.2...components/1.14.3) (2023-09-25) ### Bug Fixes * 🤔 make styles available on CDN ([#411](#411)) ([8048e94](8048e94))

fix: use own customElement decorator

6cd0149

chore: add rule to prevent import custom-element import from lit

7e77bb8

chore(release/components): 1.14.4 [skip actions]

67508b9

# [@solid-design-system/components-v1.14.4](components/1.14.3...components/1.14.4) (2023-09-25) ### Bug Fixes * use own customElement decorator ([6a2787f](6a2787f))

coraliefeil removed their assignment Nov 9, 2023

fix: UI Tests comments resolved

c6ac2b4

abudd1094 assigned coraliefeil Nov 9, 2023

coraliefeil removed their assignment Nov 9, 2023

Merge branch 'main' into feat/sd-input

220100c

karlbaumhauer removed their assignment Nov 10, 2023

DanielHargesheimer removed their assignment Nov 10, 2023

feat: added Types story

835b265

mariohamann reviewed Nov 13, 2023

View reviewed changes

mariohamann removed their assignment Nov 13, 2023

Merge branch 'main' into feat/sd-input

818fee1

fix: Mario comments resolved

6f91bc0

abudd1094 and others added 4 commits November 13, 2023 11:25

fix: added transition classes

4d55cb0

chore: re-run pipeline

81433af

Merge branch 'main' into feat/sd-input

bd2c390

fix input styles

6304f13

mariohamann approved these changes Nov 13, 2023

View reviewed changes

abudd1094 merged commit 327dcd0 into main Nov 13, 2023
8 checks passed

abudd1094 deleted the feat/sd-input branch November 13, 2023 14:39

yoezlem added 🔧 code needs changes in code CL-migration All components which need to be migrated from Component Library labels Jan 16, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: ✨ add sd-input #515

feat: ✨ add sd-input #515

abudd1094 commented Nov 2, 2023 •

edited

Loading

coraliefeil commented Nov 9, 2023

coraliefeil commented Nov 9, 2023 •

edited

Loading

karlbaumhauer commented Nov 10, 2023

yoezlem commented Nov 10, 2023

coraliefeil commented Nov 10, 2023

mariohamann left a comment

mariohamann commented Nov 13, 2023 •

edited

Loading

mariohamann commented Nov 13, 2023

abudd1094 commented Nov 13, 2023

mariohamann left a comment

feat: ✨ add sd-input #515

feat: ✨ add sd-input #515

Conversation

abudd1094 commented Nov 2, 2023 • edited Loading

Description:

Definition of Reviewable:

coraliefeil commented Nov 9, 2023

coraliefeil commented Nov 9, 2023 • edited Loading

karlbaumhauer commented Nov 10, 2023

yoezlem commented Nov 10, 2023

coraliefeil commented Nov 10, 2023

mariohamann left a comment

Choose a reason for hiding this comment

mariohamann commented Nov 13, 2023 • edited Loading

mariohamann commented Nov 13, 2023

abudd1094 commented Nov 13, 2023

mariohamann left a comment

Choose a reason for hiding this comment

abudd1094 commented Nov 2, 2023 •

edited

Loading

coraliefeil commented Nov 9, 2023 •

edited

Loading

mariohamann commented Nov 13, 2023 •

edited

Loading