[TextField] Add support for additional field types

[svrooij]

Fixed #2970

Pull Request

📖 Description

Add support for html color picker

🎫 Issues

• feat: add other input types to FluentTextField (color) #2970

👩‍💻 Reviewer Notes

📑 Test Plan

✅ Checklist

General

• I have added tests for my changes.
• I have tested my changes.
• I have updated the project documentation to reflect my changes.
• I have read the CONTRIBUTING documentation and followed the standards for this project.

Component-specific

• I have added a new component
• I have added Unit Tests for my new component
• I have modified an existing component
• I have validated the Unit Tests for an existing component

⏭ Next Steps

[dvoituron]

It's certainly a good idea that we haven't worked on yet (although we don't know why 😉).

To generalize this change, could you also add these types?
This would make it possible to have text types that don't currently exist in our Lib, while staying with the FluentUI style.

• Color
• Number
• Search
• Password

[svrooij]

It's certainly a good idea that we haven't worked on yet (although we don't know why 😉).

To generalize this change, could you also add these types? This would make it possible to have text types that don't currently exist in our Lib, while staying with the FluentUI style.

• Color
• Number
• Search
• Password

@dvoituron I added the Color in the PR, for Number you already have the number input. The Password value is already there and Search does not do anything else (in my browser).

What about the date related fields? Month, Date, DateTimeLocal, Week?

[dvoituron]

For Number you already have the number input. The Password value is already there and Search does not do anything else (in my browser).
What about the date related fields? Month, Date, DateTimeLocal, Week?

• Some people have a problem with FluentNumberField encompassing the fluent-number-field element. This could be an alternative for them.
• The same applies to the password, which would use the ‘default’ HTML input element.
• Search will be detected by the accessibility features of browsers as a ‘search’ element: Enter sends the value to the server and a cross is displayed in Edge and Chrome when the component is active.
• Date components already exist in FluentUI Lib and we never received issues about that :-)

[svrooij]

Will add the number and the search.