Terminology
Component library/design system related terminology and resource links.
Council
A council is a group of people who come together to consult, deliberate, or make decisions.
User Interface (UI) Elements
usability.gov: User Interface Elements
Interface elements include but are not limited to:
- Input Controls: checkboxes, radio buttons, dropdown lists, list boxes, buttons, toggles, text fields, date field
- Navigational Components: breadcrumb, slider, search field, pagination, slider, tags, icons
- Informational Components: tooltips, icons, progress bar, notifications, message boxes, modal windows
- Containers: accordion
User Interface (UI) Components
UI Component refers to a discrete, reusable piece of the front end interface (UI).
Within our discussions we are likely referring to the actual React Component.
Design System
A library of user interface elements, components, and guidelines that are used as the basis for any new and updated features in a product.
Component Library
Component libraries are collections of all the reusable components on a site, displayed in one place (typically a Component Explorer like Storybook). They act as deliverables for other developers.
Atomic Design
A methodology created by Brad Frost for breaking down the parts of your website using a chemistry analogy of atoms, molecules, and organisms that allows designers and developers to roll out higher quality, more consistent user interfaces quickly and efficiently.
Code Conventions
Code conventions mention things like whether to use spaces or tabs for indentation, file organisation in projects, naming conventions, and formatting guidelines.
Good guidelines tell you what to do: “Keep selectors as short as possible.”
A great set of guidelines tells you why: “Keep selectors as short as possible, to keep specificity down and performance up.”
An excellent set of guidelines goes further and backs up the reasoning with further reading.
If you write guidelines in this way, it will be invaluable for new developers as it helps them learn best practices.
Example Code Convention Styleguide
Tokens/Variables
Design tokens or CSS variables are sets of values shared across components. For example, the body font size token can be defined as 14px, or the accent color token set to #51AA51 to reduce repetition and increase the ease of customization.
Component Properties
Components can be modified through the use of properties (or ‘props’, for short).
In the example of a button component, the text label, icon and disabled state can all be set through properties and combined to define a variation of that element.
Properties have types. For example, label can be set as a string, allowing any character to be entered, while disabled has a boolean type, allowing only true or false as value.