[@mantine/core] MultiSelect: Fix incorrect input sizes values (#4925)

mantinedev · Oct 1, 2023 · b936589 · b936589
1 parent e1d0bf3
commit b936589
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 0 deletions.
diff --git a/src/mantine-core/src/components/Input/Input.module.css b/src/mantine-core/src/components/Input/Input.module.css
@@ -60,6 +60,12 @@
   }
 
   &[data-multiline] {
+    --input-padding-y-xs: rem(4.5px);
+    --input-padding-y-sm: rem(5.5px);
+    --input-padding-y-md: rem(7px);
+    --input-padding-y-lg: rem(9.5px);
+    --input-padding-y-xl: rem(13px);
+
     --_input-size: auto;
     --_input-line-height: var(--mantine-line-height);
     --input-padding-y: var(--input-padding-y-sm);

diff --git a/src/mantine-core/src/components/MultiSelect/MutliSelect.story.tsx b/src/mantine-core/src/components/MultiSelect/MutliSelect.story.tsx
@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import { MultiSelect } from './MultiSelect';
 import { Button } from '../Button';
+import { Group } from '../Group';
+import { TextInput } from '../TextInput';
 
 export default { title: 'MultiSelect' };
 
@@ -19,6 +21,34 @@ export function Usage() {
   );
 }
 
+function InputsGroup({ size }: { size: string }) {
+  return (
+    <Group style={{ padding: 40 }} grow align="flex-start">
+      <MultiSelect
+        data={['React', 'Angular']}
+        defaultValue={['React']}
+        placeholder={`MultiSelect with value (${size})"`}
+        size={size}
+      />
+      <MultiSelect
+        data={['React', 'Angular']}
+        placeholder={`MultiSelect without value (${size})"`}
+        size={size}
+      />
+      <TextInput placeholder={`TextInput (${size})`} size={size} />
+    </Group>
+  );
+}
+
+export function InputsAlignment() {
+  const sizes = ['xs', 'sm', 'md', 'lg', 'xl'].map((size) => (
+    <div key={size}>
+      <InputsGroup size={size} />
+    </div>
+  ));
+  return <>{sizes}</>;
+}
+
 export function Clearable() {
   return (
     <div style={{ padding: 40 }}>