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(