autodesk / hig

Autodesk's unified design system

Weave

Weave is Autodesk's unified design system, so we can build better products faster.

• Getting started
• Theme data and theming components
• React components
  • Basics
  • Components
• Contributing

Getting started

Add a component to your app:

yarn add @weave-design/button

Import and render the component:

import Button from '@weave-design/button';

function MyComponent() {
  return <Button title="Hello, world!" />
}

Theme data and theming components

Theme data is a representation of the Weave visual design language in the form of data. With @weave-design/theme-data, we publish the data in ECMAScript module, JSON, and SCSS formats. This data includes 8 themes that can be used on any platform. There are four color schemes including...

• Light gray
• Dark gray
• Dark blue

...with two densities–high and low–for each scheme. See how to provide a theme to components.

• @weave-design/theme-data - Weave design spec as data
• <ThemeContext> - A component to ease consumption of theme data from within React components.

React components

Basics

• Typography - See <Typography> and <RichText>
• Layout - See <Spacer> and <Surface>
• Icons - See <Icons> to easily render icons in React and the @weave-design/icons package for svg data

Components

Each Weave pattern is implemented as a set of React components. Each pattern is published to NPM individually under the @weave-design namespace.

• <Accordion> - Make content-heavy pages appear less so by vertically stacking items in lists that users can expand or contract
• <Avatar> - A visual representation of a customer's identity
• <AvatarBundle> - Indicate a group of people who are associated with a task or information.
• <Badge> - Visual indicators that communicate status and draw attention to an object.
• <Banner> - An alert that requires a user action
• <Button> - Trigger actions or changes
• <Checkbox> - A control to select from non-exclusive options
• <Divider> - Separate content inline or in a stack.
• <Dropdown> - A menu to select one or many from a list
• <Flyout> - A lightweight popup container
• <Icons> - Represents a concept in graphical form
• <IconButton> - Action buttons that include an icon only
• <Label> - A caption for an item in a user interface
• <Menu> - Display a list of choices through interaction with a button, icon or other controls
• <Modal> - An overlay that focuses the customer's attention
• <NotificationsFlyout> - A less intrusive way of announcing an event of potential interest to the user
• <NotificationsToast> - Floating message boxes that appear
• <NumericInput> - For numerical values that allows freehand text entries or toggling values up and down
• <ProgressBar> - An indication of content loading, presented horizontally
• <ProgressRing> - An indication of content loading, presented circularly
• <RadioButton> - A control to select one exclusively from a list
• <RichText> - Applies the HIG typography styles to whatever is passed to it
• <SkeletonItem> - A placeholder for loading content
• <Slider> - A control for selecting a single numeric value from a range
• <Spacer> - A square of empty space, meant to add space between other components
• <Surface> - A themable container with the appropriate background color for the current theme
• <Table> - A collection of data in rows and columns
• <Tabs> - Keeps related content in a single container
• <Tag> - Compact elements that can be used to represent small blocks of information
• <TextArea> - A control to provide a large amount of freeform text
• <TextLink> - Directs visitors to another location
• <Thumbnail> - Visual anchors and identifiers for objects
• <Tile> - A themable container that display information related to a single subject or destination
• <Timestamp> - Presents a date with humanized phrasing
• <Toggle> - A control for a single action with a clear on/off or start/stop.
• <Tooltip> - Provides context in a small popup container
• <TreeView> - A way to view and manipulate a list of data
• <Typography> - A set of components in many typographical variations

Contributing

Read our contribution guidelines here: CONTRIBUTING.md