Feat/redesign for corp

.changeset/loud-plants-judge.md

@@ -0,0 +1,22 @@
+---
+'@alfalab/core-components-button': minor
+'@alfalab/core-components-calendar': minor
+'@alfalab/core-components-calendar-range': minor
+'@alfalab/core-components-code-input': minor
+'@alfalab/core-components-custom-button': minor
+'@alfalab/core-components-file-upload-item': minor
+'@alfalab/core-components-form-control': minor
+'@alfalab/core-components-icon-button': minor
+'@alfalab/core-components-input-autocomplete': minor
+'@alfalab/core-components-modal': minor
+'@alfalab/core-components-navigation-bar-private': minor
+'@alfalab/core-components-notification': minor
+'@alfalab/core-components-notification-manager': minor
+'@alfalab/core-components-password-input': minor
+'@alfalab/core-components-picker-button': minor
+'@alfalab/core-components-select': minor
+'@alfalab/core-components-side-panel': minor
+'@alfalab/core-components-themes': minor
+---
+
+Обновление темы corp

packages/calendar-range/src/__snapshots__/Component.test.tsx.snap

@@ -48,7 +48,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
           >
             <button
               aria-label="Предыдущий период"
-              class="component text size-48 hug size-48 component text component text cc-icon-button arrow primary component"
+              class="component text size-48 hug size-48 component text component text cc-icon-button arrow primary component border-32"
               data-test-id="period-slider-btn-previous-day"
               type="button"
             >
@@ -81,7 +81,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
             </span>
             <button
               aria-label="Следующий период"
-              class="component text size-48 hug size-48 component text component text cc-icon-button arrow primary component"
+              class="component text size-48 hug size-48 component text component text cc-icon-button arrow primary component border-32"
               data-test-id="period-slider-btn-next-day"
               type="button"
             >
@@ -964,7 +964,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
           >
             <button
               aria-label="Предыдущий период"
-              class="component text size-48 hug size-48 component text component text cc-icon-button arrow primary component"
+              class="component text size-48 hug size-48 component text component text cc-icon-button arrow primary component border-32"
               data-test-id="period-slider-btn-previous-day"
               type="button"
             >
@@ -997,7 +997,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
             </span>
             <button
               aria-label="Следующий период"
-              class="component text size-48 hug size-48 component text component text cc-icon-button arrow primary component"
+              class="component text size-48 hug size-48 component text component text cc-icon-button arrow primary component border-32"
               data-test-id="period-slider-btn-next-day"
               type="button"
             >

packages/calendar/src/__snapshots__/Component.test.tsx.snap

@@ -3412,7 +3412,7 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
       >
         <button
           aria-label="Предыдущий период"
-          class="component text size-48 hug size-48 component text component text cc-icon-button arrow primary component"
+          class="component text size-48 hug size-48 component text component text cc-icon-button arrow primary component border-32"
           data-test-id="period-slider-btn-previous-day"
           type="button"
         >
@@ -3445,7 +3445,7 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
         </span>
         <button
           aria-label="Следующий период"
-          class="component text size-48 hug size-48 component text component text cc-icon-button arrow primary component"
+          class="component text size-48 hug size-48 component text component text cc-icon-button arrow primary component border-32"
           data-test-id="period-slider-btn-next-day"
           type="button"
         >

packages/calendar/src/components/period-slider/__snapshots__/Component.test.tsx.snap

@@ -9,7 +9,7 @@ exports[`PeriodSlider empty PeriodSlider empty PeriodSlider default title snapsh
   >
     <button
       aria-label="Предыдущий период"
-      class="component text size-48 hug size-48 component text component text cc-icon-button arrow primary component"
+      class="component text size-48 hug size-48 component text component text cc-icon-button arrow primary component border-32"
       data-test-id="period-slider-btn-previous-day"
       disabled=""
       type="button"
@@ -43,7 +43,7 @@ exports[`PeriodSlider empty PeriodSlider empty PeriodSlider default title snapsh
     </span>
     <button
       aria-label="Следующий период"
-      class="component text size-48 hug size-48 component text component text cc-icon-button arrow primary component"
+      class="component text size-48 hug size-48 component text component text cc-icon-button arrow primary component border-32"
       data-test-id="period-slider-btn-next-day"
       disabled=""
       type="button"
@@ -83,7 +83,7 @@ exports[`PeriodSlider empty PeriodSlider empty PeriodSlider specific title snaps
   >
     <button
       aria-label="Предыдущий период"
-      class="component text size-48 hug size-48 component text component text cc-icon-button arrow primary component"
+      class="component text size-48 hug size-48 component text component text cc-icon-button arrow primary component border-32"
       data-test-id="period-slider-btn-previous-day"
       disabled=""
       type="button"
@@ -117,7 +117,7 @@ exports[`PeriodSlider empty PeriodSlider empty PeriodSlider specific title snaps
     </span>
     <button
       aria-label="Следующий период"
-      class="component text size-48 hug size-48 component text component text cc-icon-button arrow primary component"
+      class="component text size-48 hug size-48 component text component text cc-icon-button arrow primary component border-32"
       data-test-id="period-slider-btn-next-day"
       disabled=""
       type="button"

packages/code-input/src/components/input/component.tsx

@@ -64,7 +64,11 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
                 ref={ref}
                 className={cn(styles.input, stylesInput.component, {
                     [styles.hasError]: error,
+                    [stylesInput.hasError]: error,
+
                     [styles.disabled]: disabled,
+                    [stylesInput.disabled]: disabled,
+
                     [styles.compact]: compact,
                     [stylesInput.compact]: Boolean(stylesInput.compact) && compact,
                 })}

packages/code-input/src/desktop/desktop.module.css

@@ -3,4 +3,18 @@
 
 .component {
     background-color: var(--code-input-bg-color);
+    box-shadow: var(--code-input-box-shadow);
+    border-radius: var(--code-input-border-radius);
+
+    &.disabled {
+        box-shadow: var(--code-input-disabled-box-shadow);
+    }
+
+    &.hasError {
+        box-shadow: var(--code-input-error-box-shadow);
+    }
+
+    &:not(.disabled):not(.hasError):hover {
+        box-shadow: var(--code-input-box-shadow-hover);
+    }
 }

packages/code-input/src/vars.css

@@ -9,4 +9,15 @@
     --code-input-bg-color: var(--form-control-bg-color);
     --code-input-mobile-bg-color: var(--color-light-neutral-translucent-100);
     --code-input-error-bg-color: var(--color-light-status-muted-negative);
+    --code-input-box-shadow: none;
+    --code-input-disabled-box-shadow: none;
+
+    /* border */
+    --code-input-border-radius: var(--border-radius-4);
+
+    /* hover */
+    --code-input-box-shadow-hover: none;
+
+    /* error */
+    --code-input-error-box-shadow: none;
 }

packages/file-upload-item/src/__snapshots__/Component.test.tsx.snap

@@ -50,7 +50,7 @@ Object {
         </div>
         <a
           aria-label="скачать"
-          class="component text size-48 hug size-48 component text component text cc-icon-button download primary component"
+          class="component text size-48 hug size-48 component text component text cc-icon-button download primary component border-24"
           download="новое_название_файла"
           href="/link"
         >
@@ -78,7 +78,7 @@ Object {
         </a>
         <button
           aria-label="удалить"
-          class="component text size-48 hug size-48 component text component text cc-icon-button delete primary component"
+          class="component text size-48 hug size-48 component text component text cc-icon-button delete primary component border-24"
           type="button"
         >
           <span
@@ -152,7 +152,7 @@ Object {
       </div>
       <a
         aria-label="скачать"
-        class="component text size-48 hug size-48 component text component text cc-icon-button download primary component"
+        class="component text size-48 hug size-48 component text component text cc-icon-button download primary component border-24"
         download="новое_название_файла"
         href="/link"
       >
@@ -180,7 +180,7 @@ Object {
       </a>
       <button
         aria-label="удалить"
-        class="component text size-48 hug size-48 component text component text cc-icon-button delete primary component"
+        class="component text size-48 hug size-48 component text component text cc-icon-button delete primary component border-24"
         type="button"
       >
         <span

packages/form-control/src/Component.screenshots.test.tsx

@@ -141,3 +141,27 @@ describe('FormControl | screenshots hint and error', () => {
         ['default', 'site', 'mobile'].forEach((theme) => testCase(theme, colors));
     });
 });
+
+describe('FormControl | screenshots theme corp', () => {
+    screenshotTesting({
+        cases: [
+            [
+                'sprite',
+                createSpriteStorybookUrl({
+                    componentName: 'FormControl',
+                    knobs: {
+                        block: true,
+                        size: [48, 56, 64, 72],
+                        disabled: [false, true],
+                        error: ['', 'Error'],
+                    },
+                    size: { width: 350, height: 150 },
+                }),
+            ],
+        ],
+        screenshotOpts: {
+            fullPage: true,
+        },
+        theme: 'corp',
+    })();
+});

packages/form-control/src/components/base-form-control/Component.tsx

@@ -237,10 +237,14 @@ export const BaseFormControl = React.forwardRef<HTMLDivElement, BaseFormControlP
                             [commonStyles.disabled]: disabled || readOnly,
                             [colorCommonStyles[colors].disabled]: disabled || readOnly,
                             [colorStyles[colors].disabled]: disabled || readOnly,
+
                             [commonStyles.filled]: filled,
                             [commonStyles.hasInnerLabel]: label && labelView === 'inner',
+
                             [commonStyles.focused]: focused,
                             [colorCommonStyles[colors].focused]: focused,
+                            [colorStyles[colors].focused]: focused,
+
                             [commonStyles.hasError]: error,
                             [colorCommonStyles[colors].hasError]: error,
                             [colorStyles[colors].hasError]:

packages/form-control/src/desktop/default.desktop.module.css

@@ -4,12 +4,18 @@
     background-color: var(--form-control-bg-color);
 }
 
+.inner:not(.focused):not(.hasError):not(.disabled) {
+    box-shadow: var(--form-control-box-shadow);
+
+    &:hover {
+        box-shadow: var(--form-control-box-shadow-hover);
+    }
+}
+
 .inner.hasError {
     background-color: var(--form-control-error-bg-color);
 }
 
-/* DISABLED STATE */
-
 .disabled.hasError {
     box-shadow: var(--form-control-error-disabled-shadow);
 }

packages/form-control/src/vars.css

@@ -11,6 +11,7 @@
     --form-control-inverted-color: var(--color-light-text-primary-inverted);
     --form-control-inverted-label-color: var(--color-light-text-secondary-inverted);
     --form-control-inverted-hint-color: var(--color-light-text-secondary-inverted);
+    --form-control-box-shadow: none;
 
     /* disabled */
     --form-control-disabled-bg-color: var(--color-light-neutral-translucent-100);
@@ -39,6 +40,7 @@
     /* hover */
     --form-control-hover-bg-color: var(--color-light-neutral-translucent-100);
     --form-control-inverted-hover-bg-color: var(--color-light-neutral-translucent-100-inverted);
+    --form-control-box-shadow-hover: none;
 
     /* error */
     --form-control-error-color: var(--color-light-text-negative);

packages/icon-button/src/Component.tsx

@@ -9,6 +9,8 @@ import cn from 'classnames';
 
 import { Button, ButtonProps } from '@alfalab/core-components-button';
 
+import { transformSize } from './helpers/transformSize';
+
 import defaultColors from './default.module.css';
 import styles from './index.module.css';
 import invertedColors from './inverted.module.css';
@@ -99,12 +101,13 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
                 className,
                 colorStyles[colors][view],
                 colorStyles[colors].component,
+                styles[`border-${transformSize(size)}`],
                 {
                     [colorStyles[colors].loader]: restProps.loading,
                     [colorStyles[colors].transparentBg]: transparentBg,
                 },
             )}
-            size='s'
+            size='s' /** todo рассмотреть возможность динамического изменения размера */
         >
             <span
                 className={cn(

packages/icon-button/src/__snapshots__/Component.test.tsx.snap

@@ -6,7 +6,7 @@ Object {
   "baseElement": <body>
     <div>
       <a
-        class="component text size-48 hug size-48 component text component text cc-icon-button primary component"
+        class="component text size-48 hug size-48 component text component text cc-icon-button primary component border-48"
         data-test-id="test-id"
         href="http://example.com"
       >
@@ -36,7 +36,7 @@ Object {
   </body>,
   "container": <div>
     <a
-      class="component text size-48 hug size-48 component text component text cc-icon-button primary component"
+      class="component text size-48 hug size-48 component text component text cc-icon-button primary component border-48"
       data-test-id="test-id"
       href="http://example.com"
     >
@@ -123,7 +123,7 @@ Object {
   "baseElement": <body>
     <div>
       <button
-        class="component text size-48 hug size-48 component text component text cc-icon-button primary component"
+        class="component text size-48 hug size-48 component text component text cc-icon-button primary component border-48"
         type="button"
       >
         <span
@@ -152,7 +152,7 @@ Object {
   </body>,
   "container": <div>
     <button
-      class="component text size-48 hug size-48 component text component text cc-icon-button primary component"
+      class="component text size-48 hug size-48 component text component text cc-icon-button primary component border-48"
       type="button"
     >
       <span

packages/icon-button/src/helpers/transformSize.ts

@@ -0,0 +1,14 @@
+import { IconButtonProps } from '@alfalab/core-components-icon-button';
+
+export const transformSize = (size: IconButtonProps['size'] = 48) => {
+    switch (size) {
+        case 'xxs':
+            return 24;
+        case 'xs':
+            return 32;
+        case 's':
+            return 40;
+        default:
+            return size;
+    }
+};