fix(NativeSelect&ChipsSelect): fix placeholder length

VKCOM · Mar 23, 2023 · d68aea2 · d68aea2
1 parent 6fd6a4f
commit d68aea2
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 0 deletions.
diff --git a/packages/vkui/src/components/ChipsInputBase/ChipsInputBase.module.css b/packages/vkui/src/components/ChipsInputBase/ChipsInputBase.module.css
@@ -64,6 +64,16 @@
   cursor: default;
 }
 
+.ChipsInputBase--hasPlaceholder .ChipsInputBase__label {
+  margin-left: 9px;
+  margin-right: 0;
+}
+
+.ChipsInputBase--hasPlaceholder .ChipsInputBase__el {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
 /**
  * sizeY COMPACT
  */

diff --git a/packages/vkui/src/components/ChipsInputBase/ChipsInputBase.tsx b/packages/vkui/src/components/ChipsInputBase/ChipsInputBase.tsx
@@ -143,6 +143,7 @@ export const ChipsInputBase = <Option extends ChipOption>(props: ChipsInputBaseP
       className={classNames(
         styles['ChipsInputBase'],
         sizeY === SizeType.COMPACT && styles['ChipsInputBase--sizeY-compact'],
+        !selectedOptions.length && styles['ChipsInputBase--hasPlaceholder'],
         className,
       )}
       ref={getRootRef}

diff --git a/packages/vkui/src/components/NativeSelect/NativeSelect.tsx b/packages/vkui/src/components/NativeSelect/NativeSelect.tsx
@@ -80,6 +80,7 @@ const NativeSelect = ({
         styles['Select'],
         empty && styles['Select--empty'],
         multiline && styles['Select--multiline'],
+        placeholder?.length && styles['Select--hasPlaceholder'],
         align &&
           {
             left: styles['Select--align-left'],

diff --git a/packages/vkui/src/components/Select/Select.module.css b/packages/vkui/src/components/Select/Select.module.css
@@ -40,6 +40,10 @@
   padding-right: 0;
 }
 
+.Select--hasPlaceholder .Select__container {
+  padding-right: 0;
+}
+
 .Select--multiline .Select__container {
   padding-top: 12px;
   padding-bottom: 12px;