fix: item prefix view

gravity-ui · Aug 21, 2023 · 5044acd · 5044acd
1 parent a92d81f
commit 5044acd
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 16 deletions.
diff --git a/src/lib/kit/components/Inputs/ArrayBase/ArrayBase.scss b/src/lib/kit/components/Inputs/ArrayBase/ArrayBase.scss
@@ -23,7 +23,7 @@
     }
 
     &__item-prefix {
-        width: 42px;
+        max-width: 50px;
         margin-right: 3px;
         padding-top: 5px;
         height: 20px;
@@ -36,11 +36,12 @@
 
     &__item-prefix-text {
         display: block;
+        color: var(--g-color-text-secondary);
 
         &_long-value {
             white-space: nowrap;
             overflow: hidden;
-            width: 42px;
+            max-width: 50px;
         }
     }
 }
diff --git a/src/lib/kit/components/Inputs/ArrayBase/ArrayBase.tsx b/src/lib/kit/components/Inputs/ArrayBase/ArrayBase.tsx
@@ -158,10 +158,10 @@ export const ArrayBase: ArrayInput = ({spec, name, arrayInput, input}) => {
                     );
                 }
 
-                const itemPrefixWidth =
-                    document.getElementById(`${key}-item-prefix`)?.offsetWidth || 0;
+                const itemPrefixWidth = document.getElementById(`1-item-prefix`)?.offsetWidth || 0;
+                const itemPrefixDisabledPopover = itemPrefixWidth < 50;
                 const itemPrefix = idx === 0 ? null : spec.viewSpec.itemPrefix;
-                const itemPrefixShowPopover = itemPrefixWidth < 42;
+                const style = idx === 0 ? {width: itemPrefixWidth} : undefined;
 
                 return (
                     <div key={`${name}.<${key}>`} className={b('item-wrapper')}>
@@ -171,13 +171,14 @@ export const ArrayBase: ArrayInput = ({spec, name, arrayInput, input}) => {
                                 content={itemPrefix}
                                 className={b('item-prefix')}
                                 contentClassName={b('item-prefix-tooltip')}
-                                disabled={itemPrefixShowPopover}
+                                disabled={idx === 0 ? true : itemPrefixDisabledPopover}
                             >
                                 <span
-                                    id={`${key}-item-prefix`}
+                                    id={`${idx}-item-prefix`}
                                     className={b('item-prefix-text', {
-                                        'long-value': !itemPrefixShowPopover,
+                                        'long-value': !itemPrefixDisabledPopover,
                                     })}
+                                    style={style}
                                 >
                                     {itemPrefix}
                                 </span>

diff --git a/src/lib/kit/components/Views/ArrayBaseView/ArrayBaseView.scss b/src/lib/kit/components/Views/ArrayBaseView/ArrayBaseView.scss
@@ -6,7 +6,7 @@
     }
 
     &__item-prefix {
-        width: 42px;
+        max-width: 50px;
         margin-right: 3px;
         height: 20px;
         overflow: hidden;
@@ -18,11 +18,12 @@
 
     &__item-prefix-text {
         display: block;
+        color: var(--g-color-text-secondary);
 
         &_long-value {
             white-space: nowrap;
             overflow: hidden;
-            width: 42px;
+            max-width: 50px;
         }
     }
 }
diff --git a/src/lib/kit/components/Views/ArrayBaseView/ArrayBaseView.tsx b/src/lib/kit/components/Views/ArrayBaseView/ArrayBaseView.tsx
@@ -43,10 +43,10 @@ export const ArrayBaseView: ArrayView = ({spec, name, value = []}) => {
                     return null;
                 }
 
-                const itemPrefixWidth =
-                    document.getElementById(`${idx}-item-prefix`)?.offsetWidth || 0;
+                const itemPrefixWidth = document.getElementById(`1-item-prefix`)?.offsetWidth || 0;
+                const itemPrefixDisabledPopover = itemPrefixWidth < 50;
                 const itemPrefix = idx === 0 ? null : spec.viewSpec.itemPrefix;
-                const itemPrefixShowPopover = itemPrefixWidth < 42;
+                const style = idx === 0 ? {width: itemPrefixWidth} : undefined;
 
                 if (spec.viewSpec.itemPrefix) {
                     return (
@@ -56,13 +56,14 @@ export const ArrayBaseView: ArrayView = ({spec, name, value = []}) => {
                                 content={itemPrefix}
                                 className={b('item-prefix')}
                                 contentClassName={b('item-prefix-tooltip')}
-                                disabled={itemPrefixShowPopover}
+                                disabled={idx === 0 ? true : itemPrefixDisabledPopover}
                             >
                                 <span
                                     id={`${idx}-item-prefix`}
                                     className={b('item-prefix-text', {
-                                        'long-value': !itemPrefixShowPopover,
+                                        'long-value': !itemPrefixDisabledPopover,
                                     })}
+                                    style={style}
                                 >
                                     {itemPrefix}
                                 </span>

diff --git a/src/stories/components/InputPreview/constants.ts b/src/stories/components/InputPreview/constants.ts
@@ -142,7 +142,7 @@ const disabled: BooleanSpec = {
 const getViewType = (map: Record<string, unknown>): StringSpec => ({
     type: SpecTypes.String,
     enum: ['―', ...Object.keys(map)],
-    viewSpec: {type: 'select', layout: 'row', layoutTitle: 'View type'},
+    viewSpec: {type: 'select', layout: 'row', layoutTitle: 'Type'},
 });
 
 const getLayoutSpec = (map: Record<string, unknown>): StringSpec => ({