Fix alignment between label and suffix in Field

.changeset/orange-drinks-add.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Fixed alignment between label and suffix in Field component

src/components/forms/FieldWrapper.tsx

@@ -133,29 +133,21 @@ function FieldWrapper(props: CubeFieldWrapperProps, ref) {
       {...labelProps}
     >
       <Flex placeContent="baseline space-between" width="100%">
-        {tooltip || labelSuffix || extra ? (
-          <Space placeItems="baseline" gap="0.5x">
-            {label ? (
-              tooltip || labelSuffix || extra ? (
-                <div>{label}</div>
-              ) : (
-                label
-              )
-            ) : null}
-            {tooltip ? (
-              <TooltipProvider
-                title={tooltip}
-                activeWrap
-                width="initial max-content 40x"
-              >
-                <InfoCircleOutlined style={{ color: 'var(--primary-color)' }} />
-              </TooltipProvider>
-            ) : null}
-            {labelSuffix && <div>{labelSuffix}</div>}
-          </Space>
-        ) : (
+        <Space placeItems="center" gap="1x">
           <div>{label}</div>
-        )}
+
+          {tooltip ? (
+            <TooltipProvider
+              title={tooltip}
+              activeWrap
+              width="initial max-content 40x"
+            >
+              <InfoCircleOutlined style={{ color: 'var(--primary-color)' }} />
+            </TooltipProvider>
+          ) : null}
+
+          <div>{labelSuffix}</div>
+        </Space>
 
         {extra && <Text preset="t3">{extra}</Text>}
       </Flex>

src/components/forms/Form/Field.stories.tsx

@@ -2,6 +2,8 @@ import { Meta, Story } from '@storybook/react';
 import { baseProps } from '../../../stories/lists/baseProps';
 import { CubeFieldProps, Field } from './Field';
 import { TextInput } from '../TextInput/TextInput';
+import { Button } from '../../actions';
+import { DollarCircleFilled } from '@ant-design/icons';
 
 export default {
   title: 'Forms/Field',
@@ -77,3 +79,25 @@ WithSuffixExtraAndTooltip.args = {
   extra: 'Extra info',
   tooltip: 'Long description',
 };
+
+export const WithButtonSuffix = Template.bind({});
+WithButtonSuffix.args = {
+  labelSuffix: (
+    <Button size="small" icon={<DollarCircleFilled />} placeSelf="center" />
+  ),
+};
+
+export const WithButtonSuffixAndTooltip = Template.bind({});
+WithButtonSuffixAndTooltip.args = {
+  labelSuffix: (
+    <Button
+      width="3x"
+      height="3x"
+      type="clear"
+      size="small"
+      icon={<DollarCircleFilled />}
+      placeSelf="center"
+    />
+  ),
+  tooltip: 'Long description',
+};

src/components/forms/Label.tsx

@@ -54,7 +54,6 @@ export const INLINE_LABEL_STYLES: Styles = {
   color: {
     '': '#dark.85',
     invalid: '#danger-text',
-    disabled: '#dark.30',
   },
   whiteSpace: 'nowrap',
 } as const;
@@ -66,7 +65,6 @@ export const LABEL_STYLES: Styles = {
   color: {
     '': '#dark',
     invalid: '#danger-text',
-    disabled: '#dark.30',
   },
   whiteSpace: 'nowrap',
   width: {

src/components/pickers/Select/Select.stories.tsx

@@ -69,5 +69,7 @@ WithIcon.args = { icon: true };
 export const OverTheCustomBG = Template.bind({});
 OverTheCustomBG.parameters = { backgrounds: { default: 'gray' } };
 
+export const Disabled = Template.bind({});
+Disabled.args = { isDisabled: true, label: 'Disabled' };
 // export const Multiple = Template.bind({});
 // Multiple.args = { icon: true, defaultSelectedKeys: ['red', 'violet'] };