diff --git a/.changeset/humble-beds-jump.md b/.changeset/humble-beds-jump.md
new file mode 100644
index 00000000..19a9cb7d
--- /dev/null
+++ b/.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
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 09af9e09..2cc32834 100644
--- a/.github/workflows/release.yml
+++ b/.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
diff --git a/packages/react/src/components/display/Icon/IconMask.css.ts b/packages/react/src/components/display/Icon/IconMask.css.ts
index 699265a5..f8df5ed8 100644
--- a/packages/react/src/components/display/Icon/IconMask.css.ts
+++ b/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%',
},
},
});
diff --git a/packages/react/src/components/display/Icon/IconMask.stories.tsx b/packages/react/src/components/display/Icon/IconMask.stories.tsx
index a3aa0523..e3de1418 100644
--- a/packages/react/src/components/display/Icon/IconMask.stories.tsx
+++ b/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',
- },
- },
});
diff --git a/packages/react/src/components/display/Icon/IconMask.test.tsx b/packages/react/src/components/display/Icon/IconMask.test.tsx
index e4172e6a..3d0c4736 100644
--- a/packages/react/src/components/display/Icon/IconMask.test.tsx
+++ b/packages/react/src/components/display/Icon/IconMask.test.tsx
@@ -16,7 +16,7 @@ describe('IconMask', () => {
const { container } = render();
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(
- ,
+ ,
);
const span = container.querySelector('span');
expect(span).toHaveStyle({
- mask: 'url(icon.svg) no-repeat center',
+ maskImage: 'url(icon.svg)',
opacity: 0.5,
});
});
diff --git a/packages/react/src/components/display/Icon/IconMask.tsx b/packages/react/src/components/display/Icon/IconMask.tsx
index f4910270..29693edc 100644
--- a/packages/react/src/components/display/Icon/IconMask.tsx
+++ b/packages/react/src/components/display/Icon/IconMask.tsx
@@ -28,7 +28,7 @@ export const IconMask: React.FC = ({
src,
size,
style,
- display = 'inline-block',
+ display = 'block',
...restProps
}) => {
const [atomsProps, otherProps] = getAtomsAndProps(restProps);
@@ -46,7 +46,7 @@ export const IconMask: React.FC = ({
className,
)}
style={{
- mask: `url(${src}) no-repeat center`,
+ maskImage: `url(${src})`,
...style,
}}
{...otherProps}
diff --git a/packages/react/src/components/form/Textarea/Textarea.css.ts b/packages/react/src/components/form/Textarea/Textarea.css.ts
index 667f0198..2d260053 100644
--- a/packages/react/src/components/form/Textarea/Textarea.css.ts
+++ b/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',
+});
diff --git a/packages/react/src/components/form/Textarea/Textarea.test.tsx b/packages/react/src/components/form/Textarea/Textarea.test.tsx
index 001eeff0..9faee000 100644
--- a/packages/react/src/components/form/Textarea/Textarea.test.tsx
+++ b/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();
+
+ expect(screen.getByRole('textbox')).toHaveValue('Test content');
+ });
+
+ it('should apply grow class when grow prop is true', () => {
+ render();
+
+ const textarea = screen.getByRole('textbox');
+ expect(textarea).toHaveClass(styles.fieldSizingEnabled);
+ });
+
+ it('should not apply grow class when grow prop is false', () => {
+ render();
+
+ const textarea = screen.getByRole('textbox');
+ expect(textarea).not.toHaveClass(styles.fieldSizingEnabled);
+ });
+
+ it('should forward additional props to textarea element', () => {
+ render();
+
+ const textarea = screen.getByRole('textbox');
+ expect(textarea).toHaveAttribute('placeholder', 'Enter text');
+ expect(textarea).toBeDisabled();
+ });
});
diff --git a/packages/react/src/components/form/Textarea/Textarea.tsx b/packages/react/src/components/form/Textarea/Textarea.tsx
index 63bbd148..bc8998b6 100644
--- a/packages/react/src/components/form/Textarea/Textarea.tsx
+++ b/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;
+ /**
+ * If true, the textarea will grow in height to fit its content.
+ */
+ grow?: boolean;
// helperText: React.ReactNode;
} & HTMLElementProps;
export const Textarea: React.FC = ({
ref,
value,
+ grow,
...restProps
}) => {
const containerClassName = useComponentStyles(
@@ -29,7 +33,11 @@ export const Textarea: React.FC = ({
diff --git a/packages/reset/src/reset.css.ts b/packages/reset/src/reset.css.ts
index 07c7c630..3ec5b5ba 100644
--- a/packages/reset/src/reset.css.ts
+++ b/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',
},
},
});
diff --git a/packages/theme-momotaro/src/components/icon.css.ts b/packages/theme-momotaro/src/components/icon.css.ts
index 761e8f37..3974b1c0 100644
--- a/packages/theme-momotaro/src/components/icon.css.ts
+++ b/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),
}),
},
},