2021.11.17-PrimerWeb

Primer Web

Figma link

💥 Breaking change

• Removed muted-link component. Please apply fg/muted from Primer Primitives to a link that requires similar styling

🚀 Enhancement

• Update Overlay heading to support larger headings for confirmation dialogs See issue comment
• Add action-list specific color variables to ActionListItems
• Add OverlayFooter component
• Add "disabled" state to ActionListItems

🐛 Bug fix

• Update Subhead content from fixed-width to fill container (🙏 @mkwng)
• Update Toast resizing constraints from fixed-width to fill container
• Added autolayout to text counter in text-contents component
• Replaced . with _ in local text component names

Contributors

• @ohjoycelau
• @six7
• @mkwng

2021.10.28-Primer Primitives + Primer Web

Primer Primitives

Figma link

🚀 Enhancements

Color system update

Color has been updated in Primer Primitives to encompass all of the updates from the color modes team that are now sesen in Primer CSS v18¹. Color utilities have been ported to Figma in the form of color styles and are once again found in Primer Primitives. Moving forward, non-Primer maintainers should only need to enable the Primer Primtives libary. The Light mode library will now be turned off by default.

Features

• All styles are grouped by type:
  • fg: Foregrounds (text and icons)
  • bg: Backgrounds
  • border: Borders

• Each color style has a supporting description to explain its general usage.

New layout

• The typography and spacing pages have also been updated with the new layout seen in Primer Web.

Contributors

• @ashygee

Primer Web

Figma link

🚀 Enhancements

• An indeterminate state for the Form control/checkbox has been added. (🙏 @ohjoycelau)
• Update Button component to use v2 color system ¹

🐛 Bug fix

• The primary button's dropdown caret spacing has been corrected in the pressed/active state. (🙏 @six7)
• Correct font size of small invisible button (🙏 @maximedegreve)

Contributors

• @ohjoycelau
• @six7
• @maximedegreve

1. For those who are looking to read more about this update in CSS, please refer to the migration guide in the CSS docs. ↩ ↩²

2021.10.07-PrimerWeb

Primer Web

Figma link

🚀 Enhancements

• Overlay component added 🎉 The Overlay component utilizes the slot method to enable usage without detaching. Simply replace the slot sections with your own local component created using other components.
• New layout added to Action list + Overlay content

🐛 Bug fix

• Fix auto layout usage in ActionList items
• Renamed Action list/Item/ -> ActionListItem
• Renamed Action list/Section header -> ActionListSection/Header
• Renamed Action list/Section divider -> ActionListSection/Divider
• Added descriptions for ActionListSection/Header and ActionListSection/Divider

2021.10.01

Primer color mode libraries

🚀 Enhancement

• V2 color mode variables have been imported and created as styles. Please read the color documentation in our interface guidelines and refer to the migration guide for more information.

Contributors

• @ashygee
• @colebemis

Primer Primitives

Figma link

🚀 Enhancement

• Improvements to support new v2 color modes in Primer:
  • Linked new color styles from Primer Primitives: Light mode library
  • Removed old color styles
  • Improved examples to showcase light/dark mode variations

🐛 Bug fixes

• Rearranged text utilities to bring more commonly used properties of text-small, text-small-bold, and text-mono towards the top of the list.

Contributors

• @ashygee

Primer Web

Figma link

💥 Breaking change

• Removed Templates from Primer Web and migrated to Primer Interfaces
• Card
• Activity
• Sidebar
• Sidebar items
  • Header lockup
  • Contributor
  • Empty state

🚀 Enhancement

• New layout applied to Alerts and Dropdown page. Read the discussion post for more information and to leave feedback
• Flash component reconstructed to include new variants for messaging type, fit (full-width or floating), and accessory options
• Dropdown component added (🙏 @langermank)
• V2 color modes have been applied to Primer Web. View the migration guide for more information.
• Update Avatar variants to use Shape property to select between circle (humans) and square (entity such as org or team) avatars. This change will be reflected in Primer React and Primer ViewComponents as a part of our component API consistency work.
• ActionList example templates expanded to include: Select panel, Action list, Action menu, Dropdown, and Multi-level menus (🙏 @vdepizzol)

🐛 Bug fixes

• Toast component border styling fixed to be compatible with "Change color mode" plugin
• Remove maintainer components for TabNav
• Octicons import for various components
• Reset Activity feed components
• Reset icon color for List items
• Rename Side nav item -> SideNav item
• Rename Sidenav subnav-item -> SideNav sub-item
• Reorganize SideNav items to be grouped together.
• Fixed resizing of SideNav/item to be flexible for any width (🙏 @adrianmg)

Contributors

• @ashygee
• @adrianmg
• @langermank
• @vdepizzol

🖌 Primer team

• New Maintainers project created to contain libraries and templates for Primer maintainers to use.
  • Added Component layout template library file used for transitioning to new layout in Primer core library files.

Contributors

• @ashygee

2021.09.09-PrimerWeb

Primer Web

Figma link

🚀 Enhancement

• Add interactive prototyping to single and multi select Action list items
• Add in missing interactive states to Action list/Item/Default
• The breadcrumb component has been renamed Breadcrumbs for consistence with our Primer React and Primer ViewComponents libraries.

🐛 Bug fixes

• Disabled secondary button styling has been corrected in Figma. (🙏🏼 @nuthinking)
• fix variant property semantics for Flash and Toast components

🧽 Chores

• Add documentation link to ActionList
• Breadcrumb variants: Selected page labeled as "Current page" instead of "Text"

Contributors

• @ashygee
• @nuthinking

2021.08.25 Primer Web

Primer Web

Figma link

🚀 Enhancement

• Buttons have interactive prototyping added. (🙏🏼 @vdepizzol)

• ActionList items (default) have interactive prototyping added. (🙏🏼 @vdepizzol)
• New section divider "overflow" property for ActionList (🙏🏼 @vdepizzol)

🐛 Bug fixes

• Reordered default variant for Counter to be medium default and moved properties from counter to make "medium" the default variant
• Some action list components were renamed to group section header and section dividers

2021.08.11 Primer Web

Primer Web

Figma link

🚀 Enhancement

• New variant to the Header component to support logged out state. (🙏🏼 @ohjoycelau)

🐛 Bug fixes

• Remove private ActionList-specific component from the published library (🙏🏼 @vdepizzol)
• Corrected Tabnav button alignment
• Changed default text for Tabnav button from "Default button" to "Button"
• Resized filter-item for documentation purposes. Has no effect on the component.

Contributors

• @ashygee
• @ohjoycelau
• @vdepizzol

2021.08.04 Primer Web

Primer Web

Figma link

🚀 Enhancement

ActionList now available

@vdepizzol's ActionList component is now available in Primer Web. They’re the foundation of menus, selection panels, and other overlay components.

The ActionList component features three different sizes, four different variations, and additional components for ActionList headers and dividers. Please note that this is still in its alpha stage and has only been implemented in Primer React components.

CleanShot.2021-08-04.at.20.24.47.mp4

🧽 Chores

• Library updates from Octicons

v2021.06.18 Primer Interfaces

Primer Interfaces

Figma link

🚀 Enhancement

• Enterprise templates added for Policies/Repositories select menus

• Enterprise template for Settings/Audit log added (TY @asiermartinez)

2021.06.18 Primer Web

Primer Web

Figma link

🚀 Enhancement

CleanShot.2021-06-18.at.08.19.18.mp4

• Footer updates
  • Footer improved to represent what users see
  • Removed “Report bug” property
  • Added ability to toggle between the default centered layout and full width (seen in Enterprise)
• Add Sidenav subnav-items

🐛 Bug fix

• Add missing "default" state to outline labels (🙏 @nuthinking)

🧽 Chores

• Octicons bump to v14.2.2
• Fixed color pairings where color was overridden by import

Contributors

• @ashygee
• @nuthinking