Skip to content

Commit

Permalink
ui-core: add narrow input style
Browse files Browse the repository at this point in the history
This new style can be used for narrow forms like stdcm.

Signed-off-by: SharglutDev <[email protected]>
  • Loading branch information
SharglutDev committed Jan 14, 2025
1 parent 7a2b900 commit 834582d
Show file tree
Hide file tree
Showing 6 changed files with 43 additions and 1 deletion.
8 changes: 7 additions & 1 deletion ui-core/src/components/inputs/FieldWrapper.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,11 @@ export type FieldWrapperProps = {
disabled?: boolean;
statusWithMessage?: StatusWithMessage;
statusIconPosition?: 'next-to-field' | 'before-status-message';
/**
* Input without any wrapper padding.
* Should not be used with required or statusWithMessage with no tooltip.
*/
narrow?: boolean;
small?: boolean;
children?: React.ReactNode;
className?: string;
Expand All @@ -29,6 +34,7 @@ const FieldWrapper = ({
disabled,
statusWithMessage,
statusIconPosition = 'next-to-field',
narrow = false,
small = false,
className,
children,
Expand All @@ -37,7 +43,7 @@ const FieldWrapper = ({
const statusClassname = statusWithMessage ? { [statusWithMessage.status]: true } : {};

return (
<div className={cx('feed-back', statusClassname, className, { small: small })}>
<div className={cx('feed-back', statusClassname, className, { small, narrow })}>
<div className="custom-field">
{/* LABEL AND HINT */}
{label && (
Expand Down
2 changes: 2 additions & 0 deletions ui-core/src/components/inputs/Input.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
disabled = false,
readOnly = false,
statusWithMessage,
narrow,
inputFieldWrapperClassname = '',
small = false,
withIcons = [],
Expand All @@ -88,6 +89,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
required={required}
small={small}
statusIconPosition={statusWithMessage?.tooltip ? 'before-status-message' : undefined}
narrow={narrow}
className={cx('input-field-wrapper', inputFieldWrapperClassname)}
onCloseStatusMessage={onCloseStatusMessage}
>
Expand Down
9 changes: 9 additions & 0 deletions ui-core/src/stories/ComboBox.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,15 @@ export const Default: Story = {
args: {
label: 'Your name',
type: 'text',
narrow: false,
},
};

export const Narrow: Story = {
args: {
label: 'Your name',
type: 'text',
narrow: true,
},
};

Expand Down
15 changes: 15 additions & 0 deletions ui-core/src/stories/Input.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -188,6 +188,21 @@ export const TooltipErrorInput: Story = {
},
};

export const TooltipWarningNarrowInput: Story = {
args: {
label: 'Name',
type: 'text',
value: 'This is a narrow input',
statusWithMessage: {
tooltip: 'left',
status: 'warning',
message:
"My wrapper doesn't have any padding. Don't use me with 'required' or 'statusWithMessage' with no tooltip.",
},
narrow: true,
},
};

export const TooltipInfoInput: Story = {
args: {
label: 'Name',
Expand Down
6 changes: 6 additions & 0 deletions ui-core/src/styles/inputs/comboBox.css
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,12 @@
0px 3px 5px -2px rgba(0, 0, 0, 0.1);
}

&:has(.narrow) .suggestions-list {
top: calc(100% - 7px);
left: 0;
width: calc(100% - 4px);
}

.suggestion-item {
padding: 0.688rem 1.188rem 0.813rem;
cursor: pointer;
Expand Down
4 changes: 4 additions & 0 deletions ui-core/src/styles/inputs/fieldWrapper.css
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,10 @@
@apply bg-error-5;
}

&.narrow {
padding: 0;
}

.custom-field {
position: relative;

Expand Down

0 comments on commit 834582d

Please sign in to comment.