Skip to content

Autodesk/hig

Folders and files

NameName
Last commit message
Last commit date

Latest commit

8e3f62b · Feb 28, 2023
Feb 25, 2023
Oct 2, 2022
Jan 10, 2023
Feb 5, 2023
Feb 28, 2023
Feb 5, 2023
Jan 12, 2022
Oct 22, 2019
Jan 25, 2022
Feb 5, 2023
Jun 1, 2017
Oct 31, 2022
Feb 18, 2023
Mar 5, 2022
Jan 12, 2022
Mar 20, 2020
Feb 5, 2023
Feb 25, 2023
Feb 27, 2023

Repository files navigation

Weave

Greenkeeper badge

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

Getting started

Add a component to your app:

yarn add @hig/button

Import and render the component:

import Button from '@hig/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 @hig/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.

React components

Basics

Components

Each Weave pattern is implemented as a set of React components. Each pattern is published to NPM individually under the @hig 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
  • <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
  • <ProfileFlyout> - A flyout containing customer's name, email, and account info
  • <ProgressBar> - An indication of content loading, presented horizontally
  • <ProgressRing> - An indication of content loading, presented circularly
  • <ProjectAccountSwitcher> - Switches the context to different projects or accounts
  • <RadioButton> - A control to select one exclusively from a list
  • <RichText> - Applies the HIG typography styles to whatever is passed to it
  • <SideNav> - Provides high-level navigation
  • <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
  • <TopNav> - Navigation across the top of the screen
  • <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