text-toolbar

18 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Text toolbar definition and purpose

A text toolbar is a set of buttons and menus that allows users to edit text, search keywords, attach files, and embed links. It is a set of buttons and menus grouped horizontally with controls that primarily allow text editing functionality, with formatting actions and style changes applied to editable text in a text area below the toolbar.

Text toolbar standard options

A text toolbar can include the following customizable options: Redo, Undo, Cut, Copy, Paste, Typeface, Type size, Bold, Italic, Underline, Text color, Alignment, Bulleted list, Checked list, Numbered list, Indent more, Indent less, Attachment, Link, and Search.

Text toolbar anatomy: Actions section

The Actions section includes Undo and Redo to undo or revert the last change made. It also includes Cut, Copy, and Paste to move pieces of text to another place within the text area, copy text to the clipboard, or paste copied text from the clipboard to a different place.

Text toolbar anatomy: Formatting section

The Formatting section allows users to change the typeface, size, style, and color of text.

Text toolbar anatomy: Paragraph section

The Paragraph section allows users to select different alignments and indents for paragraph text and indicate bulleted, checked, or numbered lists.

Text toolbar anatomy: Attachment section

The Attachment section allows users to attach files or embed links in strings of text.

Text toolbar anatomy: Search section

The Search section allows users to search keywords within existing paragraphs of text.

When to use text toolbar

Use a text toolbar to create, edit and save simple text files quickly; edit text with common actions like cut, copy and paste and formatting text styles; perform basic text search functionality; or attach files or embed links within text.

Text toolbar button states

The text toolbar includes a series of basic actions that adopt the icon button style. The action buttons typically have five different states: enabled, hover, focus, active, and disabled.

Text toolbar typeface and type size menus

The typeface and type size menus adopt the dropdown style, allowing users to easily choose any typeface and type size to customize their text.

Text toolbar color and alignment controls

The text color and paragraph alignment controls open a menu that displays different options to choose from.

Text toolbar file attachment behavior

Users can upload and attach a file from their computer by clicking the Attachment button. Once a file has been chosen, the file loads in the bottom left of the text area. A file can be removed by clicking the close x icon.

Text toolbar link embedding behavior

Links can be embedded within strings of text by clicking the link button to open a text field. Users enter the HTML link in the text field and then click the link button to embed it. The text field can be exited by clicking the close x icon or clicking anywhere outside the field. To edit or delete a link, highlight the inline link text with the cursor to reopen the text field.

Text toolbar search behavior

Keywords can be searched within the text area. Matching search results are highlighted in the text area. The number of results found is displayed within a tag in the search bar. Users can clear the search by clicking the close x icon inside the tag. To exit the search, click the close x icon in the search field or click anywhere outside the search bar.

Text toolbar responsive breakpoint requirements

The text toolbar adapts to different breakpoints as follows: max and xlg display all controls and functionality in one row with the option to make the search field longer or shorter; lg truncates the search field into a button or uses an overflow menu to display collapsed controls; md compresses the full text toolbar into two rows; sm uses a more compact version of md with collapsed controls in an overflow menu.

Text toolbar overflow menu

The overflow menu displays a list of multiple controls when horizontal space for the toolbar becomes restricted or when it is adapting to breakpoints.

Text toolbar saving behavior

Text toolbars can be used to save or send text files. Text files can also be saved as drafts to be edited again at a later date. Drafts can be saved with an explicit Save draft button or can autosave depending on the use case.

Text toolbar pattern status

The keyword search concept included in the text toolbar pattern is not currently available for production use. The guidance included reflects the current understanding of this topic, and the pattern is currently open for code contributions.

Give your agent this brain