Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[dev-v5] Add FluentTextArea component #3341

Merged
merged 8 commits into from
Feb 14, 2025
Merged

[dev-v5] Add FluentTextArea component #3341

merged 8 commits into from
Feb 14, 2025

Conversation

AClerbois
Copy link
Contributor

@AClerbois AClerbois commented Feb 11, 2025 •
edited
Loading

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 AClerbois changed the title Add FluentTextArea component with docs and tests [dev-v5] Add FluentTextArea component with docs and tests Feb 11, 2025
@AClerbois AClerbois changed the title [dev-v5] Add FluentTextArea component with docs and tests [dev-v5] fluent-text-area web component Feb 11, 2025
@AClerbois AClerbois changed the title [dev-v5] fluent-text-area web component [dev-v5] fluent-text-area Web component Feb 11, 2025
@AClerbois
Copy link
Contributor Author

Topic need to be discussed with @dvoituron :

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

@dvoituron
Copy link
Collaborator

Topic need to be discussed with @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
dvoituron requested changes Feb 11, 2025
View reviewed changes
Copy link
Collaborator

@dvoituron dvoituron left a comment

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?

tests/Core/Components.Tests.csproj Outdated Show resolved Hide resolved
src/Core/Components/TextArea/FluentTextArea.razor.cs Outdated Show resolved Hide resolved
@AClerbois
Copy link
Contributor Author

AClerbois commented Feb 11, 2025 •
edited
Loading

@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 AClerbois force-pushed the users/aclerbois/dev-v5/fluent-textarea branch from 21d21a7 to eb990db Compare February 11, 2025 20:33
@AClerbois AClerbois requested a review from dvoituron February 12, 2025 08:02
@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
dvoituron requested changes Feb 12, 2025
View reviewed changes
...mo/FluentUI.Demo.Client/Documentation/Components/TextArea/Examples/TextAreaAppearances.razor Outdated Show resolved Hide resolved
...mo/FluentUI.Demo.Client/Documentation/Components/TextArea/Examples/TextAreaAppearances.razor Outdated Show resolved Hide resolved
...mo/FluentUI.Demo.Client/Documentation/Components/TextArea/Examples/TextAreaAppearances.razor Outdated Show resolved Hide resolved
...s/Demo/FluentUI.Demo.Client/Documentation/Components/TextArea/Examples/TextAreaResizes.razor Outdated Show resolved Hide resolved
...Demo/FluentUI.Demo.Client/Documentation/Components/TextArea/Examples/TextAreaImmediate.razor Outdated Show resolved Hide resolved
src/Core/Components/TextArea/FluentTextArea.razor.cs Outdated Show resolved Hide resolved
...ples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Migration/MigrationFluentTextArea.md Outdated Show resolved Hide resolved
...ples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Migration/MigrationFluentTextArea.md Outdated Show resolved Hide resolved
src/Core/Components/TextArea/FluentTextArea.razor.cs Outdated Show resolved Hide resolved
@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 dvoituron changed the title [dev-v5] fluent-text-area Web component [dev-v5] Add FluentTextArea component Feb 12, 2025
@AClerbois AClerbois requested a review from dvoituron February 12, 2025 15:27
@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 AClerbois requested a review from dvoituron February 12, 2025 15:37
@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 AClerbois marked this pull request as ready for review February 12, 2025 17:40
@AClerbois AClerbois requested a review from vnbaaij as a code owner 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
vnbaaij requested changes Feb 14, 2025
View reviewed changes
...mo/FluentUI.Demo.Client/Documentation/Components/TextArea/Examples/TextAreaAppearances.razor Outdated Show resolved Hide resolved
...s/Demo/FluentUI.Demo.Client/Documentation/Components/TextArea/Examples/TextAreaResizes.razor Outdated Show resolved Hide resolved
examples/Demo/FluentUI.Demo.Client/Documentation/Components/TextArea/FluentTextArea.md Outdated Show resolved Hide resolved
examples/Demo/FluentUI.Demo.Client/Documentation/Components/TextArea/FluentTextArea.md Outdated Show resolved Hide resolved
examples/Demo/FluentUI.Demo.Client/Documentation/Components/TextArea/FluentTextArea.md Outdated Show resolved Hide resolved
examples/Demo/FluentUI.Demo.Client/Documentation/Components/TextArea/FluentTextArea.md Outdated Show resolved Hide resolved
@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 AClerbois requested a review from vnbaaij February 14, 2025 10:18
@AClerbois
Copy link
Contributor Author

@vnbaaij Thank you for your review. have applied your requested changes.

@dvoituron dvoituron merged commit 85fe71c into microsoft:dev-v5 Feb 14, 2025
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@vnbaaij vnbaaij vnbaaij approved these changes

@dvoituron dvoituron dvoituron approved these changes

@dvoituron-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