Improvements

[Saartje87]

This pull request introduces several improvements and fixes to the IconMask and Textarea components, as well as updates to the global CSS reset and icon theme styles. The most significant changes include enhanced support for auto-growing textareas, improvements to icon masking and styling, and a more robust and modern CSS reset.

Component Enhancements and Bug Fixes:

• Textarea Component:

  • Added a grow prop to enable auto-growing behavior for the textarea. The corresponding class is conditionally applied, and comprehensive tests were added to ensure correct behavior. [1] [2] [3] [4]
  • Updated tests to verify value rendering, class application based on the grow prop, and prop forwarding.

• IconMask Component:

  • Changed the default display prop from 'inline-block' to 'block' for better layout consistency.
  • Updated the inline style to use maskImage instead of the shorthand mask property, improving browser compatibility and clarity. Associated tests were updated accordingly. [1] [2] [3]
  • Improved the CSS for icon masking by explicitly setting maskPosition and maskRepeat for more predictable rendering.
  • Refactored storybook controls to define argTypes at the meta level instead of per-story, streamlining configuration.

Styling and Theming Updates:

• CSS Reset:

  • Overhauled the global CSS reset to provide more robust baseline styles, including improved box-sizing, removal of default margins and paddings, and normalization of font and color inheritance. Also, improved selector targeting and added resets for links and headings.

• Icon Theme:

  • Updated the icon size variants to use width instead of minWidth, ensuring icons have consistent sizing across variants.

[changeset-bot]

🦋 Changeset detected

Latest commit: b219870

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@blockle/blocks-theme-momotaro	Patch
@blockle/blocks-react	Patch
@blockle/blocks-reset	Patch
@blockle/blocks	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[Copilot]

Pull request overview

This PR introduces enhancements to the IconMask and Textarea components, updates the icon theme styles, and modernizes the global CSS reset. The changes improve component flexibility, browser compatibility, and provide more robust baseline styles.

Changes:

• Added auto-grow functionality to the Textarea component via a new grow prop with comprehensive test coverage
• Updated IconMask component to use maskImage instead of shorthand mask property and changed default display from inline-block to block
• Modified icon theme to use width instead of minWidth for more predictable sizing with aspect ratio
• Overhauled global CSS reset with improved baseline styles, better selector targeting, and additional resets for headings and links

Reviewed changes

Copilot reviewed 11 out of 11 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
packages/theme-momotaro/src/components/icon.css.ts	Changed icon size variants from minWidth to width for consistent sizing
packages/reset/src/reset.css.ts	Comprehensive update to global CSS reset with improved selectors and additional resets
packages/react/src/components/form/Textarea/Textarea.tsx	Added grow prop to enable auto-growing textarea behavior
packages/react/src/components/form/Textarea/Textarea.test.tsx	Added comprehensive tests for the new grow prop and value rendering
packages/react/src/components/form/Textarea/Textarea.css.ts	Extracted fieldSizing into separate class for conditional application
packages/react/src/components/display/Icon/IconMask.tsx	Changed default display to block and updated to use maskImage property
packages/react/src/components/display/Icon/IconMask.test.tsx	Updated tests to verify maskImage instead of mask shorthand
packages/react/src/components/display/Icon/IconMask.stories.tsx	Refactored to define argTypes at meta level for better organization
packages/react/src/components/display/Icon/IconMask.css.ts	Added explicit maskPosition and maskRepeat for predictable rendering

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.