Suggested changes for text input pr #5444
Conversation
to make it easier to migrate existing styles
…o kalvis/mantine-setup
### 📣 Summary Adds theming and storybook entry for Mantine Menu component. ### 📖 Description Adds basic theming for the Mantine Menu component, primarily aimed at providing necessary style and functionality for use in the organization members list. In this context, the Menu component will be replacing KoboDropdown, but the latter is used, for example, as a building block of KoboSelect, so not all uses of KoboDropdown are under consideration here. ### 👀 Preview steps Run storybook and compare "Dropdown" story to the Actions dropdown (right side icon button) currently used in the organization Member table. --------- Co-authored-by: Paulo Amorim <[email protected]>
pauloamorimbr
changed the base branch from
task-1378-textinput-component
to
task-1378-mantine-text-input
jsapp/js/theme/kobo/Input.module.css
Outdated
There was a problem hiding this comment.
I believe we could use this file as a generic for all the text inputs.... or even create a single "Theme" file for all the text inputs to share the same default props and classes.
jsapp/js/theme/kobo/Input.module.css
Outdated
| .label { | ||
| font-size: var(--mantine-font-size-sm); | ||
| color: var(--mantine-color-gray-1); | ||
| margin-bottom: 5px; |
There was a problem hiding this comment.
Ideally for any layout definition we would use the style prop with the sizes from Mantine, e.g:
In the TextInput.extend... in the Theme file:
mb="xs"
But Maybe the sizes from Mantine won't serve us as we would expect.
jsapp/js/theme/kobo/InputWrapper.ts
Outdated
There was a problem hiding this comment.
Instead of styling the InputWrapper, we can do that with the TextInput, which exposes the .label directly.
IDK, it feels like we have more control by doing it individually... or maybe we could save on code and do it on the extended as it was done before. 🤔
| const inputSizes: Array<TextInputProps['size']> = ['sm', 'md', 'lg']; | ||
|
|
||
| const Render = ({...args}: TextInputProps) => { | ||
| const [, updateArgs] = useArgs(); |
There was a problem hiding this comment.
Not really important, but this way we can edit the value in the input and update the args.
Draft PR to serve as a reference for changes