Skip to content

[dev-v5] Add FluentTextArea component - #3341

Merged
Denis Voituron (dvoituron) merged 8 commits into
microsoft:dev-v5from
AClerbois:users/aclerbois/dev-v5/fluent-textarea
Feb 14, 2025
Merged

[dev-v5] Add FluentTextArea component#3341
Denis Voituron (dvoituron) merged 8 commits into
microsoft:dev-v5from
AClerbois:users/aclerbois/dev-v5/fluent-textarea

Conversation

@AClerbois

@AClerbois Adrien Clerbois (AClerbois) commented Feb 11, 2025 •
edited
Loading

Copy link
Copy Markdown
Collaborator

Pull Request

Add Textarea component

📖 Description

This pull request introduces a new FluentTextArea component and updates related documentation and tests. The changes primarily focus on adding new properties and functionalities to the FluentTextArea component, updating the documentation to reflect these changes, and adding tests to ensure the new functionalities work as expected.

New FluentTextArea Component:

🎫 Issues

👩‍💻 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

@AClerbois Adrien Clerbois (AClerbois) changed the title Add FluentTextArea component with docs and tests [dev-v5] Add FluentTextArea component with docs and tests Feb 11, 2025
@AClerbois Adrien Clerbois (AClerbois) changed the title [dev-v5] Add FluentTextArea component with docs and tests [dev-v5] fluent-text-area web component Feb 11, 2025
@AClerbois Adrien Clerbois (AClerbois) changed the title [dev-v5] fluent-text-area web component [dev-v5] fluent-text-area Web component Feb 11, 2025
@AClerbois

Adrien Clerbois (AClerbois) commented Feb 11, 2025

Copy link
Copy Markdown
Collaborator Author

Topic need to be discussed with Denis Voituron (@dvoituron) :

  • Rows and Cols are removed from the vNext
  • The block feature is not working with the FluentLabel

@dvoituron

Denis Voituron (dvoituron) commented Feb 11, 2025

Copy link
Copy Markdown
Collaborator

Topic need to be discussed with Denis Voituron (@dvoituron) :

  • Rows and Cols are removed from the vNext
  • The block feature is not working with the FluentLabel

We can do that :-)

  • Rows and Cols no longer exist in React: https://react.fluentui.dev/?path=/docs/components-textarea--docs. I propose to remove it and to replace width Width´ and Height` CSS styles. But not easy to apply these styles to the sub-item.

    <fluent-textarea class="my-class">Hello World</fluent-textarea>
<style>.my-class::part(root) { width: 300px; height: 100px; }</style>

    I will explain how to do that for a single component.

  • To discuss

dvoituron
Denis Voituron (dvoituron) requested changes Feb 11, 2025
View reviewed changes

@dvoituron Denis Voituron (dvoituron) left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you add a PR description?

Comment thread tests/Core/Components.Tests.csproj Outdated
Comment thread src/Core/Components/TextArea/FluentTextArea.razor.cs Outdated
@AClerbois

Adrien Clerbois (AClerbois) commented Feb 11, 2025 •
edited
Loading

Copy link
Copy Markdown
Collaborator Author

Denis Voituron (@dvoituron) your comments have been resolved

@AClerbois
Add FluentTextArea component with docs and tests
6e69586 
Introduced a new `FluentTextArea` component for multi-line text input with various appearances, sizes, and resize options. Added features include immediate binding and different states (Required, Disabled, ReadOnly). Comprehensive documentation and unit tests are provided.

- Added `ToTextAreaAppearance` method in `FluentInputAppearanceExtensions.cs`.
- Updated `Components.Tests.csproj` to include new test files.
- Created `FluentTextArea.md` for component documentation.
- Added Razor components to demonstrate appearances, sizes, resize options, immediate binding, and states.
- Created `FluentTextArea.razor` and `FluentTextArea.razor.cs` for component definition and logic.
- Added enums `TextAreaAppearance`, `TextAreaResize`, and `TextAreaSize`.
- Added test files for verifying default and label template rendering.
- Updated `FluentTextAreaTests.razor` with various unit tests.
@AClerbois
Make FluentTextArea.Appearance nullable
eb990db 
Updated FluentTextArea.Appearance to be nullable, removing the default value. Adjusted related test files to reflect this change by removing the `appearance="outline"` attribute. Cleaned up `Components.Tests.csproj` by removing unnecessary `<None>` items. Updated multiple test verification files to align with the new nullable property.
@AClerbois
Refactor TextArea components and update documentation
75b3f93 
Refactored `TextAreaAppearances.razor` to use `FluentSelect` and `FluentCheckbox` components, and renamed `Value` to `value`. Introduced new state variables: `appearance`, `size`, and `displayShadow`. Updated `TextAreaImmediate.razor` and `TextAreaResizes.razor` for consistency and new state variables. Updated `FluentTextArea.md` to include known restrictions. Removed `Block` parameter from `FluentTextArea.razor` and related files.
dvoituron
Denis Voituron (dvoituron) requested changes Feb 12, 2025
View reviewed changes
Comment thread ...mo/FluentUI.Demo.Client/Documentation/Components/TextArea/Examples/TextAreaAppearances.razor Outdated
Comment thread ...mo/FluentUI.Demo.Client/Documentation/Components/TextArea/Examples/TextAreaAppearances.razor Outdated
Comment thread ...mo/FluentUI.Demo.Client/Documentation/Components/TextArea/Examples/TextAreaAppearances.razor Outdated
Comment thread ...s/Demo/FluentUI.Demo.Client/Documentation/Components/TextArea/Examples/TextAreaResizes.razor Outdated
Comment thread ...Demo/FluentUI.Demo.Client/Documentation/Components/TextArea/Examples/TextAreaImmediate.razor Outdated
Comment thread src/Core/Components/TextArea/FluentTextArea.razor.cs Outdated
Comment thread ...ples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Migration/MigrationFluentTextArea.md Outdated
Comment thread ...ples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Migration/MigrationFluentTextArea.md Outdated
Comment thread src/Core/Components/TextArea/FluentTextArea.razor.cs Outdated
@AClerbois
Update FluentTextArea and related components
643d724 
- Replace `Display shadow` checkbox with `Spell check` in `TextAreaAppearances.razor`
- Replace `FluentTextInput` with `FluentTextArea` in `TextAreaImmediate.razor`
- Adjust indentation in `TextAreaResizes.razor` for readability
- Correct spelling in `MigrationFluentTextArea.md` and add new enum values
- Correct attribute spelling and conditional setting in `FluentTextArea.razor`
- Update `FluentTextArea.razor.cs` to remove `DisplayShadow` and add `SpeelCheckValue`
- Add new enum values in `TextAreaAppearance.cs`
- Add and remove test cases in `FluentTextAreaTests.razor`
@dvoituron Denis Voituron (dvoituron) changed the title [dev-v5] fluent-text-area Web component [dev-v5] Add FluentTextArea component Feb 12, 2025
dvoituron
Denis Voituron (dvoituron) requested changes Feb 12, 2025
View reviewed changes
Comment thread src/Core/Components/TextArea/FluentTextArea.razor.cs Outdated
Comment thread ...mo/FluentUI.Demo.Client/Documentation/Components/TextArea/Examples/TextAreaAppearances.razor Outdated
@AClerbois
Fix typos and reorder attributes in TextArea components
bd0517e 
Corrected attribute order in TextAreaAppearances.razor.
Fixed typos in FluentTextArea.razor and FluentTextArea.razor.cs.
Reordered and redefined properties in FluentTextArea.razor.cs.
@AClerbois
Update FluentStack orientation and add new properties
ed060c4 
- Changed FluentStack orientation from vertical to horizontal
- Added HorizontalGap="12px" and VerticalAlignment="Bottom" to FluentStack
- Introduced Size property to FluentTextArea
@AClerbois
Adrien Clerbois (AClerbois) marked this pull request as ready for review February 12, 2025 17:40
@AClerbois
Fix property names and update spelling dictionary
4d45d19 
Corrected property names in FluentTextArea.razor and FluentTextArea.razor.cs. Updated spelling.dic with new terms.
vnbaaij
Vincent Baaij (vnbaaij) requested changes Feb 14, 2025
View reviewed changes
Comment thread ...mo/FluentUI.Demo.Client/Documentation/Components/TextArea/Examples/TextAreaAppearances.razor Outdated
Comment thread ...s/Demo/FluentUI.Demo.Client/Documentation/Components/TextArea/Examples/TextAreaResizes.razor Outdated
Comment thread examples/Demo/FluentUI.Demo.Client/Documentation/Components/TextArea/FluentTextArea.md Outdated
Comment thread examples/Demo/FluentUI.Demo.Client/Documentation/Components/TextArea/FluentTextArea.md Outdated
Comment thread examples/Demo/FluentUI.Demo.Client/Documentation/Components/TextArea/FluentTextArea.md Outdated
Comment thread examples/Demo/FluentUI.Demo.Client/Documentation/Components/TextArea/FluentTextArea.md Outdated
@AClerbois
Simplify enum binding and update FluentTextArea docs
94771e4 
Simplified enumeration binding in TextAreaAppearances.razor and TextAreaResizes.razor by removing unnecessary type casting. Updated FluentTextArea.md to clarify the component's purpose, fixed typos, and improved explanations of properties.
@AClerbois

Adrien Clerbois (AClerbois) commented Feb 14, 2025

Copy link
Copy Markdown
Collaborator Author

Vincent Baaij (@vnbaaij) Thank you for your review. have applied your requested changes.

@dvoituron
Denis Voituron (dvoituron) merged commit 85fe71c into microsoft:dev-v5 Feb 14, 2025
@AClerbois
Adrien Clerbois (AClerbois) deleted the users/aclerbois/dev-v5/fluent-textarea branch February 18, 2025 15:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@vnbaaij Vincent Baaij (vnbaaij) vnbaaij approved these changes
@dvoituron Denis Voituron (dvoituron) dvoituron approved these changes
@dvoituron-msft Denis Voituron (MSFT) (dvoituron-msft) dvoituron-msft approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@AClerbois @dvoituron @vnbaaij @dvoituron-msft