Skip to content

Commit 834582d

Browse files
committed
ui-core: add narrow input style
This new style can be used for narrow forms like stdcm. Signed-off-by: SharglutDev <[email protected]>
1 parent 7a2b900 commit 834582d

File tree

6 files changed

+43
-1
lines changed

6 files changed

+43
-1
lines changed

ui-core/src/components/inputs/FieldWrapper.tsx

+7-1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,11 @@ export type FieldWrapperProps = {
1515
disabled?: boolean;
1616
statusWithMessage?: StatusWithMessage;
1717
statusIconPosition?: 'next-to-field' | 'before-status-message';
18+
/**
19+
* Input without any wrapper padding.
20+
* Should not be used with required or statusWithMessage with no tooltip.
21+
*/
22+
narrow?: boolean;
1823
small?: boolean;
1924
children?: React.ReactNode;
2025
className?: string;
@@ -29,6 +34,7 @@ const FieldWrapper = ({
2934
disabled,
3035
statusWithMessage,
3136
statusIconPosition = 'next-to-field',
37+
narrow = false,
3238
small = false,
3339
className,
3440
children,
@@ -37,7 +43,7 @@ const FieldWrapper = ({
3743
const statusClassname = statusWithMessage ? { [statusWithMessage.status]: true } : {};
3844

3945
return (
40-
<div className={cx('feed-back', statusClassname, className, { small: small })}>
46+
<div className={cx('feed-back', statusClassname, className, { small, narrow })}>
4147
<div className="custom-field">
4248
{/* LABEL AND HINT */}
4349
{label && (

ui-core/src/components/inputs/Input.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
6666
disabled = false,
6767
readOnly = false,
6868
statusWithMessage,
69+
narrow,
6970
inputFieldWrapperClassname = '',
7071
small = false,
7172
withIcons = [],
@@ -88,6 +89,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
8889
required={required}
8990
small={small}
9091
statusIconPosition={statusWithMessage?.tooltip ? 'before-status-message' : undefined}
92+
narrow={narrow}
9193
className={cx('input-field-wrapper', inputFieldWrapperClassname)}
9294
onCloseStatusMessage={onCloseStatusMessage}
9395
>

ui-core/src/stories/ComboBox.stories.tsx

+9
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,15 @@ export const Default: Story = {
6767
args: {
6868
label: 'Your name',
6969
type: 'text',
70+
narrow: false,
71+
},
72+
};
73+
74+
export const Narrow: Story = {
75+
args: {
76+
label: 'Your name',
77+
type: 'text',
78+
narrow: true,
7079
},
7180
};
7281

ui-core/src/stories/Input.stories.tsx

+15
Original file line numberDiff line numberDiff line change
@@ -188,6 +188,21 @@ export const TooltipErrorInput: Story = {
188188
},
189189
};
190190

191+
export const TooltipWarningNarrowInput: Story = {
192+
args: {
193+
label: 'Name',
194+
type: 'text',
195+
value: 'This is a narrow input',
196+
statusWithMessage: {
197+
tooltip: 'left',
198+
status: 'warning',
199+
message:
200+
"My wrapper doesn't have any padding. Don't use me with 'required' or 'statusWithMessage' with no tooltip.",
201+
},
202+
narrow: true,
203+
},
204+
};
205+
191206
export const TooltipInfoInput: Story = {
192207
args: {
193208
label: 'Name',

ui-core/src/styles/inputs/comboBox.css

+6
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,12 @@
2222
0px 3px 5px -2px rgba(0, 0, 0, 0.1);
2323
}
2424

25+
&:has(.narrow) .suggestions-list {
26+
top: calc(100% - 7px);
27+
left: 0;
28+
width: calc(100% - 4px);
29+
}
30+
2531
.suggestion-item {
2632
padding: 0.688rem 1.188rem 0.813rem;
2733
cursor: pointer;

ui-core/src/styles/inputs/fieldWrapper.css

+4
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,10 @@
2222
@apply bg-error-5;
2323
}
2424

25+
&.narrow {
26+
padding: 0;
27+
}
28+
2529
.custom-field {
2630
position: relative;
2731

0 commit comments

Comments
 (0)