Feat/form control size 40

.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
+---
+
+Обновление зависимостей

.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 размер

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",

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"
     },

packages/amount-input/src/__snapshots__/Component.test.tsx.snap

@@ -18,10 +18,10 @@ Object {
               class="inputWrapper"
             >
               <div
-                class="input"
+                class="input size-48"
               >
                 <input
-                  class="input input input"
+                  class="input size-48 input input"
                   inputmode="decimal"
                   pattern="[0-9\\\\s\\\\.,]*"
                   placeholder="0 ₽"
@@ -67,10 +67,10 @@ Object {
             class="inputWrapper"
           >
             <div
-              class="input"
+              class="input size-48"
             >
               <input
-                class="input input input"
+                class="input size-48 input input"
                 inputmode="decimal"
                 pattern="[0-9\\\\s\\\\.,]*"
                 placeholder="0 ₽"
@@ -173,10 +173,10 @@ Object {
               class="inputWrapper"
             >
               <div
-                class="input"
+                class="input size-48"
               >
                 <input
-                  class="input input input"
+                  class="input size-48 input input"
                   inputmode="decimal"
                   pattern="[0-9\\\\s\\\\.,]*"
                   placeholder="0 ₽"
@@ -221,10 +221,10 @@ Object {
               class="inputWrapper"
             >
               <div
-                class="input"
+                class="input size-48"
               >
                 <input
-                  class="input input input"
+                  class="input size-48 input input"
                   inputmode="decimal"
                   pattern="[0-9\\\\s\\\\.,]*"
                   placeholder="0 $"
@@ -274,10 +274,10 @@ Object {
             class="inputWrapper"
           >
             <div
-              class="input"
+              class="input size-48"
             >
               <input
-                class="input input input"
+                class="input size-48 input input"
                 inputmode="decimal"
                 pattern="[0-9\\\\s\\\\.,]*"
                 placeholder="0 $"

packages/amount-input/src/component.screenshots.test.tsx

@@ -82,6 +82,16 @@ describe(
                     },
                 }),
             ],
+            [
+                'sprite size',
+                createSpriteStorybookUrl({
+                    componentName: 'AmountInput',
+                    knobs: {
+                        minority: 100,
+                        size: [40, 48, 56, 64, 72],
+                    },
+                }),
+            ],
         ],
     }),
 );

packages/amount-input/src/docs/Component.stories.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { text, select, boolean, number } from '@storybook/addon-knobs';
 import { StarMIcon } from '@alfalab/icons-glyph/StarMIcon';
+import { DiamondsSIcon } from '@alfalab/icons-glyph/DiamondsSIcon';
 import { AmountInput } from '@alfalab/core-components-amount-input';
 
 const meta: Meta<typeof AmountInput> = {
@@ -15,6 +16,9 @@ type Story = StoryObj<typeof AmountInput>;
 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 (
             <AmountInput
                 value={number('value', null)}
@@ -26,16 +30,17 @@ export const amount_input: Story = {
                 positiveOnly={boolean('positiveOnly', true)}
                 bold={boolean('bold', true)}
                 block={boolean('block', false)}
-                size={select('size', [48, 56, 64, 72], 48)}
+                size={size}
                 disabled={boolean('disabled', false)}
                 placeholder={text('placeholder', undefined)}
                 label={text('label', '')}
                 hint={text('hint', '')}
                 error={text('error', '')}
-                leftAddons={boolean('leftAddons', false) && <StarMIcon />}
+                leftAddons={boolean('leftAddons', false) && <IconComponent />}
                 bottomAddons={boolean('bottomAddons', false) && <span>bottom text</span>}
                 clear={boolean('clear', false)}
                 readOnly={boolean('readOnly', false)}
+                labelView={select('labelView', ['inner', 'outer'], 'inner')}
             />
         );
     },

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",

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"

packages/bank-card/src/__snapshots__/Component.test.tsx.snap

@@ -55,11 +55,11 @@ exports[`BankCard Snapshots tests should match snapshots 1`] = `
                 </span>
               </div>
               <div
-                class="input"
+                class="input size-m"
               >
                 <input
                   aria-label="Номер карты или счёта"
-                  class="input input size-56 hasInnerLabel input"
+                  class="input size-m input size-56 hasInnerLabel input"
                   inputmode="numeric"
                   pattern="[0-9]*"
                   type="text"
@@ -172,11 +172,11 @@ exports[`BankCard Snapshots tests should match snapshots 2`] = `
                 </span>
               </div>
               <div
-                class="input"
+                class="input size-m"
               >
                 <input
                   aria-label="Номер карты или счёта"
-                  class="input input size-56 hasInnerLabel input"
+                  class="input size-m input size-56 hasInnerLabel input"
                   inputmode="numeric"
                   pattern="[0-9]*"
                   type="text"
@@ -287,11 +287,11 @@ exports[`BankCard Snapshots tests should match snapshots 3`] = `
                 </span>
               </div>
               <div
-                class="input"
+                class="input size-m"
               >
                 <input
                   aria-label="Номер карты или счёта"
-                  class="input input size-56 hasInnerLabel input"
+                  class="input size-m input size-56 hasInnerLabel input"
                   inputmode="numeric"
                   pattern="[0-9]*"
                   type="text"
@@ -402,11 +402,11 @@ exports[`BankCard Snapshots tests should match snapshots 4`] = `
                 </span>
               </div>
               <div
-                class="input"
+                class="input size-m"
               >
                 <input
                   aria-label="Номер карты или счёта"
-                  class="input input size-56 hasInnerLabel input"
+                  class="input size-m input size-56 hasInnerLabel input"
                   inputmode="numeric"
                   pattern="[0-9]*"
                   type="text"
@@ -501,11 +501,11 @@ exports[`BankCard Snapshots tests should match snapshots 5`] = `
                 </span>
               </div>
               <div
-                class="input"
+                class="input size-m"
               >
                 <input
                   aria-label="Номер карты"
-                  class="input input size-56 hasInnerLabel input"
+                  class="input size-m input size-56 hasInnerLabel input"
                   inputmode="numeric"
                   pattern="[0-9]*"
                   type="text"
@@ -616,11 +616,11 @@ exports[`BankCard Snapshots tests should match snapshots 6`] = `
                 </span>
               </div>
               <div
-                class="input"
+                class="input size-m"
               >
                 <input
                   aria-label="Номер счёта"
-                  class="input input size-56 hasInnerLabel input"
+                  class="input size-m input size-56 hasInnerLabel input"
                   inputmode="numeric"
                   pattern="[0-9]*"
                   type="text"

packages/calendar-input/package.json

@@ -21,7 +21,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",