feat: Desing change (#276)

playwright/core/mountFixture.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+// eslint-disable-next-line import/no-extraneous-dependencies
 import type {JsonObject} from '@playwright/experimental-ct-core/types/component';
 import type {MountOptions} from '@playwright/experimental-ct-react';
 
@@ -9,14 +10,19 @@ export const mountFixture: PlaywrightFixture<MountFixture> = async ({mount: base
     const mount = async (
         component: JSX.Element,
         options?: MountOptions<JsonObject> | undefined,
+        style?: React.CSSProperties | undefined,
     ) => {
         return await baseMount(
             <div
-                style={{
-                    padding: 20,
-                    width: 'fit-content',
-                    height: 'fit-content',
-                }}
+                style={
+                    style
+                        ? style
+                        : {
+                              padding: 20,
+                              width: 'fit-content',
+                              height: 'fit-content',
+                          }
+                }
                 className="playwright-wrapper-test"
             >
                 {component}

playwright/core/types.ts

@@ -1,4 +1,3 @@
-import type {ComponentFixtures} from '@playwright/experimental-ct-react';
 import type {
     Locator,
     PageScreenshotOptions,
@@ -8,6 +7,26 @@ import type {
     PlaywrightWorkerOptions,
     TestFixture,
 } from '@playwright/test';
+import type {MountOptions} from '@playwright/experimental-ct-react';
+
+type JsonPrimitive = string | number | boolean | null;
+type JsonValue = JsonPrimitive | JsonObject | JsonArray;
+type JsonArray = JsonValue[];
+
+type JsonObject = {[Key in string]?: JsonValue};
+
+interface MountResult extends Locator {
+    unmount(): Promise<void>;
+    update(component: JSX.Element): Promise<void>;
+}
+
+interface ComponentFixtures {
+    mount<HooksConfig extends JsonObject>(
+        component: JSX.Element,
+        options?: MountOptions<HooksConfig>,
+        style?: React.CSSProperties | undefined,
+    ): Promise<MountResult>;
+}
 
 type PlaywrightTestFixtures = PlaywrightTestArgs & PlaywrightTestOptions & ComponentFixtures;
 type PlaywrightWorkerFixtures = PlaywrightWorkerArgs & PlaywrightWorkerOptions;

src/lib/kit/components/AccordeonCard/AccordeonCard.scss

@@ -91,7 +91,7 @@
     }
 
     &__interal-actions {
-        margin-right: var(--df-accordeon-card-interal-actions-margin-right, $df-offset-5);
+        margin-right: var(--df-accordeon-card-interal-actions-margin-right, var(--g-spacing-1));
     }
 
     &__toggle-icon_open {

src/lib/kit/components/Card/Card.scss

@@ -59,7 +59,7 @@
         align-items: center;
 
         & > * {
-            margin-left: var(--df-card-header-right-child-margin-left, $df-offset-10);
+            margin-left: var(--df-card-header-right-child-margin-left, var(--g-spacing-2));
         }
     }
 
@@ -75,7 +75,7 @@
     }
 
     &__note {
-        margin-left: var(--df-card-note-margin-left, $df-offset-5);
+        margin-left: var(--df-card-note-margin-left, var(--g-spacing-1));
 
         .gc-help-popover {
             display: flex;

src/lib/kit/components/CopyButton/CopyButton.scss

@@ -4,7 +4,10 @@
     width: 20px;
     display: none;
     position: relative;
-    margin: -1px 0 0 5px;
+    margin: var(
+        --df-copy-button-margin,
+        var(--g-spacing-0) var(--g-spacing-0) var(--g-spacing-0) var(--g-spacing-1)
+    );
 
     &__button {
         position: absolute;

src/lib/kit/components/GroupIndent/GroupIndent.scss

@@ -3,11 +3,11 @@
 .#{$ns}group-indent {
     padding: var(
         --df-group-indent-padding,
-        $df-offset-11 var(--g-spacing-0) var(--g-spacing-0) var(--g-spacing-5)
+        var(--g-spacing-3) var(--g-spacing-0) var(--g-spacing-0) var(--g-spacing-5)
     );
     margin: var(
         --df-group-indent-margin,
-        -$df-offset-11 var(--g-spacing-0) var(--g-spacing-0) $df-offset-5
+        $negative-g-spacing-3 var(--g-spacing-0) var(--g-spacing-0) var(--g-spacing-1)
     );
     border-left: 1px solid var(--g-color-line-generic-accent);
 
@@ -22,7 +22,7 @@
     & > .#{$ns}simple-vertical-accordeon_view {
         margin-top: var(
             --df-group-indent-simple-vertical-accordeon-view-margin-top,
-            -$df-offset-10
+            $negative-g-spacing-3
         );
     }
 }

src/lib/kit/components/Inputs/ArrayBase/ArrayBase.scss

@@ -27,7 +27,7 @@
     &__item-prefix {
         margin: var(
             --df-array-base-item-prefix-margin,
-            -$df-offset-7 var(--g-spacing-0) var(--g-spacing-2)
+            $negative-g-spacing-2 var(--g-spacing-0) var(--g-spacing-2)
         );
     }
 

src/lib/kit/components/Inputs/CheckboxGroup/CheckboxGroup.scss

@@ -6,11 +6,11 @@
     height: var(--df-checkbox-height, $df-checkbox-height);
 
     .g-control-label__text {
-        margin-inline-start: var(--df-checkbox-margint-start, 5px);
+        margin-inline-start: var(--df-checkbox-margint-start, var(--g-spacing-1));
     }
 
     & > *:not(:last-child) {
-        margin-right: var(--df-checkbox-group-child-margin-right, $df-offset-6);
+        margin-right: var(--df-checkbox-group-child-margin-right, var(--g-spacing-3));
     }
 
     &_vertical {
@@ -22,7 +22,7 @@
         & > *:not(:last-child) {
             margin: var(
                 --df-checkbox-group-vertical-child-margin,
-                var(--g-spacing-0) var(--g-spacing-0) $df-offset-6
+                var(--g-spacing-0) var(--g-spacing-0) var(--g-spacing-2)
             );
         }
     }

src/lib/kit/components/Inputs/CheckboxGroup/__tests__/CheckboxGroup.visual.test.tsx

@@ -8,13 +8,19 @@ import {DynamicView} from '~playwright/core/DynamicView';
 
 test.describe('CheckboxGroup', () => {
     test('default', async ({mount, expectScreenshot}) => {
-        await mount(<DynamicForm spec={CHECKBOX_GROUP.default} />);
+        await mount(<DynamicForm spec={CHECKBOX_GROUP.default} />, undefined, {
+            width: '660px',
+            padding: 20,
+        });
 
         await expectScreenshot();
     });
 
     test('default value', async ({mount, expectScreenshot}) => {
-        await mount(<DynamicForm spec={CHECKBOX_GROUP.defaultValue} />);
+        await mount(<DynamicForm spec={CHECKBOX_GROUP.defaultValue} />, undefined, {
+            width: '660px',
+            padding: 20,
+        });
 
         await expectScreenshot();
     });
@@ -26,7 +32,10 @@ test.describe('CheckboxGroup', () => {
     });
 
     test('disabled', async ({mount, expectScreenshot}) => {
-        await mount(<DynamicForm spec={CHECKBOX_GROUP.disabled} />);
+        await mount(<DynamicForm spec={CHECKBOX_GROUP.disabled} />, undefined, {
+            width: '660px',
+            padding: 20,
+        });
 
         await expectScreenshot();
     });

src/lib/kit/components/Inputs/FileInput/FileInput.scss

@@ -9,7 +9,7 @@
 
     &__file-name {
         display: block;
-        margin: var(--df-file-input-file-name-margin, auto $df-offset-10);
+        margin: var(--df-file-input-file-name-margin, auto var(--g-spacing-2));
         max-width: var(--df-file-input-file-name-max-width, 160px);
     }
 }

src/lib/kit/components/Inputs/MonacoInput/MonacoHeader.scss

@@ -4,7 +4,7 @@
     height: var(--df-monaco-header-height, 52px);
     display: flex;
     justify-content: space-between;
-    padding: var(--df-monaco-header-padding, $df-offset-15);
+    padding: var(--df-monaco-header-padding, var(--g-spacing-4));
     align-items: center;
     background-color: var(--g-color-base-float-hover);
 }

src/lib/kit/components/Inputs/MonacoInput/MonacoInputDialog.scss

@@ -4,7 +4,7 @@
     .g-dialog-footer {
         padding: var(
             --df-monaco-input-dialog-dialog-footer-padding,
-            $df-offset-6 var(--g-spacing-8) var(--g-spacing-8)
+            var(--g-spacing-2) var(--g-spacing-8) var(--g-spacing-8)
         );
     }
 

src/lib/kit/components/Inputs/NumberWithScale/NumberWithScale.scss

@@ -7,6 +7,6 @@
 
     &__select {
         max-width: var(--df-number-with-scale-select-max-width, 102px);
-        margin-left: var(--df-number-with-scale-select-margin-left, $df-offset-5);
+        margin-left: var(--df-number-with-scale-select-margin-left, var(--g-spacing-1));
     }
 }