diff --git a/.changeset/good-wombats-impress.md b/.changeset/good-wombats-impress.md new file mode 100644 index 0000000000..24853154e8 --- /dev/null +++ b/.changeset/good-wombats-impress.md @@ -0,0 +1,102 @@ +--- +'@alfalab/core-components-accordion': patch +'@alfalab/core-components-action-button': patch +'@alfalab/core-components-alert': patch +'@alfalab/core-components-amount': patch +'@alfalab/core-components-attach': patch +'@alfalab/core-components-backdrop': patch +'@alfalab/core-components-badge': patch +'@alfalab/core-components-bank-card': patch +'@alfalab/core-components-base-modal': patch +'@alfalab/core-components-bottom-sheet': patch +'@alfalab/core-components-button': patch +'@alfalab/core-components-calendar': patch +'@alfalab/core-components-calendar-input': patch +'@alfalab/core-components-calendar-range': patch +'@alfalab/core-components-calendar-with-skeleton': patch +'@alfalab/core-components-card-image': patch +'@alfalab/core-components-cdn-icon': patch +'@alfalab/core-components-chart': patch +'@alfalab/core-components-checkbox': patch +'@alfalab/core-components-checkbox-group': patch +'@alfalab/core-components-circular-progress-bar': patch +'@alfalab/core-components-code-input': patch +'@alfalab/core-components-collapse': patch +'@alfalab/core-components-comment': patch +'@alfalab/core-components-confirmation': patch +'@alfalab/core-components-confirmation-v1': patch +'@alfalab/core-components-custom-button': patch +'@alfalab/core-components-custom-picker-button': patch +'@alfalab/core-components-date-input': patch +'@alfalab/core-components-date-range-input': patch +'@alfalab/core-components-date-time-input': patch +'@alfalab/core-components-divider': patch +'@alfalab/core-components-drawer': patch +'@alfalab/core-components-dropzone': patch +'@alfalab/core-components-file-upload-item': patch +'@alfalab/core-components-file-upload-item-v1': patch +'@alfalab/core-components-filter-tag': patch +'@alfalab/core-components-gallery': patch +'@alfalab/core-components-gap': patch +'@alfalab/core-components-generic-wrapper': patch +'@alfalab/core-components-grid': patch +'@alfalab/core-components-hatching-progress-bar': patch +'@alfalab/core-components-icon-button': patch +'@alfalab/core-components-icon-view': patch +'@alfalab/core-components-indicator': patch +'@alfalab/core-components-international-phone-input': patch +'@alfalab/core-components-intl-phone-input': patch +'@alfalab/core-components-link': patch +'@alfalab/core-components-list': patch +'@alfalab/core-components-list-header': patch +'@alfalab/core-components-loader': patch +'@alfalab/core-components-markdown': patch +'@alfalab/core-components-masked-input': patch +'@alfalab/core-components-modal': patch +'@alfalab/core-components-navigation-bar': patch +'@alfalab/core-components-navigation-bar-private': patch +'@alfalab/core-components-notification': patch +'@alfalab/core-components-notification-manager': patch +'@alfalab/core-components-pagination': patch +'@alfalab/core-components-pass-code': patch +'@alfalab/core-components-pass-code-v1': patch +'@alfalab/core-components-pattern-lock': patch +'@alfalab/core-components-pattern-lock-v1': patch +'@alfalab/core-components-picker-button': patch +'@alfalab/core-components-plate': patch +'@alfalab/core-components-popover': patch +'@alfalab/core-components-popup-sheet': patch +'@alfalab/core-components-product-cover': patch +'@alfalab/core-components-progress-bar': patch +'@alfalab/core-components-pure-cell': patch +'@alfalab/core-components-radio': patch +'@alfalab/core-components-radio-group': patch +'@alfalab/core-components-scrollbar': patch +'@alfalab/core-components-segmented-control': patch +'@alfalab/core-components-side-panel': patch +'@alfalab/core-components-skeleton': patch +'@alfalab/core-components-slider': patch +'@alfalab/core-components-sortable-list': patch +'@alfalab/core-components-space': patch +'@alfalab/core-components-spinner': patch +'@alfalab/core-components-status': patch +'@alfalab/core-components-status-badge': patch +'@alfalab/core-components-stepped-progress-bar': patch +'@alfalab/core-components-steps': patch +'@alfalab/core-components-switch': patch +'@alfalab/core-components-system-message': patch +'@alfalab/core-components-tab-bar': patch +'@alfalab/core-components-table': patch +'@alfalab/core-components-tabs': patch +'@alfalab/core-components-tag': patch +'@alfalab/core-components-text': patch +'@alfalab/core-components-time-input': patch +'@alfalab/core-components-toast': patch +'@alfalab/core-components-toast-plate': patch +'@alfalab/core-components-tooltip': patch +'@alfalab/core-components-typography': patch +'@alfalab/core-components-underlay': patch +'@alfalab/core-components-with-suffix': patch +--- + +Обновление зависимостей diff --git a/.changeset/odd-eyes-melt.md b/.changeset/odd-eyes-melt.md new file mode 100644 index 0000000000..d963676404 --- /dev/null +++ b/.changeset/odd-eyes-melt.md @@ -0,0 +1,17 @@ +--- +'@alfalab/core-components-amount-input': minor +'@alfalab/core-components-form-control': minor +'@alfalab/core-components-input': minor +'@alfalab/core-components-input-autocomplete': minor +'@alfalab/core-components-number-input': minor +'@alfalab/core-components-password-input': minor +'@alfalab/core-components-phone-input': minor +'@alfalab/core-components-select': minor +'@alfalab/core-components-select-with-tags': minor +'@alfalab/core-components-slider-input': minor +'@alfalab/core-components-textarea': minor +'@alfalab/core-components-themes': minor +'@alfalab/core-components-universal-date-input': minor +--- + +Добавлен 40 размер diff --git a/package.json b/package.json index ec69ff3405..9bac8822a7 100644 --- a/package.json +++ b/package.json @@ -58,7 +58,7 @@ "dependencies": { "@alfalab/data": "^1.9.1", "@alfalab/hooks": "^1.13.1", - "@alfalab/icons-glyph": "^2.189.0", + "@alfalab/icons-glyph": "^2.210.0", "@alfalab/icons-logotype": "^2.27.0", "@alfalab/react-canvas-pattern-lock": "^2.0.7", "@alfalab/utils": "^1.17.1", diff --git a/packages/accordion/package.json b/packages/accordion/package.json index 157920aa63..24f8d1983f 100644 --- a/packages/accordion/package.json +++ b/packages/accordion/package.json @@ -17,7 +17,7 @@ "classnames": "^2.5.1", "tslib": "^2.4.0", "@alfalab/hooks": "^1.13.1", - "@alfalab/icons-glyph": "^2.139.0", + "@alfalab/icons-glyph": "^2.210.0", "@juggle/resize-observer": "^3.3.1", "@alfalab/core-components-typography": "^4.11.1" }, diff --git a/packages/amount-input/src/__image_snapshots__/amount-input-screenshots-sprite-size-snap.png b/packages/amount-input/src/__image_snapshots__/amount-input-screenshots-sprite-size-snap.png new file mode 100644 index 0000000000..6baa13b7dc --- /dev/null +++ b/packages/amount-input/src/__image_snapshots__/amount-input-screenshots-sprite-size-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:5f3db703a77a95bbed9175b297ca9d0fb5e4e3b426a6bb1708fb4af83d4eb2d5 +size 11559 diff --git a/packages/amount-input/src/__snapshots__/Component.test.tsx.snap b/packages/amount-input/src/__snapshots__/Component.test.tsx.snap index 038801b918..05fc400a03 100644 --- a/packages/amount-input/src/__snapshots__/Component.test.tsx.snap +++ b/packages/amount-input/src/__snapshots__/Component.test.tsx.snap @@ -18,10 +18,10 @@ Object { class="inputWrapper" >
= { @@ -15,6 +16,9 @@ type Story = StoryObj; export const amount_input: Story = { name: 'AmountInput', render: () => { + const size = select('size', [40, 48, 56, 64, 72], 48); + const IconComponent = size === 40 ? DiamondsSIcon : StarMIcon; + return ( } + leftAddons={boolean('leftAddons', false) && } bottomAddons={boolean('bottomAddons', false) && bottom text} clear={boolean('clear', false)} readOnly={boolean('readOnly', false)} + labelView={select('labelView', ['inner', 'outer'], 'inner')} /> ); }, diff --git a/packages/attach/package.json b/packages/attach/package.json index 3b0659f51a..16792d1bb2 100644 --- a/packages/attach/package.json +++ b/packages/attach/package.json @@ -18,7 +18,7 @@ "@alfalab/core-components-button": "^11.11.1", "@alfalab/core-components-keyboard-focusable": "^4.1.0", "@alfalab/core-components-progress-bar": "^3.5.1", - "@alfalab/icons-glyph": "^2.139.0", + "@alfalab/icons-glyph": "^2.210.0", "@alfalab/utils": "^1.17.1", "classnames": "^2.5.1", "react-merge-refs": "^1.1.0", diff --git a/packages/bank-card/package.json b/packages/bank-card/package.json index 07ca941015..e60f9da904 100644 --- a/packages/bank-card/package.json +++ b/packages/bank-card/package.json @@ -17,7 +17,7 @@ }, "dependencies": { "@alfalab/core-components-masked-input": "^6.3.29", - "@alfalab/icons-glyph": "^2.139.0", + "@alfalab/icons-glyph": "^2.210.0", "@alfalab/icons-logotype": "^2.27.0", "classnames": "^2.5.1", "tslib": "^2.4.0" diff --git a/packages/bank-card/src/__snapshots__/Component.test.tsx.snap b/packages/bank-card/src/__snapshots__/Component.test.tsx.snap index cc0ec96102..180d77f58c 100644 --- a/packages/bank-card/src/__snapshots__/Component.test.tsx.snap +++ b/packages/bank-card/src/__snapshots__/Component.test.tsx.snap @@ -55,11 +55,11 @@ exports[`BankCard Snapshots tests should match snapshots 1`] = `
diff --git a/packages/date-time-input/package.json b/packages/date-time-input/package.json index 37e0118115..74f842624b 100644 --- a/packages/date-time-input/package.json +++ b/packages/date-time-input/package.json @@ -22,7 +22,7 @@ "@alfalab/core-components-mq": "^4.4.0", "@alfalab/core-components-popover": "^6.3.4", "@alfalab/hooks": "^1.13.1", - "@alfalab/icons-glyph": "^2.139.0", + "@alfalab/icons-glyph": "^2.210.0", "classnames": "^2.5.1", "date-fns": "^2.16.1", "react-merge-refs": "^1.1.0", diff --git a/packages/date-time-input/src/__snapshots__/Component.test.tsx.snap b/packages/date-time-input/src/__snapshots__/Component.test.tsx.snap index c6df6bc558..a15bd31d1d 100644 --- a/packages/date-time-input/src/__snapshots__/Component.test.tsx.snap +++ b/packages/date-time-input/src/__snapshots__/Component.test.tsx.snap @@ -15,10 +15,10 @@ exports[`DateTimeInput Display tests should match snapshot 1`] = ` class="inputWrapper" >
diff --git a/packages/dropzone/package.json b/packages/dropzone/package.json index c38c195230..8cc26f6840 100644 --- a/packages/dropzone/package.json +++ b/packages/dropzone/package.json @@ -15,7 +15,7 @@ "react": "^16.9.0 || ^17.0.1 || ^18.0.0" }, "dependencies": { - "@alfalab/icons-glyph": "^2.139.0", + "@alfalab/icons-glyph": "^2.210.0", "classnames": "^2.5.1", "tslib": "^2.4.0" }, diff --git a/packages/file-upload-item-v1/package.json b/packages/file-upload-item-v1/package.json index f5685c9c81..ded7f41866 100644 --- a/packages/file-upload-item-v1/package.json +++ b/packages/file-upload-item-v1/package.json @@ -18,7 +18,7 @@ "@alfalab/core-components-icon-button": "^6.11.4", "@alfalab/core-components-link": "^5.3.2", "@alfalab/core-components-spinner": "^4.0.1", - "@alfalab/icons-glyph": "^2.139.0", + "@alfalab/icons-glyph": "^2.210.0", "classnames": "^2.5.1", "tslib": "^2.4.0" }, diff --git a/packages/filter-tag/package.json b/packages/filter-tag/package.json index 08c9c6381a..9451e63a77 100644 --- a/packages/filter-tag/package.json +++ b/packages/filter-tag/package.json @@ -18,7 +18,7 @@ "dependencies": { "@alfalab/core-components-mq": "^4.4.0", "@alfalab/hooks": "^1.13.1", - "@alfalab/icons-glyph": "^2.139.0", + "@alfalab/icons-glyph": "^2.210.0", "classnames": "^2.5.1", "tslib": "^2.4.0", "@alfalab/core-components-shared": "^0.14.0" diff --git a/packages/form-control/src/Component.screenshots.test.tsx b/packages/form-control/src/Component.screenshots.test.tsx index eb6d3aff2f..dfe3c2749f 100644 --- a/packages/form-control/src/Component.screenshots.test.tsx +++ b/packages/form-control/src/Component.screenshots.test.tsx @@ -45,7 +45,7 @@ describe('FormControl | screenshots size prop', () => { componentName: 'FormControl', knobs: { label: 'Label', - size: [48, 56, 64, 72], + size: [40, 48, 56, 64, 72], }, size: { width: 350, height: 150 }, }), @@ -151,7 +151,7 @@ describe('FormControl | screenshots theme corp', () => { componentName: 'FormControl', knobs: { block: true, - size: [48, 56, 64, 72], + size: [40, 48, 56, 64, 72], disabled: [false, true], error: ['', 'Error'], }, @@ -165,3 +165,28 @@ describe('FormControl | screenshots theme corp', () => { theme: 'corp', })(); }); + +describe('FormControl | label, hint, error sizes', () => { + screenshotTesting({ + cases: [ + [ + 'sprite', + createSpriteStorybookUrl({ + componentName: 'FormControl', + knobs: { + block: true, + size: [40, 48, 56, 64, 72], + hint: 'hint', + error: ['', 'Error'], + labelView: 'outer', + label: 'label', + }, + size: { width: 350, height: 150 }, + }), + ], + ], + screenshotOpts: { + fullPage: true, + }, + })(); +}); diff --git a/packages/form-control/src/Component.test.tsx b/packages/form-control/src/Component.test.tsx index aaccae1852..72c4af3d94 100644 --- a/packages/form-control/src/Component.test.tsx +++ b/packages/form-control/src/Component.test.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { cleanup, render } from '@testing-library/react'; +import { cleanup, render, screen } from '@testing-library/react'; import { getFormControlTestIds } from './utils'; import { FormControlDesktop as FormControl } from './desktop'; @@ -172,6 +172,13 @@ describe('FormControl', () => { expect(getByTestId(dataTestId).firstElementChild).toHaveClass('focused'); }); + + it('should set `size-40`', () => { + const dataTestId = 'test-id'; + render(); + + expect(screen.getByTestId(dataTestId)).toHaveClass('size-40'); + }); }); it('should unmount without errors', () => { diff --git a/packages/form-control/src/__image_snapshots__/form-control-label-hint-error-sizes-sprite-snap.png b/packages/form-control/src/__image_snapshots__/form-control-label-hint-error-sizes-sprite-snap.png new file mode 100644 index 0000000000..b19e7295c1 --- /dev/null +++ b/packages/form-control/src/__image_snapshots__/form-control-label-hint-error-sizes-sprite-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:da2c083f61e8ef85cee11516894359c43b5ab0a85d9c637a28c6604d1d956d54 +size 42892 diff --git a/packages/form-control/src/__image_snapshots__/form-control-screenshots-size-prop-default-theme-snap.png b/packages/form-control/src/__image_snapshots__/form-control-screenshots-size-prop-default-theme-snap.png index 3013368001..ab81e94014 100644 --- a/packages/form-control/src/__image_snapshots__/form-control-screenshots-size-prop-default-theme-snap.png +++ b/packages/form-control/src/__image_snapshots__/form-control-screenshots-size-prop-default-theme-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:0d73943912b305e6bcb32e07bcd0af069d78f806e84046d601c97508591da8c4 -size 12563 +oid sha256:07655547edde83db7ef9c22f6b59fdbb945863f160451809c4c0fadbb1efa2e3 +size 15562 diff --git a/packages/form-control/src/__image_snapshots__/form-control-screenshots-size-prop-mobile-theme-snap.png b/packages/form-control/src/__image_snapshots__/form-control-screenshots-size-prop-mobile-theme-snap.png index 3013368001..ab81e94014 100644 --- a/packages/form-control/src/__image_snapshots__/form-control-screenshots-size-prop-mobile-theme-snap.png +++ b/packages/form-control/src/__image_snapshots__/form-control-screenshots-size-prop-mobile-theme-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:0d73943912b305e6bcb32e07bcd0af069d78f806e84046d601c97508591da8c4 -size 12563 +oid sha256:07655547edde83db7ef9c22f6b59fdbb945863f160451809c4c0fadbb1efa2e3 +size 15562 diff --git a/packages/form-control/src/__image_snapshots__/form-control-screenshots-size-prop-site-theme-snap.png b/packages/form-control/src/__image_snapshots__/form-control-screenshots-size-prop-site-theme-snap.png index efe4471d45..bae9fb3963 100644 --- a/packages/form-control/src/__image_snapshots__/form-control-screenshots-size-prop-site-theme-snap.png +++ b/packages/form-control/src/__image_snapshots__/form-control-screenshots-size-prop-site-theme-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:4067bc45f46095bb7b9b31f017555e7f980f9093c5ca7b6e255d1f87531d45d3 -size 11658 +oid sha256:e042a3c3ef015490280ffed2d74732bdf9deecb1b5f8602c0cd644b3202f8a88 +size 14480 diff --git a/packages/form-control/src/__image_snapshots__/form-control-screenshots-theme-corp-sprite-snap.png b/packages/form-control/src/__image_snapshots__/form-control-screenshots-theme-corp-sprite-snap.png index d85512deef..c7364b972c 100644 --- a/packages/form-control/src/__image_snapshots__/form-control-screenshots-theme-corp-sprite-snap.png +++ b/packages/form-control/src/__image_snapshots__/form-control-screenshots-theme-corp-sprite-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:461a6b58c6d51910d40b61dd4fc7363c19b0cf0d7cd57836add607adc5369cc4 -size 48098 +oid sha256:bb05a0181acabfc8dd1d13ddf8f77c13566c36d01fdd2f80a69e0c641c3b5540 +size 59216 diff --git a/packages/form-control/src/__snapshots__/Component.test.tsx.snap b/packages/form-control/src/__snapshots__/Component.test.tsx.snap index 12cd9ef7a1..a9e0517282 100644 --- a/packages/form-control/src/__snapshots__/Component.test.tsx.snap +++ b/packages/form-control/src/__snapshots__/Component.test.tsx.snap @@ -15,7 +15,7 @@ Object { class="inputWrapper" >
@@ -33,7 +33,7 @@ Object { class="inputWrapper" >
@@ -108,12 +108,12 @@ Object { class="inputWrapper" >
error @@ -132,12 +132,12 @@ Object { class="inputWrapper" >
error @@ -213,7 +213,7 @@ Object { class="inputWrapper" >
@@ -234,7 +234,7 @@ Object { class="inputWrapper" >
@@ -312,12 +312,12 @@ Object { class="inputWrapper" >
This is error @@ -336,12 +336,12 @@ Object { class="inputWrapper" >
This is error @@ -417,12 +417,12 @@ Object { class="inputWrapper" >
This is hint @@ -440,12 +440,12 @@ Object { class="inputWrapper" >
This is hint @@ -539,7 +539,7 @@ Object {
@@ -576,7 +576,7 @@ Object {
@@ -658,7 +658,7 @@ Object { class="inputWrapper" >
@@ -683,7 +683,7 @@ Object { class="inputWrapper" >
@@ -752,7 +752,7 @@ Object { class="component component size-48 size-48" > This is label @@ -765,7 +765,7 @@ Object { class="inputWrapper" >
@@ -777,7 +777,7 @@ Object { class="component component size-48 size-48" > This is label @@ -790,7 +790,7 @@ Object { class="inputWrapper" >
@@ -865,7 +865,7 @@ Object { class="inputWrapper" >
& { * Размер компонента * @description s, m, l, xl deprecated, используйте вместо них 48, 56, 64, 72 соответственно */ - size?: 's' | 'm' | 'l' | 'xl' | 48 | 56 | 64 | 72; + size?: 's' | 'm' | 'l' | 'xl' | 40 | 48 | 56 | 64 | 72; /** * Набор цветов для компонента @@ -156,6 +156,7 @@ const SIZE_TO_CLASSNAME_MAP = { m: 'size-56', l: 'size-64', xl: 'size-72', + 40: 'size-40', 48: 'size-48', 56: 'size-56', 64: 'size-64', @@ -217,6 +218,7 @@ export const BaseFormControl = React.forwardRef )} - -
{children}
+
+ {children} +
{rightAddons && ( @@ -316,6 +319,7 @@ export const BaseFormControl = React.forwardRef {hint} diff --git a/packages/form-control/src/components/base-form-control/index.module.css b/packages/form-control/src/components/base-form-control/index.module.css index b586f7c448..3d653a944f 100644 --- a/packages/form-control/src/components/base-form-control/index.module.css +++ b/packages/form-control/src/components/base-form-control/index.module.css @@ -47,6 +47,10 @@ font-family: var(--form-control-font-family); } +.input.size-40 > * { + padding: 0 var(--gap-8); +} + .label { @mixin paragraph_component; @@ -86,6 +90,11 @@ .sub { @mixin paragraph_component_secondary; @mixin form-control-sub; + + &.size-40 { + @mixin paragraph_secondary_medium; + margin-top: var(--gap-4); + } } .above { @@ -96,6 +105,11 @@ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + + &.size-40 { + @mixin paragraph_secondary_medium; + margin-bottom: var(--gap-4); + } } .block { @@ -104,6 +118,33 @@ /* SIZES */ +.size-40 { + & .inner { + min-height: var(--form-control-40-min-height); + padding: var(--gap-0) var(--gap-4); + } + + & .hasInnerLabel .input > * { + padding: var(--form-control-labeled-40-paddings); + } + + & .label { + @mixin paragraph_component_secondary; + top: calc(var(--form-control-40-min-height) / 2); + left: var(--gap-8); + } + + & .addons { + &.rightAddons { + padding-right: var(--gap-8); + } + + &.leftAddons { + padding-left: var(--gap-8); + } + } +} + .size-48 .inner { min-height: var(--form-control-s-min-height); } diff --git a/packages/form-control/src/desktop/desktop.module.css b/packages/form-control/src/desktop/desktop.module.css index c7ed37e9e8..60ad6834e5 100644 --- a/packages/form-control/src/desktop/desktop.module.css +++ b/packages/form-control/src/desktop/desktop.module.css @@ -14,6 +14,14 @@ /* SIZES */ +.size-40 .inner { + border-radius: var(--form-control-40-border-radius); + + &:before { + left: 0; + } +} + .size-48 .inner { border-radius: var(--form-control-s-border-radius); } diff --git a/packages/form-control/src/docs/Component.stories.tsx b/packages/form-control/src/docs/Component.stories.tsx index a8b46c5d50..b737561a3d 100644 --- a/packages/form-control/src/docs/Component.stories.tsx +++ b/packages/form-control/src/docs/Component.stories.tsx @@ -2,6 +2,7 @@ import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import { text, select, boolean } from '@storybook/addon-knobs'; import { StarMIcon } from '@alfalab/icons-glyph/StarMIcon'; +import { DiamondsSIcon } from '@alfalab/icons-glyph/DiamondsSIcon'; import { FormControl } from '@alfalab/core-components-form-control'; import { FormControlMobile } from '@alfalab/core-components-form-control/mobile'; import { FormControlDesktop } from '@alfalab/core-components-form-control/desktop'; @@ -18,6 +19,10 @@ export const form_control: Story = { name: 'FormControl', render: () => { const colors = select('colors', ['default', 'inverted'], 'default'); + const size = select('size', [40, 48, 56, 64, 72], 48); + + const IconComponent = size === 40 ? DiamondsSIcon : StarMIcon; + return (
} - leftAddons={boolean('leftAddons', false) && } + rightAddons={boolean('rightAddons', false) && } + leftAddons={boolean('leftAddons', false) && } bottomAddons={boolean('bottomAddons', false) && bottom text} />
@@ -57,6 +62,10 @@ export const form_control_mobile: Story = { name: 'FormControlMobile', render: () => { const colors = select('colors', ['default', 'inverted'], 'default'); + const size = select('size', [40, 48, 56, 64, 72], 48); + + const IconComponent = size === 40 ? DiamondsSIcon : StarMIcon; + return (
} - leftAddons={boolean('leftAddons', false) && } + rightAddons={boolean('rightAddons', false) && } + leftAddons={boolean('leftAddons', false) && } bottomAddons={boolean('bottomAddons', false) && bottom text} />
@@ -96,6 +105,10 @@ export const form_control_desktop: Story = { name: 'FormControlDesktop', render: () => { const colors = select('colors', ['default', 'inverted'], 'default'); + const size = select('size', [40, 48, 56, 64, 72], 48); + + const IconComponent = size === 40 ? DiamondsSIcon : StarMIcon; + return (
} - leftAddons={boolean('leftAddons', false) && } + rightAddons={boolean('rightAddons', false) && } + leftAddons={boolean('leftAddons', false) && } bottomAddons={boolean('bottomAddons', false) && bottom text} />
diff --git a/packages/form-control/src/docs/description.mdx b/packages/form-control/src/docs/description.mdx index 0a70184005..6789a8b4a9 100644 --- a/packages/form-control/src/docs/description.mdx +++ b/packages/form-control/src/docs/description.mdx @@ -1,38 +1,46 @@ ## Размеры -Компонент доступен в размерах XL, L, M, S. +Компонент доступен в размерах 72, 64, 56, 48, 40. ```jsx live
- + + - - -
@@ -44,7 +52,7 @@ ```jsx live
- -
``` ## Префиксы и суффиксы -Инпут может содержать предзаполненное значение, располагающееся спереди или сзади вводимого пользователем значения. +Инпут может содержать предзаполненное значение, располагающееся спереди или сзади вводимого пользователем значения. ```jsx live render(() => { @@ -100,10 +108,10 @@ render(() => { ```jsx live
- { return (
- { size='xs' alignIcon='left' /> - } + } /> - { size='xs' alignIcon='right' /> - } + } />
setValue(selected ? selected.key : ''); }; const filteredOptions = options.filter((option) => matchOption(option, value)); + + const Option = boolean('Default Option', true) ? undefined : BaseOption; + return ( options={filteredOptions} selected={boolean('prevent select', true) ? [] : undefined} block={boolean('block', false)} - size={select('size', ['s', 'm', 'l', 'xl'], 's')} + size={select('size', [40, 48, 56, 64, 72], 48)} disabled={boolean('disabled', false)} error={text('error', '')} success={boolean('success', false)} @@ -66,6 +69,7 @@ const renderComponent = (Component: any, props?: Partial allowUnselect={boolean('allowUnselect', true)} closeOnSelect={boolean('closeOnSelect', false)} Arrow={boolean('Arrow', false) ? Arrow : undefined} + Option={Option} circularNavigation={boolean('circularNavigation', false)} placeholder={text('placeholder', 'Введите элемент')} label={text('label', 'Элемент')} diff --git a/packages/input/package.json b/packages/input/package.json index 665c200d1a..3447332271 100644 --- a/packages/input/package.json +++ b/packages/input/package.json @@ -21,7 +21,7 @@ "@alfalab/core-components-mq": "^4.4.0", "@alfalab/core-components-shared": "^0.14.0", "@alfalab/hooks": "^1.13.1", - "@alfalab/icons-glyph": "^2.139.0", + "@alfalab/icons-glyph": "^2.210.0", "classnames": "^2.5.1", "react-merge-refs": "^1.1.0", "tslib": "^2.4.0" diff --git a/packages/input/src/__image_snapshots__/input-screenshots-size-prop-default-theme-snap.png b/packages/input/src/__image_snapshots__/input-screenshots-size-prop-default-theme-snap.png index 6a709752d6..75a568db8e 100644 --- a/packages/input/src/__image_snapshots__/input-screenshots-size-prop-default-theme-snap.png +++ b/packages/input/src/__image_snapshots__/input-screenshots-size-prop-default-theme-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:cb8631d087683572a013481784df0805b8f461b80fb98d866754a19e22ade4a6 -size 12548 +oid sha256:1dee65a5059621e59f3f3309fc5d15e07605a2db05b45fb3610cbcdf51fb83a6 +size 15552 diff --git a/packages/input/src/__image_snapshots__/input-screenshots-size-prop-mobile-theme-snap.png b/packages/input/src/__image_snapshots__/input-screenshots-size-prop-mobile-theme-snap.png index 6a709752d6..75a568db8e 100644 --- a/packages/input/src/__image_snapshots__/input-screenshots-size-prop-mobile-theme-snap.png +++ b/packages/input/src/__image_snapshots__/input-screenshots-size-prop-mobile-theme-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:cb8631d087683572a013481784df0805b8f461b80fb98d866754a19e22ade4a6 -size 12548 +oid sha256:1dee65a5059621e59f3f3309fc5d15e07605a2db05b45fb3610cbcdf51fb83a6 +size 15552 diff --git a/packages/input/src/__image_snapshots__/input-screenshots-size-prop-site-theme-snap.png b/packages/input/src/__image_snapshots__/input-screenshots-size-prop-site-theme-snap.png index 90f5e4c8ed..5deab2dbd2 100644 --- a/packages/input/src/__image_snapshots__/input-screenshots-size-prop-site-theme-snap.png +++ b/packages/input/src/__image_snapshots__/input-screenshots-size-prop-site-theme-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:5cf18c342437f9c579214aa73553762209cc8367eea2edd76eb9e7a515a48f82 -size 11657 +oid sha256:8e9ac3dbd88fb8c07692df4a6440c5aefd4e5330f8514b59a213f1843c7016d8 +size 14480 diff --git a/packages/input/src/__snapshots__/Component.test.tsx.snap b/packages/input/src/__snapshots__/Component.test.tsx.snap index cf2ce0b02e..191bf860e7 100644 --- a/packages/input/src/__snapshots__/Component.test.tsx.snap +++ b/packages/input/src/__snapshots__/Component.test.tsx.snap @@ -15,10 +15,10 @@ Object { class="inputWrapper" >
@@ -39,10 +39,10 @@ Object { class="inputWrapper" >
diff --git a/packages/input/src/component.screenshots.test.tsx b/packages/input/src/component.screenshots.test.tsx index c052a24643..f32a92716d 100644 --- a/packages/input/src/component.screenshots.test.tsx +++ b/packages/input/src/component.screenshots.test.tsx @@ -72,7 +72,7 @@ describe('Input | screenshots size prop', () => { componentName: 'Input', knobs: { label: 'Label', - size: [48, 56, 64, 72], + size: [40, 48, 56, 64, 72], }, size: { width: 350, height: 150 }, }), diff --git a/packages/input/src/components/base-input/Component.tsx b/packages/input/src/components/base-input/Component.tsx index 5415a1fe69..438904d54a 100644 --- a/packages/input/src/components/base-input/Component.tsx +++ b/packages/input/src/components/base-input/Component.tsx @@ -66,7 +66,7 @@ export type BaseInputProps = Omit< * Размер компонента * @description s, m, l, xl deprecated, используйте вместо них 48, 56, 64, 72 соответственно */ - size?: 's' | 'm' | 'l' | 'xl' | 48 | 56 | 64 | 72; + size?: 's' | 'm' | 'l' | 'xl' | 40 | 48 | 56 | 64 | 72; /** * Набор цветов для компонента @@ -215,6 +215,7 @@ const SIZE_TO_CLASSNAME_MAP = { m: 'size-56', l: 'size-64', xl: 'size-72', + 40: 'size-40', 48: 'size-48', 56: 'size-56', 64: 'size-64', @@ -380,23 +381,27 @@ export const BaseInput = React.forwardRef( disabled={disabled} colors={colors} dataTestId={getDataTestId(dataTestId, 'clear-icon')} + size={size} /> )} {rightAddons} {error && ( -
+
)} {success && !error && ( -
+
@@ -440,13 +445,12 @@ export const BaseInput = React.forwardRef( {...restProps} className={cn( styles.input, + styles[`size-${size}`], colorCommonStyles[colors].input, { [styles.disableUserInput]: disableUserInput, [colorCommonStyles[colors].disableUserInput]: disableUserInput, - [colorCommonStyles[colors].error]: error, - [styles[SIZE_TO_CLASSNAME_MAP[size]]]: hasInnerLabel, [styles.hasInnerLabel]: hasInnerLabel, [colorCommonStyles[colors].hasInnerLabel]: hasInnerLabel, diff --git a/packages/input/src/components/base-input/index.module.css b/packages/input/src/components/base-input/index.module.css index eb2aa4014e..7b14203f43 100644 --- a/packages/input/src/components/base-input/index.module.css +++ b/packages/input/src/components/base-input/index.module.css @@ -14,6 +14,11 @@ text-overflow: ellipsis; box-sizing: border-box; -webkit-appearance: none; + + &.size-40 { + @mixin paragraph_component_secondary; + padding: var(--gap-0) var(--gap-8); + } } .input::placeholder { @@ -25,6 +30,10 @@ opacity: 0; } + &.size-40 { + height: var(--form-control-40-min-height); + } + &.size-48 { height: var(--form-control-s-min-height); } @@ -52,6 +61,10 @@ &:not(:only-child) { margin-left: var(--gap-4); } + + &.size-40:not(:only-child) { + margin-left: 6px; + } } * + .errorIcon { @@ -68,6 +81,10 @@ button[class*='eye'] + .errorIcon { &:not(:only-child) { margin-left: var(--gap-4); } + + &.size-40:not(:only-child) { + margin-left: 6px; + } } button[class*='eye'] + .successIcon { diff --git a/packages/input/src/components/clear-button/Component.tsx b/packages/input/src/components/clear-button/Component.tsx index 8199319904..9a5d931475 100644 --- a/packages/input/src/components/clear-button/Component.tsx +++ b/packages/input/src/components/clear-button/Component.tsx @@ -3,6 +3,9 @@ import cn from 'classnames'; import { Button } from '@alfalab/core-components-button'; import { CrossCircleMIcon } from '@alfalab/icons-glyph/CrossCircleMIcon'; +import { CrossCircleSIcon } from '@alfalab/icons-glyph/CrossCircleSIcon'; + +import { BaseInputProps } from '../base-input'; import defaultColors from './default.module.css'; import styles from './index.module.css'; @@ -18,6 +21,7 @@ interface ClearButtonProps { onClick: (event: React.MouseEvent) => void; colors: 'default' | 'inverted'; dataTestId?: string; + size?: BaseInputProps['size']; } const preventDefault = (e: React.UIEvent) => e.preventDefault(); @@ -27,18 +31,23 @@ export const ClearButton: React.FC = ({ disabled, onClick, dataTestId, -}) => ( - -); + size, +}) => { + const IconComponent = size === 40 ? CrossCircleSIcon : CrossCircleMIcon; + + return ( + + ); +}; diff --git a/packages/input/src/components/clear-button/index.module.css b/packages/input/src/components/clear-button/index.module.css index 320b2a40d0..4b79bfb194 100644 --- a/packages/input/src/components/clear-button/index.module.css +++ b/packages/input/src/components/clear-button/index.module.css @@ -6,8 +6,14 @@ transition: opacity 0.2s ease; } -.clearButton + * { - margin-left: var(--gap-4); +.clearButton { + & + * { + margin-left: var(--gap-4); + } + + &.size-40 + * { + margin-left: 6px; + } } .clearButton + [data-addon='error-icon'] { diff --git a/packages/input/src/docs/Component.stories.tsx b/packages/input/src/docs/Component.stories.tsx index 916dae8180..1975c9902f 100644 --- a/packages/input/src/docs/Component.stories.tsx +++ b/packages/input/src/docs/Component.stories.tsx @@ -6,6 +6,7 @@ import { StarMIcon } from '@alfalab/icons-glyph/StarMIcon'; import { Input } from '@alfalab/core-components-input'; import { InputMobile } from '@alfalab/core-components-input/mobile'; import { InputDesktop } from '@alfalab/core-components-input/desktop'; +import { DiamondsSIcon } from '@alfalab/icons-glyph/DiamondsSIcon'; const meta: Meta = { title: 'Components/Input', @@ -19,6 +20,10 @@ export const input: Story = { name: 'Input', render: () => { const colors = select('colors', ['default', 'inverted'], 'default'); + const size = select('size', [40, 48, 56, 64, 72], 48); + + const IconComponent = size === 40 ? DiamondsSIcon : StarMIcon; + return (
} - leftAddons={boolean('leftAddons', false) && } + rightAddons={boolean('rightAddons', false) && } + leftAddons={boolean('leftAddons', false) && } bottomAddons={boolean('bottomAddons', false) && bottom text} readOnly={boolean('readOnly', false)} disableUserInput={boolean('disableUserInput', false)} @@ -67,6 +72,10 @@ export const input_mobile: Story = { name: 'InputMobile', render: () => { const colors = select('colors', ['default', 'inverted'], 'default'); + const size = select('size', [40, 48, 56, 64, 72], 48); + + const IconComponent = size === 40 ? DiamondsSIcon : StarMIcon; + return (
} - leftAddons={boolean('leftAddons', false) && } + rightAddons={boolean('rightAddons', false) && } + leftAddons={boolean('leftAddons', false) && } bottomAddons={boolean('bottomAddons', false) && bottom text} readOnly={boolean('readOnly', false)} /> @@ -114,6 +123,10 @@ export const input_desktop: Story = { name: 'InputDesktop', render: () => { const colors = select('colors', ['default', 'inverted'], 'default'); + const size = select('size', [40, 48, 56, 64, 72], 48); + + const IconComponent = size === 40 ? DiamondsSIcon : StarMIcon; + return (
} - leftAddons={boolean('leftAddons', false) && } + rightAddons={boolean('rightAddons', false) && } + leftAddons={boolean('leftAddons', false) && } bottomAddons={boolean('bottomAddons', false) && bottom text} readOnly={boolean('readOnly', false)} /> diff --git a/packages/international-phone-input/package.json b/packages/international-phone-input/package.json index ec8ea925b5..e309558f67 100644 --- a/packages/international-phone-input/package.json +++ b/packages/international-phone-input/package.json @@ -21,7 +21,7 @@ "@alfalab/core-components-shared": "^0.14.0", "@alfalab/core-components-mq": "^4.4.0", "@alfalab/hooks": "^1.13.1", - "@alfalab/icons-glyph": "^2.139.0", + "@alfalab/icons-glyph": "^2.210.0", "@maskito/core": "^1.7.0", "@maskito/react": "^1.7.0", "classnames": "^2.5.1", diff --git a/packages/international-phone-input/src/__snapshots__/Component.test.tsx.snap b/packages/international-phone-input/src/__snapshots__/Component.test.tsx.snap index 0869b5e04b..38dd7ab0f2 100644 --- a/packages/international-phone-input/src/__snapshots__/Component.test.tsx.snap +++ b/packages/international-phone-input/src/__snapshots__/Component.test.tsx.snap @@ -63,7 +63,7 @@ exports[`InternationalPhoneInput should match snapshot 1`] = `
diff --git a/packages/intl-phone-input/package.json b/packages/intl-phone-input/package.json index 974ca993d4..de60fecf99 100644 --- a/packages/intl-phone-input/package.json +++ b/packages/intl-phone-input/package.json @@ -18,7 +18,7 @@ "@alfalab/core-components-input-autocomplete": "12.6.8", "@alfalab/core-components-select": "^17.18.0", "@alfalab/hooks": "^1.13.1", - "@alfalab/icons-glyph": "^2.139.0", + "@alfalab/icons-glyph": "^2.210.0", "@alfalab/utils": "^1.17.1", "classnames": "^2.5.1", "libphonenumber-js": "^1.10.30", diff --git a/packages/intl-phone-input/src/__snapshots__/component.test.tsx.snap b/packages/intl-phone-input/src/__snapshots__/component.test.tsx.snap index 06682e17ca..0436b1eac9 100644 --- a/packages/intl-phone-input/src/__snapshots__/component.test.tsx.snap +++ b/packages/intl-phone-input/src/__snapshots__/component.test.tsx.snap @@ -71,7 +71,7 @@ exports[`IntlPhoneInput should match snapshot 1`] = `
@@ -39,10 +39,10 @@ Object { class="inputWrapper" >
diff --git a/packages/navigation-bar-private/package.json b/packages/navigation-bar-private/package.json index afc35563b3..6feea3b9c2 100644 --- a/packages/navigation-bar-private/package.json +++ b/packages/navigation-bar-private/package.json @@ -17,7 +17,7 @@ "@alfalab/core-components-typography": "^4.11.1", "@alfalab/core-components-shared": "^0.14.0", "@alfalab/hooks": "^1.13.1", - "@alfalab/icons-glyph": "^2.139.0", + "@alfalab/icons-glyph": "^2.210.0", "classnames": "^2.5.1", "react-merge-refs": "^1.1.0", "tslib": "^2.4.0" diff --git a/packages/navigation-bar/package.json b/packages/navigation-bar/package.json index df9f50a058..c4289145aa 100644 --- a/packages/navigation-bar/package.json +++ b/packages/navigation-bar/package.json @@ -18,7 +18,7 @@ "@alfalab/core-components-button": "^11.11.1", "@alfalab/core-components-typography": "^4.11.1", "@alfalab/core-components-shared": "^0.14.0", - "@alfalab/icons-glyph": "^2.139.0", + "@alfalab/icons-glyph": "^2.210.0", "classnames": "^2.5.1", "tslib": "^2.4.0" }, diff --git a/packages/number-input/package.json b/packages/number-input/package.json index 77eea639fa..a8664b1aee 100644 --- a/packages/number-input/package.json +++ b/packages/number-input/package.json @@ -19,7 +19,7 @@ "@alfalab/core-components-mq": "^4.4.0", "@alfalab/core-components-icon-button": "^6.11.4", "@alfalab/core-components-shared": "^0.14.0", - "@alfalab/icons-glyph": "^2.139.0", + "@alfalab/icons-glyph": "^2.210.0", "@maskito/core": "^1.7.0", "@maskito/react": "^1.7.0", "classnames": "^2.5.1", diff --git a/packages/number-input/src/__snapshots__/Component.test.tsx.snap b/packages/number-input/src/__snapshots__/Component.test.tsx.snap index 643d398dcf..d855cee6e4 100644 --- a/packages/number-input/src/__snapshots__/Component.test.tsx.snap +++ b/packages/number-input/src/__snapshots__/Component.test.tsx.snap @@ -12,10 +12,10 @@ exports[`NumberInput Snapshots tests should match snapshot 1`] = ` class="inputWrapper" >
( )} onIncrement={handleIncrement} onDecrement={handleDecrement} + size={size} /> ) : ( diff --git a/packages/number-input/src/components/number-input/index.module.css b/packages/number-input/src/components/number-input/index.module.css index 9162835bbd..1ec5d2571d 100644 --- a/packages/number-input/src/components/number-input/index.module.css +++ b/packages/number-input/src/components/number-input/index.module.css @@ -1,5 +1,10 @@ @import '../../../../vars/src/index.css'; +.size-40 { + margin-right: var(--gap-8-neg); + height: 32px; +} + .size-48 { margin-right: var(--gap-8-neg); } diff --git a/packages/number-input/src/components/steppers/Component.tsx b/packages/number-input/src/components/steppers/Component.tsx index 116fd72190..255ec806eb 100644 --- a/packages/number-input/src/components/steppers/Component.tsx +++ b/packages/number-input/src/components/steppers/Component.tsx @@ -2,9 +2,12 @@ import React from 'react'; import cn from 'classnames'; import { IconButton } from '@alfalab/core-components-icon-button'; +import { InputProps } from '@alfalab/core-components-input'; import { getDataTestId } from '@alfalab/core-components-shared'; import { MinusMIcon } from '@alfalab/icons-glyph/MinusMIcon'; +import { MinusSIcon } from '@alfalab/icons-glyph/MinusSIcon'; import { PlusMediumMIcon } from '@alfalab/icons-glyph/PlusMediumMIcon'; +import { PlusSIcon } from '@alfalab/icons-glyph/PlusSIcon'; import defaultColors from './default.module.css'; import styles from './index.module.css'; @@ -20,6 +23,7 @@ export type SteppersProps = { onDecrement: () => void; dataTestId?: string; colors: 'default' | 'inverted'; + size: InputProps['size']; }; const colorStyles = { @@ -41,17 +45,21 @@ export const Steppers: React.FC = ({ disabled, dataTestId, colors, + size, }) => { const decButtonDisabled = disabled || value <= min; const incButtonDisabled = disabled || value >= max; + const MinusIconComponent = size === 40 ? MinusSIcon : MinusMIcon; + const PlusIconComponent = size === 40 ? PlusSIcon : PlusMediumMIcon; + return (
} + icon={} aria-label='уменьшить' onMouseDown={preventDefault} onClick={onDecrement} @@ -63,7 +71,7 @@ export const Steppers: React.FC = ({ colors={colors} disabled={incButtonDisabled} className={styles.button} - icon={} + icon={} aria-label='увеличить' onMouseDown={preventDefault} onClick={onIncrement} diff --git a/packages/number-input/src/docs/Component.stories.tsx b/packages/number-input/src/docs/Component.stories.tsx index fa2a620e0e..a51163cc1b 100644 --- a/packages/number-input/src/docs/Component.stories.tsx +++ b/packages/number-input/src/docs/Component.stories.tsx @@ -3,6 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { text, select, boolean, number } from '@storybook/addon-knobs'; import { StarMIcon } from '@alfalab/icons-glyph/StarMIcon'; import { NumberInput } from '@alfalab/core-components-number-input'; +import { DiamondsSIcon } from '@alfalab/icons-glyph/DiamondsSIcon'; const meta: Meta = { title: 'Components/NumberInput', @@ -17,6 +18,8 @@ export const number_input: Story = { render: () => { const colors = select('colors', ['default', 'inverted'], 'default'); const stepper = boolean('stepper', false); + const size = select('size', [40, 48, 56, 64, 72], 48); + const IconComponent = size === 40 ? DiamondsSIcon : StarMIcon; return (
{stepper ? ( } - leftAddons={boolean('leftAddons', false) && } + rightAddons={boolean('rightAddons', false) && } + leftAddons={boolean('leftAddons', false) && } bottomAddons={boolean('bottomAddons', false) && bottom text} readOnly={boolean('readOnly', false)} /> diff --git a/packages/pagination/package.json b/packages/pagination/package.json index a94f0bea9a..a002a73b47 100644 --- a/packages/pagination/package.json +++ b/packages/pagination/package.json @@ -17,7 +17,7 @@ }, "dependencies": { "@alfalab/core-components-tag": "^8.6.3", - "@alfalab/icons-glyph": "^2.139.0", + "@alfalab/icons-glyph": "^2.210.0", "classnames": "^2.5.1", "tslib": "^2.4.0" }, diff --git a/packages/pass-code-v1/package.json b/packages/pass-code-v1/package.json index 0b67f2a0c3..562183a3bf 100644 --- a/packages/pass-code-v1/package.json +++ b/packages/pass-code-v1/package.json @@ -18,7 +18,7 @@ "@alfalab/core-components-button": "^11.11.1", "@alfalab/core-components-gap": "^1.4.1", "@alfalab/core-components-shared": "^0.14.0", - "@alfalab/icons-glyph": "^2.139.0", + "@alfalab/icons-glyph": "^2.210.0", "classnames": "^2.5.1", "react-transition-group": "^4.4.5", "tslib": "^2.4.0" diff --git a/packages/pass-code/package.json b/packages/pass-code/package.json index 334dbec0b3..481b865844 100644 --- a/packages/pass-code/package.json +++ b/packages/pass-code/package.json @@ -18,7 +18,7 @@ "@alfalab/core-components-button": "^11.11.1", "@alfalab/core-components-gap": "^1.4.1", "@alfalab/core-components-shared": "^0.14.0", - "@alfalab/icons-glyph": "^2.139.0", + "@alfalab/icons-glyph": "^2.210.0", "classnames": "^2.5.1", "react-transition-group": "^4.4.5", "tslib": "^2.4.0", diff --git a/packages/password-input/package.json b/packages/password-input/package.json index 668cabfbad..ad3982f253 100644 --- a/packages/password-input/package.json +++ b/packages/password-input/package.json @@ -18,7 +18,7 @@ "dependencies": { "@alfalab/core-components-icon-button": "^6.11.4", "@alfalab/core-components-input": "^15.3.4", - "@alfalab/icons-glyph": "^2.139.0", + "@alfalab/icons-glyph": "^2.210.0", "classnames": "^2.5.1", "tslib": "^2.4.0" }, diff --git a/packages/password-input/src/__snapshots__/component.test.tsx.snap b/packages/password-input/src/__snapshots__/component.test.tsx.snap index 4c7806fc23..b50ef58e9b 100644 --- a/packages/password-input/src/__snapshots__/component.test.tsx.snap +++ b/packages/password-input/src/__snapshots__/component.test.tsx.snap @@ -13,10 +13,10 @@ exports[`PasswordInput snapshots tests should match snapshot 1`] = ` class="inputWrapper" >
@@ -45,14 +45,14 @@ exports[`PasswordInput snapshots tests should match snapshot 1`] = ` viewBox="0 0 24 24" width="24" > - + diff --git a/packages/password-input/src/component.tsx b/packages/password-input/src/component.tsx index d223b34e77..69f3751849 100644 --- a/packages/password-input/src/component.tsx +++ b/packages/password-input/src/component.tsx @@ -8,7 +8,13 @@ import { EyeOffMIcon } from '@alfalab/icons-glyph/EyeOffMIcon'; import styles from './index.module.css'; -export type PasswordInputProps = InputProps & { +export type PasswordInputProps = Omit & { + /** + * Размер компонента + * @description s, m, l, xl deprecated, используйте вместо них 48, 56, 64, 72 соответственно + */ + size?: Exclude; + /** * Управление видимостью пароля (controlled) */ diff --git a/packages/phone-input/src/Component.screenshots.test.ts b/packages/phone-input/src/Component.screenshots.test.ts index 49dbc23f02..73316250f1 100644 --- a/packages/phone-input/src/Component.screenshots.test.ts +++ b/packages/phone-input/src/Component.screenshots.test.ts @@ -1,4 +1,15 @@ -import { createPreview } from '../../screenshot-utils'; +import { + createPreview, + createSpriteStorybookUrl, + setupScreenshotTesting, +} from '../../screenshot-utils'; + +const screenshotTesting = setupScreenshotTesting({ + it, + beforeAll, + afterAll, + expect, +}); describe('PhoneInput ', () => createPreview( @@ -16,3 +27,23 @@ describe('PhoneInput ', () => viewport: { width: 1024, height: 600 }, }, )); + +describe('PhoneInput | size', () => { + screenshotTesting({ + cases: [ + [ + 'sprite', + createSpriteStorybookUrl({ + componentName: 'PhoneInput', + knobs: { + label: 'Телефон', + value: '+71234567890', + size: [40, 48, 56, 64, 72], + block: true, + }, + size: { width: 240, height: 150 }, + }), + ], + ], + })(); +}); diff --git a/packages/phone-input/src/__image_snapshots__/phone-input-size-sprite-snap.png b/packages/phone-input/src/__image_snapshots__/phone-input-size-sprite-snap.png new file mode 100644 index 0000000000..56a1f19888 --- /dev/null +++ b/packages/phone-input/src/__image_snapshots__/phone-input-size-sprite-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:0b916c7c14f0e59cabbe788486e2afd02e23fd0d579f06f474f6638e647cba08 +size 28704 diff --git a/packages/phone-input/src/__snapshots__/Component.test.tsx.snap b/packages/phone-input/src/__snapshots__/Component.test.tsx.snap index c62a8afe39..26672593eb 100644 --- a/packages/phone-input/src/__snapshots__/Component.test.tsx.snap +++ b/packages/phone-input/src/__snapshots__/Component.test.tsx.snap @@ -15,10 +15,10 @@ Object { class="inputWrapper" >
@@ -39,10 +39,10 @@ Object { class="inputWrapper" >
diff --git a/packages/phone-input/src/docs/Component.stories.tsx b/packages/phone-input/src/docs/Component.stories.tsx index 823df39535..4a927a1c13 100644 --- a/packages/phone-input/src/docs/Component.stories.tsx +++ b/packages/phone-input/src/docs/Component.stories.tsx @@ -3,6 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { text, select, boolean } from '@storybook/addon-knobs'; import { StarMIcon } from '@alfalab/icons-glyph/StarMIcon'; import { PhoneInput } from '@alfalab/core-components-phone-input'; +import { DiamondsSIcon } from '@alfalab/icons-glyph/DiamondsSIcon'; const meta: Meta = { title: 'Components/PhoneInput', @@ -14,20 +15,26 @@ type Story = StoryObj; export const phone_input: Story = { name: 'PhoneInput', - render: () => ( - } - rightAddons={boolean('rightAddons', false) && } - bottomAddons={boolean('bottomAddons', false) && bottom text} - /> - ), + render: () => { + const size = select('size', [40, 48, 56, 64, 72], 48); + const IconComponent = size === 40 ? DiamondsSIcon : StarMIcon; + + return ( + } + rightAddons={boolean('rightAddons', false) && } + bottomAddons={boolean('bottomAddons', false) && bottom text} + labelView={select('labelView', ['inner', 'outer'], 'inner')} + /> + ); + }, }; export default meta; diff --git a/packages/picker-button/package.json b/packages/picker-button/package.json index 939a2f68ca..eae9515b52 100644 --- a/packages/picker-button/package.json +++ b/packages/picker-button/package.json @@ -21,7 +21,7 @@ "@alfalab/core-components-select": "^17.18.0", "@alfalab/core-components-popover": "^6.3.4", "@alfalab/hooks": "^1.13.1", - "@alfalab/icons-glyph": "^2.139.0", + "@alfalab/icons-glyph": "^2.210.0", "classnames": "^2.5.1", "tslib": "^2.4.0", "@alfalab/core-components-shared": "^0.14.0" diff --git a/packages/plate/package.json b/packages/plate/package.json index 9d3c54a088..3f28c40626 100644 --- a/packages/plate/package.json +++ b/packages/plate/package.json @@ -19,7 +19,7 @@ "@alfalab/core-components-icon-button": "^6.11.4", "@alfalab/core-components-mq": "^4.4.0", "@alfalab/hooks": "^1.13.1", - "@alfalab/icons-glyph": "^2.139.0", + "@alfalab/icons-glyph": "^2.210.0", "classnames": "^2.5.1", "react-merge-refs": "^1.1.0", "tslib": "^2.4.0" diff --git a/packages/product-cover/package.json b/packages/product-cover/package.json index db33b9fece..eaee361e80 100644 --- a/packages/product-cover/package.json +++ b/packages/product-cover/package.json @@ -19,7 +19,7 @@ "@alfalab/core-components-button": "^11.11.1", "@alfalab/core-components-typography": "^4.11.1", "@alfalab/core-components-shared": "^0.14.0", - "@alfalab/icons-glyph": "^2.139.0", + "@alfalab/icons-glyph": "^2.210.0", "@alfalab/hooks": "^1.13.1", "@alfalab/utils": "^1.17.1", "classnames": "^2.5.1", diff --git a/packages/select-with-tags/package.json b/packages/select-with-tags/package.json index cb58e1d10a..dfb74faf8b 100644 --- a/packages/select-with-tags/package.json +++ b/packages/select-with-tags/package.json @@ -22,7 +22,7 @@ "@alfalab/core-components-mq": "^4.4.0", "@alfalab/core-components-popover": "^6.3.4", "@alfalab/hooks": "^1.13.1", - "@alfalab/icons-glyph": "^2.139.0", + "@alfalab/icons-glyph": "^2.210.0", "classnames": "^2.5.1", "react-merge-refs": "^1.1.0", "tslib": "^2.4.0", diff --git a/packages/select-with-tags/src/__snapshots__/component.test.tsx.snap b/packages/select-with-tags/src/__snapshots__/component.test.tsx.snap index 3c9cf076ff..f9015bda15 100644 --- a/packages/select-with-tags/src/__snapshots__/component.test.tsx.snap +++ b/packages/select-with-tags/src/__snapshots__/component.test.tsx.snap @@ -22,7 +22,7 @@ exports[`SelectWithTags Display tests should match snapshot 1`] = ` class="inputWrapper" >
; value?: string; handleDeleteTag?: (key: string) => void; onInput?: (event: ChangeEvent) => void; @@ -55,7 +56,9 @@ const SIZE_TO_CLASSNAME_MAP = { 72: 'size-72', }; -export const TagList: FC & FormControlProps & TagListOwnProps> = ({ +export const TagList: FC< + Partial & Omit & TagListOwnProps +> = ({ size = 72, open, disabled, diff --git a/packages/select/package.json b/packages/select/package.json index 95025f44da..f60c9e10cb 100644 --- a/packages/select/package.json +++ b/packages/select/package.json @@ -30,7 +30,7 @@ "@alfalab/core-components-skeleton": "^5.2.1", "@alfalab/core-components-shared": "^0.14.0", "@alfalab/hooks": "^1.13.1", - "@alfalab/icons-glyph": "^2.139.0", + "@alfalab/icons-glyph": "^2.210.0", "@juggle/resize-observer": "^3.3.1", "compute-scroll-into-view": "^3.1.0", "classnames": "^2.5.1", diff --git a/packages/select/src/__image_snapshots__/select-click-theme-main-props-snap.png b/packages/select/src/__image_snapshots__/select-click-theme-main-props-snap.png index 05bbb34998..39824495c0 100644 --- a/packages/select/src/__image_snapshots__/select-click-theme-main-props-snap.png +++ b/packages/select/src/__image_snapshots__/select-click-theme-main-props-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:f3200d267cd0207302621909e43b90ea1f760f24048abae945391b00b5cb7180 -size 29665 +oid sha256:4ae8b1bb903434c198f0f60861b3ebbc69db49bd818c067b453c66a18735f75b +size 39096 diff --git a/packages/select/src/__image_snapshots__/select-default-theme-main-props-snap.png b/packages/select/src/__image_snapshots__/select-default-theme-main-props-snap.png index 05bbb34998..39824495c0 100644 --- a/packages/select/src/__image_snapshots__/select-default-theme-main-props-snap.png +++ b/packages/select/src/__image_snapshots__/select-default-theme-main-props-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:f3200d267cd0207302621909e43b90ea1f760f24048abae945391b00b5cb7180 -size 29665 +oid sha256:4ae8b1bb903434c198f0f60861b3ebbc69db49bd818c067b453c66a18735f75b +size 39096 diff --git a/packages/select/src/__snapshots__/Component.test.tsx.snap b/packages/select/src/__snapshots__/Component.test.tsx.snap index 6612e8b6da..543a2999cf 100644 --- a/packages/select/src/__snapshots__/Component.test.tsx.snap +++ b/packages/select/src/__snapshots__/Component.test.tsx.snap @@ -29,10 +29,10 @@ Object { class="inputWrapper" >
@@ -40,7 +40,7 @@ Object { class="addons rightAddons" >
@@ -98,7 +98,7 @@ Object { class="addons rightAddons" >
@@ -207,7 +207,7 @@ exports[`Select Snapshots tests should match snapshot with fatal error 1`] = ` class="addons rightAddons" >
Error @@ -259,10 +259,10 @@ exports[`Select Snapshots tests should match snapshot with visibleOptions 1`] = class="inputWrapper" >
@@ -270,7 +270,7 @@ exports[`Select Snapshots tests should match snapshot with visibleOptions 1`] = class="addons rightAddons" > { options: [[]], block: true, placeholder: 'Выберите элемент', - size: [48, 56, 64], + size: [40, 48, 56, 64], label: ['Элемент', ''], }, size: { width: 300, height: 120 }, diff --git a/packages/select/src/components/arrow/Component.tsx b/packages/select/src/components/arrow/Component.tsx index 059fac991f..6099209dd2 100644 --- a/packages/select/src/components/arrow/Component.tsx +++ b/packages/select/src/components/arrow/Component.tsx @@ -2,16 +2,21 @@ import React from 'react'; import cn from 'classnames'; import { ChevronDownMIcon } from '@alfalab/icons-glyph/ChevronDownMIcon'; +import { ChevronDownSIcon } from '@alfalab/icons-glyph/ChevronDownSIcon'; import { ArrowProps } from '../../typings'; import styles from './index.module.css'; -export const Arrow = ({ open, disabled, className }: ArrowProps) => ( - -); +export const Arrow = ({ open, disabled, className, size }: ArrowProps) => { + const ChevronComponent = size === 40 ? ChevronDownSIcon : ChevronDownMIcon; + + return ( + + ); +}; diff --git a/packages/select/src/components/arrow/index.module.css b/packages/select/src/components/arrow/index.module.css index 8c1caddb53..39c4ae942d 100644 --- a/packages/select/src/components/arrow/index.module.css +++ b/packages/select/src/components/arrow/index.module.css @@ -12,6 +12,11 @@ &.disabled { color: var(--select-arrow-disabled-color); } + + &.size-40 { + width: unset; + height: unset; + } } .open { diff --git a/packages/select/src/components/base-select/Component.tsx b/packages/select/src/components/base-select/Component.tsx index 0d2078b894..6a8ba743f1 100644 --- a/packages/select/src/components/base-select/Component.tsx +++ b/packages/select/src/components/base-select/Component.tsx @@ -674,7 +674,7 @@ export const BaseSelect = forwardRef( placeholder={placeholder} label={label && {label}} labelView={labelView} - Arrow={Arrow && } + Arrow={Arrow && } error={error} hint={hint} valueRenderer={valueRenderer} diff --git a/packages/select/src/components/clear-button/Component.tsx b/packages/select/src/components/clear-button/Component.tsx index 0d37b1c41f..3da0b1ea3b 100644 --- a/packages/select/src/components/clear-button/Component.tsx +++ b/packages/select/src/components/clear-button/Component.tsx @@ -1,23 +1,29 @@ import React from 'react'; +import cn from 'classnames'; import { Button } from '@alfalab/core-components-button'; import { CrossCircleMIcon } from '@alfalab/icons-glyph/CrossCircleMIcon'; +import { CrossCircleSIcon } from '@alfalab/icons-glyph/CrossCircleSIcon'; import { ClearButtonProps } from '../../typings'; import styles from './index.module.css'; -export const ClearButton = ({ disabled, onClick, dataTestId }: ClearButtonProps) => ( - -); +export const ClearButton = ({ disabled, onClick, dataTestId, size }: ClearButtonProps) => { + const IconComponent = size === 40 ? CrossCircleSIcon : CrossCircleMIcon; + + return ( + + ); +}; diff --git a/packages/select/src/components/clear-button/index.module.css b/packages/select/src/components/clear-button/index.module.css index 7d6b3dade1..472a4450f9 100644 --- a/packages/select/src/components/clear-button/index.module.css +++ b/packages/select/src/components/clear-button/index.module.css @@ -21,3 +21,11 @@ .clearButton + * { margin-left: var(--gap-4); } + +.clearButton { + &.size-40 { + & + * { + margin-left: 6px; + } + } +} diff --git a/packages/select/src/components/field/Component.tsx b/packages/select/src/components/field/Component.tsx index 8e4fb37a35..42892512d4 100644 --- a/packages/select/src/components/field/Component.tsx +++ b/packages/select/src/components/field/Component.tsx @@ -90,6 +90,7 @@ export const Field = ({ onClick={onClear} disabled={disabled} dataTestId={getDataTestId(dataTestId, 'clear-icon')} + size={size} /> ) : null} {/* TODO: стоит переделать, но это будет мажорка */} @@ -103,7 +104,7 @@ export const Field = ({ {...restProps} {...innerProps} > -
+
{showPlaceholder && ( )} - {filled &&
{value}
} + {filled && ( +
{value}
+ )}
) : null} diff --git a/packages/select/src/components/field/index.module.css b/packages/select/src/components/field/index.module.css index 7edd937537..93a9c3de7c 100644 --- a/packages/select/src/components/field/index.module.css +++ b/packages/select/src/components/field/index.module.css @@ -38,12 +38,20 @@ text-overflow: ellipsis; overflow: hidden; width: 100%; + + &.size-40 { + @mixin paragraph_component_secondary; + } } .value { overflow: hidden; text-overflow: ellipsis; text-align: left; + + &.size-40 { + @mixin paragraph_component_secondary; + } } .focusVisible { diff --git a/packages/select/src/consts.ts b/packages/select/src/consts.ts index 61e84fbc78..0894012517 100644 --- a/packages/select/src/consts.ts +++ b/packages/select/src/consts.ts @@ -5,6 +5,7 @@ export const SIZE_TO_CLASSNAME_MAP = { m: 'size-56', l: 'size-64', xl: 'size-72', + 40: 'size-40', 48: 'size-48', 56: 'size-56', 64: 'size-64', diff --git a/packages/select/src/docs/Component.stories.tsx b/packages/select/src/docs/Component.stories.tsx index 2bb09688bb..7be049253a 100644 --- a/packages/select/src/docs/Component.stories.tsx +++ b/packages/select/src/docs/Component.stories.tsx @@ -6,6 +6,7 @@ import { SelectDesktop } from '@alfalab/core-components-select/desktop'; import { Select as SelectResponsive } from '@alfalab/core-components-select'; import { SelectMobile, SelectModalMobile } from '@alfalab/core-components-select/mobile'; import { Arrow as ArrowComponent } from '@alfalab/core-components-select/components/arrow'; +import { BaseOption } from '../components'; const options = [ { key: '1', content: 'Neptunium' }, @@ -58,7 +59,7 @@ export const select: Story = { setSelected(selectedMultiple.map((option) => option.key)); }; const block = boolean('block', false); - const size = selectKnob('size', [48, 56, 64, 72], 48); + const size = selectKnob('size', [40, 48, 56, 64, 72], 48); const disabled = boolean('disabled', false); const error = text('error', ''); const hint = text('hint', ''); @@ -66,6 +67,7 @@ export const select: Story = { const allowUnselect = boolean('allowUnselect', true); const closeOnSelect = boolean('closeOnSelect', true); const Arrow = boolean('Arrow', true) ? ArrowComponent : () => null; + const Option = boolean('Default Option', true) ? undefined : BaseOption; const circularNavigation = boolean('circularNavigation', false); const nativeSelect = boolean('nativeSelect', false); const placeholder = text('placeholder', 'Выберите элемент'); @@ -91,6 +93,7 @@ export const select: Story = { allowUnselect={allowUnselect} closeOnSelect={closeOnSelect} Arrow={Arrow} + Option={Option} circularNavigation={circularNavigation} nativeSelect={nativeSelect} placeholder={placeholder} @@ -115,7 +118,7 @@ export const select_mobile: Story = { setSelected(selectedMultiple.map((option) => option.key)); }; const block = boolean('block', false); - const size = selectKnob('size', [48, 56, 64, 72], 48); + const size = selectKnob('size', [40, 48, 56, 64, 72], 48); const disabled = boolean('disabled', false); const error = text('error', ''); const hint = text('hint', ''); @@ -166,7 +169,7 @@ export const select_responsive: Story = { setSelected(selectedMultiple.map((option) => option.key)); }; const block = boolean('block', false); - const size = selectKnob('size', [48, 56, 64, 72], 48); + const size = selectKnob('size', [40, 48, 56, 64, 72], 48); const disabled = boolean('disabled', false); const error = text('error', ''); const hint = text('hint', ''); @@ -174,6 +177,7 @@ export const select_responsive: Story = { const allowUnselect = boolean('allowUnselect', true); const closeOnSelect = boolean('closeOnSelect', true); const Arrow = boolean('Arrow', true) ? ArrowComponent : () => null; + const Option = boolean('Default Option', true) ? undefined : BaseOption; const circularNavigation = boolean('circularNavigation', false); const nativeSelect = boolean('nativeSelect', false); const placeholder = text('placeholder', 'Выберите элемент'); @@ -199,6 +203,7 @@ export const select_responsive: Story = { allowUnselect={allowUnselect} closeOnSelect={closeOnSelect} Arrow={Arrow} + Option={Option} circularNavigation={circularNavigation} nativeSelect={nativeSelect} placeholder={placeholder} @@ -223,7 +228,7 @@ export const select_modal_mobile: Story = { setSelected(selectedMultiple.map((option) => option.key)); }; const block = boolean('block', false); - const size = selectKnob('size', [48, 56, 64, 72], 48); + const size = selectKnob('size', [40, 48, 56, 64, 72], 48); const disabled = boolean('disabled', false); const error = text('error', ''); const hint = text('hint', ''); diff --git a/packages/select/src/typings.ts b/packages/select/src/typings.ts index 7f7aadca02..4b7bb8d2ea 100644 --- a/packages/select/src/typings.ts +++ b/packages/select/src/typings.ts @@ -147,13 +147,13 @@ export type BaseSelectProps = { * Размер компонента * @description s, m, l, xl deprecated, используйте вместо них 48, 56, 64, 72 соответственно */ - size?: 's' | 'm' | 'l' | 'xl' | 48 | 56 | 64 | 72; + size?: 's' | 'm' | 'l' | 'xl' | 40 | 48 | 56 | 64 | 72; /** * Размер пунктов меню * @description s, m, l, xl deprecated, используйте вместо них 48, 56, 64, 72 соответственно */ - optionsSize?: 's' | 'm' | 'l' | 'xl' | 48 | 56 | 64 | 72; + optionsSize?: 's' | 'm' | 'l' | 'xl' | 40 | 48 | 56 | 64 | 72; /** * Растягивает компонент на ширину контейнера @@ -502,6 +502,12 @@ export type ArrowProps = { * Флаг блокировки select'а */ disabled?: boolean; + + /** + * Размер компонента + * @description s, m, l, xl deprecated, используйте вместо них 48, 56, 64, 72 соответственно + */ + size?: BaseSelectProps['size']; }; export type OptionsListProps = { @@ -529,7 +535,7 @@ export type OptionsListProps = { * Размер компонента * @description s, m, l, xl deprecated, используйте вместо них 48, 56, 64, 72 соответственно */ - size?: 's' | 'm' | 'l' | 'xl' | 48 | 56 | 64 | 72; + size?: 's' | 'm' | 'l' | 'xl' | 40 | 48 | 56 | 64 | 72; /** * Компонент пункта меню @@ -678,7 +684,7 @@ export type OptgroupProps = { * Размер компонента * @description s, m, l, xl deprecated, используйте вместо них 48, 56, 64, 72 соответственно */ - size?: 's' | 'm' | 'l' | 'xl' | 48 | 56 | 64 | 72; + size?: 's' | 'm' | 'l' | 'xl' | 40 | 48 | 56 | 64 | 72; /** * Заголовок группы @@ -727,7 +733,7 @@ export type OptionProps = { * Размер компонента * @description s, m, l, xl deprecated, используйте вместо них 48, 56, 64, 72 соответственно */ - size?: 's' | 'm' | 'l' | 'xl' | 48 | 56 | 64 | 72; + size?: 's' | 'm' | 'l' | 'xl' | 40 | 48 | 56 | 64 | 72; /** * Контент пункта меню @@ -960,4 +966,10 @@ export type ClearButtonProps = { * Идентификатор для систем автоматизированного тестирования */ dataTestId?: string; + + /** + * Размер компонента + * @description s, m, l, xl deprecated, используйте вместо них 48, 56, 64, 72 соответственно + */ + size?: FormControlProps['size']; }; diff --git a/packages/slider-input/src/Component.tsx b/packages/slider-input/src/Component.tsx index 83ff8a4aa9..78841d43ff 100644 --- a/packages/slider-input/src/Component.tsx +++ b/packages/slider-input/src/Component.tsx @@ -20,8 +20,14 @@ import styles from './index.module.css'; export type SliderInputProps = Omit< InputProps, - 'min' | 'max' | 'step' | 'value' | 'type' | 'onChange' | 'bottomAddons' + 'min' | 'max' | 'step' | 'value' | 'type' | 'onChange' | 'bottomAddons' | 'size' > & { + /** + * Размер компонента + * @description s, m, l, xl deprecated, используйте вместо них 48, 56, 64, 72 соответственно + */ + size?: Exclude; + /** * Мин. допустимое число */ diff --git a/packages/slider-input/src/__snapshots__/Component.test.tsx.snap b/packages/slider-input/src/__snapshots__/Component.test.tsx.snap index 039494653e..bc37bd7b28 100644 --- a/packages/slider-input/src/__snapshots__/Component.test.tsx.snap +++ b/packages/slider-input/src/__snapshots__/Component.test.tsx.snap @@ -15,10 +15,10 @@ exports[`SliderInput should match snapshot 1`] = ` class="inputWrapper" >
=16.8.0" }, "dependencies": { - "@alfalab/icons-glyph": "^2.139.0", + "@alfalab/icons-glyph": "^2.210.0", "classnames": "^2.5.1", "tslib": "^2.4.0" }, diff --git a/packages/steps/package.json b/packages/steps/package.json index 0c21d8e761..b4087aa3df 100644 --- a/packages/steps/package.json +++ b/packages/steps/package.json @@ -17,7 +17,7 @@ "dependencies": { "@alfalab/core-components-badge": "^5.6.3", "@alfalab/hooks": "^1.13.1", - "@alfalab/icons-glyph": "^2.139.0", + "@alfalab/icons-glyph": "^2.210.0", "classnames": "^2.5.1", "tslib": "^2.4.0" }, diff --git a/packages/tabs/package.json b/packages/tabs/package.json index 4ef5cb4bc6..9e3282943e 100644 --- a/packages/tabs/package.json +++ b/packages/tabs/package.json @@ -24,7 +24,7 @@ "@alfalab/core-components-shared": "^0.14.0", "@alfalab/core-components-icon-button": "^6.11.4", "@alfalab/core-components-skeleton": "^5.2.1", - "@alfalab/icons-glyph": "^2.139.0", + "@alfalab/icons-glyph": "^2.210.0", "classnames": "^2.5.1", "compute-scroll-into-view": "^3.1.0", "lodash": "^4.17.21", diff --git a/packages/textarea/src/Component.tsx b/packages/textarea/src/Component.tsx index 53384e2473..70adab4b68 100644 --- a/packages/textarea/src/Component.tsx +++ b/packages/textarea/src/Component.tsx @@ -211,6 +211,7 @@ export const Textarea = forwardRef( className={cn(className)} fieldClassName={cn(fieldClassName, { [styles.focusVisible]: focusVisible, + [styles['resizable-40']]: resize === 'vertical' && size === 40, })} inputWrapperClassName={cn(styles.wrapper, styles[SIZE_TO_CLASSNAME_MAP[size]], { [styles.hasInnerLabel]: hasInnerLabel, diff --git a/packages/textarea/src/__image_snapshots__/textarea-sprite-click-main-props-2-snap.png b/packages/textarea/src/__image_snapshots__/textarea-sprite-click-main-props-2-snap.png index d4566019d2..b8e0cda9b8 100644 --- a/packages/textarea/src/__image_snapshots__/textarea-sprite-click-main-props-2-snap.png +++ b/packages/textarea/src/__image_snapshots__/textarea-sprite-click-main-props-2-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:ca0b56108ca683ad40db52e8009da4062fd22c5e3bf25656afa22ec83205306f -size 47582 +oid sha256:cd560baf9f634871343aa0415d5a903f5de4ef19117c9e8ac7bcc6b468c556db +size 72052 diff --git a/packages/textarea/src/__image_snapshots__/textarea-sprite-click-main-props-snap.png b/packages/textarea/src/__image_snapshots__/textarea-sprite-click-main-props-snap.png index b4f34d4976..80ba176ac0 100644 --- a/packages/textarea/src/__image_snapshots__/textarea-sprite-click-main-props-snap.png +++ b/packages/textarea/src/__image_snapshots__/textarea-sprite-click-main-props-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:6dfc68900c55437d34f31405eb43771993cad4ff9d78fcd258e78e86428b3ee4 -size 40848 +oid sha256:84755b32c6a0977445ac6375ae6a3f909d15bf58e0aec87f8187cd838d9b6b6b +size 70631 diff --git a/packages/textarea/src/__image_snapshots__/textarea-sprite-default-main-props-2-snap.png b/packages/textarea/src/__image_snapshots__/textarea-sprite-default-main-props-2-snap.png index d4566019d2..b8e0cda9b8 100644 --- a/packages/textarea/src/__image_snapshots__/textarea-sprite-default-main-props-2-snap.png +++ b/packages/textarea/src/__image_snapshots__/textarea-sprite-default-main-props-2-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:ca0b56108ca683ad40db52e8009da4062fd22c5e3bf25656afa22ec83205306f -size 47582 +oid sha256:cd560baf9f634871343aa0415d5a903f5de4ef19117c9e8ac7bcc6b468c556db +size 72052 diff --git a/packages/textarea/src/__image_snapshots__/textarea-sprite-default-main-props-snap.png b/packages/textarea/src/__image_snapshots__/textarea-sprite-default-main-props-snap.png index b4f34d4976..80ba176ac0 100644 --- a/packages/textarea/src/__image_snapshots__/textarea-sprite-default-main-props-snap.png +++ b/packages/textarea/src/__image_snapshots__/textarea-sprite-default-main-props-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:6dfc68900c55437d34f31405eb43771993cad4ff9d78fcd258e78e86428b3ee4 -size 40848 +oid sha256:84755b32c6a0977445ac6375ae6a3f909d15bf58e0aec87f8187cd838d9b6b6b +size 70631 diff --git a/packages/textarea/src/__snapshots__/Component.test.tsx.snap b/packages/textarea/src/__snapshots__/Component.test.tsx.snap index b576c4fe64..3ffe4b7ffa 100644 --- a/packages/textarea/src/__snapshots__/Component.test.tsx.snap +++ b/packages/textarea/src/__snapshots__/Component.test.tsx.snap @@ -12,7 +12,7 @@ exports[`Textarea Snapshots tests should match snapshot 1`] = ` class="inputWrapper wrapper size-48" >