FAQ

Even with a full guide, we still get a few questions. This page answers common questions that don’t quite fit anywhere else. If you can’t find what you need here or by searching the guide for relevant terms, reach out to us on Teams. We aim to reply in one business day, but you’ll usually get a quicker response.

The Forge design system consists of several elements:

• The React-based code package
• The Figma design library
• Typography, color, and spacing guidelines
• 200+ custom icons
• 50+ UI components to use as building blocks to construct apps and products
• Rules and standards for using all these elements

These elements work together to help developers and designers work efficiently, resulting in smoother releases, a better user experience, and easier product updates as code and design decisions change over time.

The team that builds and maintains Forge is made up of ~10 product owners, developers, and designers based mostly in Watertown. If you have any questions, comments, or just want to say hi, connect with us on Teams.

If you and your team work on new React-based web products for providers or internal users, you must use Forge.

If you’re working on existing products that are gradually transitioning to Forge, you can use it in discrete parts of your app. Check with another developer on your team for the best way to do this.

If your entire app is based on an older design system like Classic or Streamlined, your subdivision’s UX leadership may require that any new or updated features are built using Forge. Check with your team for guidance.

What’s a design system?

Design systems standardize component design and code to help teams efficiently create, maintain, and update products. athenahealth has 3 design systems, each for a different use:

• Spark is a React-based design system developed by the Patient Experience team for patient-facing apps.
• Foundation is an iOS- and Android-based design system developed by the athenaOne Mobile team for native mobile apps.
• Forge is a React-based design system developed by the Forge team for internal and provider-facing apps. It’s the official design system of athenahealth.

Which browsers does Forge officially support?

Forge supports the same browsers that athenaOne supports:

• Chrome (Windows 8.1, 10, 11, macOS)
• Safari (macOS)
• MS Edge (Windows 8.1, 10, 11)

Internet Explorer 11 is no longer supported.

Can I use Forge in my product?

Forge components are built using the React JavaScript framework. If your product is fully or partially built with React (or will be in the future), then you should use Forge.

What are the latest updates to Forge?

All Forge releases include a version number. For details about the changes in each release, see the Release Notes.

Is Forge an external tool that athenahealth adopted, or is it internal?

Forge is internal to athenahealth. It’s designed, built, and maintained by athenistas. It’s custom-built for enterprise healthcare apps.

Is Forge available to the public?

Forge is built for internal use, but athenahealth partners and customers have expressed interest in using it for their own products. We’re currently piloting its use with a customer who received their own version of our codebase and Figma library for internal use. We’d like to open it up to the public in the future, as other design systems have done.

How do I contact the Forge team?

Connect with us on Teams to join the discussion with designers, developers, and the Forge team.

How do I start developing with Forge?

See Getting Started for Developers for all the details.

Does Forge support TypeScript?

TypeScript definitions are available for all Forge components. Starting in Release 22.11, we’re rebuilding each component entirely in TypeScript for improved type coverage and developer experience.

This work is being done gradually, so check our Teams channel for updates about:

• Which components have been converted
• Which Forge version you need to access them
• Changes you might see in your TypeScript code

What happened to the Redux components? Does Forge still support Redux use?

Forge previously included built-in validation features based on the Redux Form library in these 3 components:

• ReduxForm
• ReduxFormField
• ReduxMultiField

Most teams wanted the flexibility to implement their own input validation, instead of being tied to a pre-built system, so we removed the Redux features (and those 3 components) in Forge 3. Forge 3 still supports the Redux Form library, but its features aren’t part of the main Forge library. They’re now in a separate package, forge-redux-form. Teams that aren’t using Redux Form need to implement validation themselves.

Does Forge work on mobile?

Forge components are built for core athenaOne web pages in supported browsers. Forge’s Grid, spacing, and layout functionality supports responsive web design, but the Forge team doesn’t:

• Design or code for mobile use
• Test components in mobile browsers

If you’re building a mobile-first user experience, use the Spark design system.

What’s a subcomponent?

Think of a subcomponent as a child component that’s used only in another component. For example, the subcomponent AccordionHeader is used only in Accordion. Subcomponents are documented in the props table on the guide page for the parent component.

Does Forge have a Storybook?

Yes! Forge developers test components and props in Storybook, so it evolves and might not match the demos perfectly, but it’s a great way to take components for a test drive.

What’s the best way to add custom styles to a Forge component?

Thanks to Forge’s typography and layout utilities, you can build much of your app without writing any CSS. Consistency and easy maintenance are priorities for Forge, so localized styling is discouraged. For use cases that truly require customizing Forge’s default visual elements, see Customizing with CSS.

Does Forge have a set of common constants like colors?

To get the styles you want, try Forge’s typography and layout utility classes first.

If you need to use Forge colors as variables (e.g., to output within your own classes for application-specific components), all Forge colors are represented in semantic Sass variable maps. To view syntax for each color (e.g. map-get($color-interaction, default)), see the color swatches on the Color page.

To enable these variables, use this command in your main .scss file to import all Forge constants:

import '@athena/forge/sass/forge-abstracts';

Depending on your setup, you may need to add 'node_modules' to the include path for your Sass compiler.

If you started from forge-app, you should already have access to the Forge constants set up in your index.scss file.

Other common constants available in Forge as Sass maps include:

• Font sizes
• Font weights
• Standard margin sizes
• Standard padding sizes
• Breakpoints

The standard margin and padding constants are also available in JavaScript in the JS constants file.

What are feature classes?

Feature classes apply Forge styles to elements in your application. Most Forge styles require a specific Forge class, like fe_c_button.

Instead of adding a Forge class to every <p> in your application, use the fe_f_all class to apply standard Forge styles to all Forge components and typographical elements in your page, such as <p> and <a>. fe_f_all must live at the root of the Forge part of your application.

Forge components also use the fe_f_all class in their CSS selectors.

Why are Forge class names so long?

For enterprise-scale CSS that works with legacy styles, Forge’s class naming strategy is based on the Block Element Modifier (BEM) naming convention. Forge CSS class names:

• Start with the global CSS namespace fe._. This reduces the likelihood that Forge class names conflict with non-Forge class names and stylesheets. This is important because Forge styles must often work with legacy styles.
• Continue with a class prefix to quickly convey key information about the class. The class prefixes are:
  • c_ for UI components, such as .fe_c_button
  • l_ for layout-related styles, such as .fe_l_grid-row__col
  • u_ for utilities, such as .fe_u_margin--top-large
  • is_ for states, such as .fe_is-disabled
  • f_ for features, such as fe_f_all
• Otherwise follow BEM standards.

For details, see HTML/CSS Guidelines.

How do I report a bug in Forge?

Connect with us on Teams to report any bugs that you find in code.

How do I start designing with Forge components?

Figma is our official design tool and houses the Forge library. There are other options, like Axure and Sketch, but Forge doesn’t support them. For details, see Getting Started for Designers.

What if I can’t find the component I need?

Connect with us on Teams to see if we can help. If we can’t find a solution together, there might be an opportunity for your team to contribute your work to Forge through our Unmet Needs Pipeline process.

Is it OK to detach Forge Figma components?

We strongly discourage detaching Figma components because developers must do additional work to override the built-in Forge component styling and behavior in the code, adding scope and decreasing efficiency. In addition, detached components aren’t updated automatically as Forge evolves.

If you come across a component in Figma that seems buggy or restrictive, instead of detaching, contact the Forge team so we can discuss solutions. Your feedback helps us resolve issues and identify gaps that improve Forge for all users.

How do I write copy for my product designs?

For help writing product copy, see the Content and Style Guide pages.

How do I report an issue with a Figma component?

Connect with us on Teams to report any issues you find in our Figma library.