🧱 ZUI: Textfield

[ziggabyte]

Description

A text field component that can be either single- or multiline.

Screenshots

Figma link

https://www.figma.com/design/yIQMDEFSgkUOrSaJpg3k7N/ZUI?node-id=11022-144717&t=4z8y3kcxjVSHuJ91-4
You need to be logged into a Figma account to properly view the Figma content.

Requirements

• Can be single or multiline. Defaults to single line.
• Can be size small, medium or large.
• Takes in a label text
• Takes in a value and an onChange function to set the value.
• Can take in a helpertext
• Can take in a boolean to say if there is an error
• Can be disabled
• Can take in a placeholder text
• Can take in a start and/or an end icon (hit: see InputAdornment in the MUI Textfield docs).
• Can decide a fixed number of rows (for multiline)
• Can decide if it scrolls or not (for multiline)
• All styles match what is shown in the Figma design

Open questions

None at this point

Workflow

Suggestions for implementation

Use the MU Textfield component for this. It already has props for most (if not all) of our use cases.

Git

The main git branch for the work on the new design system is undocumented/new-design-system. Unless otherwise instructed, do your work on a new branch branched off from this branch.

Name your branch issue-number/zui-name, ex: issue-928/zui-button for a branch where work is done that is documented in the issue with number 928, where a button component is being made.

Storybook

Use Storybook to develop the new design system components. If you are not familiar with working with Storybook, please ask and Ziggi or someone else will be happy to introduce you!
When you have checked out the branch undocumented/new-design-system (and, as always when checking out a branch just to be sure, run yarn install), run yarn storybook in the terminal. This starts Storybook locally, and should open your browser to localhost:6006 where you see all the components. Note that you want to only look at the ones under the "Components" headline.

Files

Create a folder in src/zui/components and give it a name for your component, like ZUIButton. Inside that folder, create one file index.tsx (this is where you write your component) and one index.stories.tsx (this is where you write your Storybook stories). Look at the components in src/zui/components for inspiration/reference! Note that there are lots of components with names that start with "ZUI" outside the src/zui/components folder, but only the ones in src/zui/components are relevant as reference/inspiration for the work you will be doing.