Improvements

.changeset/humble-beds-jump.md

@@ -0,0 +1,8 @@
+---
+"@blockle/blocks-theme-momotaro": patch
+"@blockle/blocks-react": patch
+"@blockle/blocks-reset": patch
+"@blockle/blocks": patch
+---
+
+Introducing grow for TextArea and css reset improvements

.github/workflows/release.yml

@@ -26,8 +26,6 @@ jobs:
 
       - name: Install Dependencies
         run: npm install
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_READ_TOKEN }}
 
       - name: Create Release Pull Request or Publish to npm
         id: changesets

packages/react/src/components/display/Icon/IconMask.css.ts

@@ -5,8 +5,10 @@ export const iconMask = style({
   '@layer': {
     [layers.molecule]: {
       aspectRatio: '1 / 1',
-      maskSize: '100%',
       backgroundColor: 'currentcolor',
+      maskPosition: 'center',
+      maskRepeat: 'no-repeat',
+      maskSize: '100%',
     },
   },
 });

packages/react/src/components/display/Icon/IconMask.stories.tsx

@@ -9,15 +9,15 @@ function getIconUrl(name: HeroIconName): string {
 const meta = preview.meta({
   title: 'Display/IconMask',
   component: IconMask,
+  argTypes: {
+    src: {
+      control: 'text',
+    },
+  },
 });
 
 export const Default = meta.story({
   args: {
     src: getIconUrl('academic-cap'),
   },
-  argTypes: {
-    src: {
-      control: 'text',
-    },
-  },
 });

packages/react/src/components/display/Icon/IconMask.test.tsx

@@ -16,7 +16,7 @@ describe('IconMask', () => {
     const { container } = render(<IconMask src="test-icon.svg" />);
     const span = container.querySelector('span');
 
-    expect(span).toHaveStyle({ mask: 'url(test-icon.svg) no-repeat center' });
+    expect(span).toHaveStyle({ maskImage: 'url(test-icon.svg)' });
   });
 
   it('applies custom className', () => {
@@ -45,14 +45,13 @@ describe('IconMask', () => {
   });
 
   it('merges custom style with mask style', () => {
-    const customStyle = { opacity: 0.5 };
     const { container } = render(
-      <IconMask src="icon.svg" style={customStyle} />,
+      <IconMask src="icon.svg" style={{ opacity: 0.5 }} />,
     );
     const span = container.querySelector('span');
 
     expect(span).toHaveStyle({
-      mask: 'url(icon.svg) no-repeat center',
+      maskImage: 'url(icon.svg)',
       opacity: 0.5,
     });
   });

packages/react/src/components/display/Icon/IconMask.tsx

@@ -28,7 +28,7 @@ export const IconMask: React.FC<IconMaskProps> = ({
   src,
   size,
   style,
-  display = 'inline-block',
+  display = 'block',
   ...restProps
 }) => {
   const [atomsProps, otherProps] = getAtomsAndProps(restProps);
@@ -46,7 +46,7 @@ export const IconMask: React.FC<IconMaskProps> = ({
         className,
       )}
       style={{
-        mask: `url(${src}) no-repeat center`,
+        maskImage: `url(${src})`,
         ...style,
       }}
       {...otherProps}

packages/react/src/components/form/Textarea/Textarea.css.ts

@@ -8,7 +8,10 @@ export const textarea = style({
       minHeight: 'inherit',
       resize: 'none',
       display: 'block',
-      fieldSizing: 'content',
     },
   },
 });
+
+export const fieldSizingEnabled = style({
+  fieldSizing: 'content',
+});

packages/react/src/components/form/Textarea/Textarea.test.tsx

@@ -1,6 +1,7 @@
 import { describe, expect, it } from 'vitest';
 
 import { render, screen } from '../../../testUtils/testUtils.js';
+import * as styles from './Textarea.css.js';
 import { Textarea } from './Textarea.js';
 
 describe('Textarea', () => {
@@ -14,4 +15,32 @@ describe('Textarea', () => {
 
     expect(screen.getByLabelText('Textarea label')).toBeInTheDocument();
   });
+
+  it('should render with provided value', () => {
+    render(<Textarea value="Test content" />);
+
+    expect(screen.getByRole('textbox')).toHaveValue('Test content');
+  });
+
+  it('should apply grow class when grow prop is true', () => {
+    render(<Textarea grow />);
+
+    const textarea = screen.getByRole('textbox');
+    expect(textarea).toHaveClass(styles.fieldSizingEnabled);
+  });
+
+  it('should not apply grow class when grow prop is false', () => {
+    render(<Textarea grow={false} />);
+
+    const textarea = screen.getByRole('textbox');
+    expect(textarea).not.toHaveClass(styles.fieldSizingEnabled);
+  });
+
+  it('should forward additional props to textarea element', () => {
+    render(<Textarea placeholder="Enter text" disabled />);
+
+    const textarea = screen.getByRole('textbox');
+    expect(textarea).toHaveAttribute('placeholder', 'Enter text');
+    expect(textarea).toBeDisabled();
+  });
 });

packages/react/src/components/form/Textarea/Textarea.tsx

@@ -8,13 +8,17 @@ import * as styles from './Textarea.css.js';
 
 export type TextareaProps = {
   value?: string;
-  ref?: React.RefObject<HTMLTextAreaElement>;
+  /**
+   * If true, the textarea will grow in height to fit its content.
+   */
+  grow?: boolean;
   // helperText: React.ReactNode;
 } & HTMLElementProps<HTMLTextAreaElement>;
 
 export const Textarea: React.FC<TextareaProps> = ({
   ref,
   value,
+  grow,
   ...restProps
 }) => {
   const containerClassName = useComponentStyles(
@@ -29,7 +33,11 @@ export const Textarea: React.FC<TextareaProps> = ({
       <textarea
         ref={ref}
         value={value}
-        className={classnames(styles.textarea, inputClassName)}
+        className={classnames(
+          styles.textarea,
+          grow && styles.fieldSizingEnabled,
+          inputClassName,
+        )}
         {...restProps}
       />
     </Box>

packages/reset/src/reset.css.ts

@@ -1,74 +1,61 @@
 import { layers } from '@blockle/blocks-core';
 import { globalStyle } from '@vanilla-extract/css';
 
-globalStyle(':where(*, *::before, *::after)', {
-  boxSizing: 'inherit',
-  WebkitTapHighlightColor: 'transparent',
-});
-
-globalStyle(':where(html)', {
-  boxSizing: 'border-box',
+globalStyle(':where(*,:after,:before,::backdrop)', {
   '@layer': {
     [layers.reset]: {
-      lineHeight: 1.5,
-      WebkitFontSmoothing: 'antialiased',
+      boxSizing: 'inherit',
+      border: '0 none',
+      margin: 0,
+      padding: 0,
     },
   },
 });
 
-globalStyle(':where(body)', {
+globalStyle(':where(html,:host)', {
+  boxSizing: 'border-box',
   '@layer': {
     [layers.reset]: {
-      margin: 0,
-      padding: 0,
-      fontFamily: 'Calibri, sans-serif',
+      lineHeight: 1.5,
+      WebkitFontSmoothing: 'antialiased',
+      WebkitTapHighlightColor: 'transparent',
     },
   },
 });
 
-globalStyle(':where(button, input, optgroup, select, textarea)', {
+globalStyle(':where(button,input,select,optgroup,textarea)', {
   '@layer': {
     [layers.reset]: {
       fontFamily: 'inherit',
       fontSize: '100%',
       lineHeight: 'inherit',
-      margin: 0,
-      padding: 0,
+      color: 'inherit',
     },
   },
 });
 
-globalStyle(':where(p, ul, ol, pre, blockquote)', {
+globalStyle(':where(pre)', {
   '@layer': {
     [layers.reset]: {
-      margin: 0,
-      padding: 0,
+      whiteSpace: 'pre-wrap',
     },
   },
 });
 
-globalStyle(':where(h1, h2, h3, h4, h5, h6)', {
+globalStyle(':where(h1,h2,h3,h4,h5,h6)', {
   '@layer': {
     [layers.reset]: {
-      margin: 0,
-      padding: 0,
       fontSize: 'inherit',
+      fontWeight: 'inherit',
     },
   },
 });
 
-globalStyle(':where(pre)', {
-  '@layer': {
-    [layers.reset]: {
-      whiteSpace: 'pre-wrap',
-    },
-  },
-});
-
-globalStyle(':where([popover])', {
+globalStyle(':where(a)', {
   '@layer': {
     [layers.reset]: {
-      border: 'unset',
+      color: 'inherit',
+      textDecoration: 'inherit',
     },
   },
 });

packages/theme-momotaro/src/components/icon.css.ts

@@ -10,19 +10,19 @@ export const icon: ThemeComponentsStyles['icon'] = makeComponentTheme('icon', {
   variants: {
     size: {
       xsmall: style({
-        minWidth: pixelsToRem(12),
+        width: pixelsToRem(12),
       }),
       small: style({
-        minWidth: pixelsToRem(16),
+        width: pixelsToRem(16),
       }),
       medium: style({
-        minWidth: pixelsToRem(32),
+        width: pixelsToRem(32),
       }),
       large: style({
-        minWidth: pixelsToRem(48),
+        width: pixelsToRem(48),
       }),
       xlarge: style({
-        minWidth: pixelsToRem(64),
+        width: pixelsToRem(64),
       }),
     },
   },