fix additionalLabel Field styles

Author: VeronaPl

src/components/Field/index.tsx

@@ -73,7 +73,6 @@ export const ExtraTextContainer = styled.div<{ $cssMixin?: ReturnType<typeof css
 
   && {
     overflow-wrap: break-word;
-    word-wrap: break-word;
   }
 
   padding-top: 8px;
@@ -244,7 +243,7 @@ export const Field = forwardRef<HTMLDivElement, FieldProps>(
       labelCssMixin,
       additionalLabelCssMixin,
       extraTextCssMixin,
-      disableAdditionalLabelTooltip,
+      disableAdditionalLabelTooltip = true,
       ...restFieldProps
     } = props;
     const [defaultID] = useState(uid());

src/components/Label/index.tsx

@@ -9,7 +9,6 @@ export const MainLabel = styled.div<{ $cssMixin?: ReturnType<typeof css> }>`
 
   && {
     overflow-wrap: break-word;
-    word-wrap: break-word;
   }
 
   &&& {
@@ -24,9 +23,8 @@ export const AdditionalLabel = styled.div<{ $cssMixin?: ReturnType<typeof css> }
   margin-left: 8px;
 
   && {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
   }
 
   &&& {

src/components/form/InputField/stories/InputFieldInput.template.tsx

@@ -166,7 +166,7 @@ export const InputFieldInputTemplate = ({
           labelCssMixin={compactStyles}
           additionalLabelCssMixin={compactStyles}
           extraTextCssMixin={compactStyles}
-          disableAdditionalLabelTooltip={true}
+          disableAdditionalLabelTooltip={false}
           placeholder="Custom compact Label, AdditionalLabel, ExtraText behavior"
         />
       </DisplayContainer>

tests/TextInput/textInputIconsSpacing.spec.ts

@@ -0,0 +1,40 @@
+import { test, expect } from '@playwright/test';
+
+import { getStorybookFrameLocator } from '../utils';
+
+const STORY_PATH = '/?path=/story/admiral-2-1-input-textinput--text-input-with-icon';
+
+test.describe('TextInput icons spacing', () => {
+  test('reserves space for nested icons and keeps them accessible', async ({ page }) => {
+    await page.goto(STORY_PATH);
+    const frame = getStorybookFrameLocator(page);
+
+    // Третий инпут в истории — с тремя иконками + крестик
+    const targetInput = frame.locator('.text-input-native-input').nth(2);
+    await targetInput.click();
+    await targetInput.fill(
+      'Очень-очень-очень длинный текст для проверки того, что иконки точно-точно-точно не перекрывают содержимое инпута',
+    );
+
+    const container = targetInput.locator('xpath=..');
+    const iconPanel = container.locator('[data-role="icon-pane-after"]');
+    await expect(iconPanel).toHaveCount(1);
+
+    // 3 пользовательские иконки + иконка очистки
+    const iconButtons = iconPanel.locator(':scope > *');
+    await expect(iconButtons).toHaveCount(4);
+
+    const paddingRight = await targetInput.evaluate((el) =>
+      parseFloat(window.getComputedStyle(el).paddingRight || '0'),
+    );
+    expect(paddingRight).toBeGreaterThanOrEqual(140); // 16 + (24 + 8) * 4 = 144px
+
+    const [inputBox, panelBox] = await Promise.all([targetInput.boundingBox(), iconPanel.boundingBox()]);
+    expect(inputBox && panelBox).toBeTruthy();
+
+    if (inputBox && panelBox) {
+      const safeTextAreaEnd = inputBox.x + inputBox.width - paddingRight;
+      expect(panelBox.x).toBeGreaterThanOrEqual(safeTextAreaEnd - 1);
+    }
+  });
+});