feat(objectInline): support inline boolean fields (#171)

gravity-ui · Feb 16, 2024 · 043761c · 043761c
1 parent 1f3f81c
commit 043761c
Show file tree

Hide file tree

Showing 13 changed files with 30 additions and 6 deletions.
diff --git a/...x.visual.test.tsx-snapshots/Checkbox-layout-transparent-dark-chromium-linux.png b/...x.visual.test.tsx-snapshots/Checkbox-layout-transparent-dark-chromium-linux.png
diff --git a/...box.visual.test.tsx-snapshots/Checkbox-layout-transparent-dark-webkit-linux.png b/...box.visual.test.tsx-snapshots/Checkbox-layout-transparent-dark-webkit-linux.png
diff --git a/....visual.test.tsx-snapshots/Checkbox-layout-transparent-light-chromium-linux.png b/....visual.test.tsx-snapshots/Checkbox-layout-transparent-light-chromium-linux.png
diff --git a/...ox.visual.test.tsx-snapshots/Checkbox-layout-transparent-light-webkit-linux.png b/...ox.visual.test.tsx-snapshots/Checkbox-layout-transparent-light-webkit-linux.png
diff --git a/src/lib/kit/components/Inputs/Checkbox/__tests__/Checkbox.visual.test.tsx b/src/lib/kit/components/Inputs/Checkbox/__tests__/Checkbox.visual.test.tsx
@@ -30,6 +30,12 @@ test.describe('Checkbox', () => {
 
         await expectScreenshot();
     });
+
+    test('layout transparent', async ({mount, expectScreenshot}) => {
+        await mount(<DynamicForm spec={CHECKBOX.layoutTransparent} />);
+
+        await expectScreenshot();
+    });
 });
 
 test.describe('Checkbox view', () => {

diff --git a/src/lib/kit/components/Inputs/Checkbox/__tests__/helpers.ts b/src/lib/kit/components/Inputs/Checkbox/__tests__/helpers.ts
@@ -29,6 +29,14 @@ export const CHECKBOX: Record<string, BooleanSpec> = {
             layoutTitle: 'File Input',
         },
     },
+    layoutTransparent: {
+        type: SpecTypes.Boolean,
+        viewSpec: {
+            type: 'base',
+            layout: 'transparent',
+            layoutTitle: 'Flag',
+        },
+    },
     row_verbose: {
         type: SpecTypes.Boolean,
         viewSpec: {

diff --git a/src/lib/kit/components/Inputs/Text/__tests__/Text.visual.test.tsx b/src/lib/kit/components/Inputs/Text/__tests__/Text.visual.test.tsx
@@ -50,7 +50,7 @@ test.describe('Text Input', () => {
         });
 
         test('layout transperant', async ({mount, expectScreenshot}) => {
-            await mount(<DynamicForm spec={NUMBER_SPEC.layoutTransperant} />);
+            await mount(<DynamicForm spec={NUMBER_SPEC.layoutTransparent} />);
 
             await expectScreenshot();
         });

diff --git a/src/lib/kit/components/Inputs/Text/__tests__/helpers.ts b/src/lib/kit/components/Inputs/Text/__tests__/helpers.ts
@@ -69,7 +69,7 @@ export const NUMBER_SPEC: Record<string, NumberSpec> = {
             placeholder: 'placeholder text',
         },
     },
-    layoutTransperant: {
+    layoutTransparent: {
         type: SpecTypes.Number,
         viewSpec: {
             type: 'base',

diff --git a/src/lib/kit/components/Inputs/TextArea/__tests__/TextArea.visual.test.tsx b/src/lib/kit/components/Inputs/TextArea/__tests__/TextArea.visual.test.tsx
@@ -43,7 +43,7 @@ test.describe('Text Area', () => {
     });
 
     test('layout transperant', async ({mount, expectScreenshot}) => {
-        await mount(<DynamicForm spec={TEXT_AREA_SPEC.layoutTransperant} />);
+        await mount(<DynamicForm spec={TEXT_AREA_SPEC.layoutTransparent} />);
 
         await expectScreenshot();
     });

diff --git a/src/lib/kit/components/Inputs/TextArea/__tests__/helpers.ts b/src/lib/kit/components/Inputs/TextArea/__tests__/helpers.ts
@@ -51,7 +51,7 @@ export const TEXT_AREA_SPEC: Record<string, StringSpec> = {
             layoutDescription: 'description',
         },
     },
-    layoutTransperant: {
+    layoutTransparent: {
         type: SpecTypes.String,
         viewSpec: {
             type: 'textarea',

diff --git a/src/lib/kit/constants/config.tsx b/src/lib/kit/constants/config.tsx
@@ -105,6 +105,7 @@ export const dynamicConfig: DynamicFormConfig = {
             row: Row,
             row_verbose: RowVerbose,
             table_item: TableCell,
+            transparent: Transparent,
         },
         validators: {
             base: getBooleanValidator(),
@@ -214,6 +215,7 @@ export const dynamicViewConfig: DynamicViewConfig = {
             row: ViewRow,
             row_verbose: ViewRow,
             table_item: ViewTableCell,
+            transparent: ViewTransparent,
         },
     },
     number: {

diff --git a/src/lib/kit/utils/objectInline.ts b/src/lib/kit/utils/objectInline.ts
@@ -1,9 +1,10 @@
-import {Spec, isNumberSpec, isStringSpec} from '../../core';
+import {Spec, isBooleanSpec, isNumberSpec, isStringSpec} from '../../core';
 
 export const filterPropertiesForObjectInline = (properties: Record<string, Spec>) => {
     return Object.fromEntries(
         Object.entries(properties).filter(
-            ([, propSpec]) => isStringSpec(propSpec) || isNumberSpec(propSpec),
+            ([, propSpec]) =>
+                isStringSpec(propSpec) || isNumberSpec(propSpec) || isBooleanSpec(propSpec),
         ),
     );
 };
diff --git a/src/stories/ObjectInline.stories.tsx b/src/stories/ObjectInline.stories.tsx
@@ -33,6 +33,13 @@ const baseSpec: ObjectSpec = {
                 layoutTitle: 'Name',
             },
         },
+        license: {
+            type: SpecTypes.Boolean,
+            viewSpec: {
+                type: 'base',
+                layout: 'transparent',
+            },
+        },
     },
     viewSpec: {
         type: 'inline',