mirror of
https://github.com/QuivrHQ/quivr.git
synced 2024-09-11 14:36:35 +03:00
feat(frontend): add small property to textInput (#2798)
# Description Please include a summary of the changes and the related issue. Please also include relevant motivation and context. ## Checklist before requesting a review Please delete options that are not relevant. - [ ] My code follows the style guidelines of this project - [ ] I have performed a self-review of my code - [ ] I have commented hard-to-understand areas - [ ] I have ideally added tests that prove my fix is effective or that my feature works - [ ] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged ## Screenshots (if appropriate):
This commit is contained in:
parent
1ff60fd066
commit
10bc945564
@ -19,6 +19,7 @@ export const BrainSearchBar = ({
|
||||
label={t("searchBrain")}
|
||||
inputValue={searchQuery}
|
||||
setInputValue={setSearchQuery}
|
||||
small={true}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
@ -97,6 +97,7 @@ const KnowledgeTable = React.forwardRef<HTMLDivElement, KnowledgeTableProps>(
|
||||
label="Search"
|
||||
inputValue={searchQuery}
|
||||
setInputValue={setSearchQuery}
|
||||
small={true}
|
||||
/>
|
||||
</div>
|
||||
<QuivrButton
|
||||
|
@ -1,5 +1,6 @@
|
||||
@use "styles/Radius.module.scss";
|
||||
@use "styles/Spacings.module.scss";
|
||||
@use "styles/Typography.module.scss";
|
||||
|
||||
.text_input_container {
|
||||
display: flex;
|
||||
@ -22,6 +23,15 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.small {
|
||||
padding-block: 0;
|
||||
|
||||
.text_input {
|
||||
font-size: Typography.$small;
|
||||
padding: Spacings.$spacing02;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
@ -38,4 +48,4 @@
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -12,6 +12,7 @@ type TextInputProps = {
|
||||
disabled?: boolean;
|
||||
crypted?: boolean;
|
||||
onKeyDown?: (event: React.KeyboardEvent) => void;
|
||||
small?: boolean;
|
||||
};
|
||||
|
||||
export const TextInput = ({
|
||||
@ -24,6 +25,7 @@ export const TextInput = ({
|
||||
disabled,
|
||||
crypted,
|
||||
onKeyDown,
|
||||
small,
|
||||
}: TextInputProps): JSX.Element => {
|
||||
return (
|
||||
<div
|
||||
@ -31,6 +33,7 @@ export const TextInput = ({
|
||||
${styles.text_input_container}
|
||||
${simple ? styles.simple : ""}
|
||||
${disabled ? styles.disabled : ""}
|
||||
${small ? styles.small : ""}
|
||||
`}
|
||||
>
|
||||
<input
|
||||
@ -49,7 +52,7 @@ export const TextInput = ({
|
||||
{!simple && iconName && (
|
||||
<Icon
|
||||
name={iconName}
|
||||
size="normal"
|
||||
size={small ? "small" : "normal"}
|
||||
color={onSubmit ? (inputValue ? "accent" : "grey") : "black"}
|
||||
onClick={onSubmit}
|
||||
/>
|
||||
|
Loading…
Reference in New Issue
Block a user