diff --git a/CHANGELOG.md b/CHANGELOG.md deleted file mode 100644 index 16ab763..0000000 --- a/CHANGELOG.md +++ /dev/null @@ -1,1344 +0,0 @@ -# Changelog - -## @primer/web@2023-01-27 - -[Figma Link](https://www.figma.com/file/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=1406%3A0&t=Pnea4Mzg34SHusc0-1) - -## New components -- heading - -![Heading component](https://user-images.githubusercontent.com/813754/214883019-5baf70cd-3175-46dc-b4f3-ad6c752b3716.png) - -## Enhancements -- simplified cursor component to only have one property -- added note to indeterminate checkbox to explain why it may look different in your browser - - -## @primer/web@2023-01-19 - -[Figma link](https://www.figma.com/file/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=14841%3A47461&t=KnZpT9r6BLauBEwf-1) - -#### π Enhancements -- New [contribution guidelines](https://www.figma.com/file/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=20690%3A80704&t=KnZpT9r6BLauBEwf-1) -- Button component got a `trailingVisual` property -- Button component property `leadingIcon` was renamed `leadingVisual` to be aligned with code implementation -- Overview page was removed in favor of every component having a dedicated page in the sidebar that is sorted alphabetically - -## November 24, 2021 - -### Primer Web - -[Figma link](https://www.figma.com/file/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=310%3A2995) - -#### π Enhancements -- New and improved Blankslate component. The component's variant properties now match those seen in the Primer ViewComponent implementation -- New spinner component added. Use the spinner for loading frames. The spinner also has its animation built in and can be seen when viewing a prototype. - -#### π Bug fix -- small outline labels corrected for 16px size -- Large outline labels have been corrected to their correct size of 24px. -- Text area padding-x has been corrected to be consistent with production at 12px for default text areas. Markdown textarea elements have 8px padding-x by default. (π @ohjoycelau) -- Update to AvatarStack > AvatarPair to correct constraints and frame size (π@ohjoycelau) -- Aligned properties between single and multi select ActionList items to allow for icon swapping overrides to be carried over. -- Tweaked some alignment settings in Overlay. Note: Figma is altering the constraints when a slot or OverlayHeader/OverlayFooter variant is changed. This is still being investigated but designers should be aware that manually changing constraints to "Fill container" may be necessary. - -##### Contributors -- [@ohjoycelau](https://github.com/ohjoycelau) - -## November 17, 2021 - -### Primer Web - -[Figma link](https://www.figma.com/file/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=310%3A2995) - - -#### π₯ Breaking change -- Removed `muted-link` component. Please apply `fg/muted` from [Primer Primitives](https://www.figma.com/file/B5XPE8IwGPIZDAvN7jqWqx/Primer-Primitives?node-id=2172%3A1379) to a link that requires similar styling - -#### π Enhancement -- Update Overlay heading to support larger headings for confirmation dialogs [See issue comment](https://github.com/github/primer/issues/3#issuecomment-929411277) -- Add `action-list` specific color variables to ActionListItems -- Add [OverlayFooter](url) component -- Add "disabled" state to ActionListItems - -#### π Bug fix -- Update [Subhead](https://www.figma.com/file/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=9654%3A44623) content from fixed-width to fill container (π @mkwng) -- Update [Toast](https://www.figma.com/file/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=9543%3A42957) 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](https://github.com/ohjoycelau) -- [@six7](https://github.com/six7) -- [@mkwing](https://github.com/mkwng) - - -## October 28, 2021 - -### Primer Primitives - -[Figma link](https://www.figma.com/file/B5XPE8IwGPIZDAvN7jqWqx/Primer-Primitives) - -#### π Enhancements - -##### Color system update - -![Updated pages for color](https://user-images.githubusercontent.com/10384315/139312452-a5b3983d-3301-4dd7-84dd-71b234d96e67.png) - -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[^1]. 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 - -![All color styles in Primer Primtives](https://user-images.githubusercontent.com/10384315/139311962-d3a8cca1-434f-4727-b0b5-6d6589e90617.png) - -- Each color style has a supporting description to explain its general usage. - -![border color style with tooltip description](https://user-images.githubusercontent.com/10384315/139311287-80758bf2-b2dd-4e8c-8f38-e3a6d86fe95a.png) - - -[^1]: For those who are looking to read more about this update in CSS, please refer to the [migration guide](https://primer.style/css/support/v18-migration) in the CSS docs. - -##### New layout - -![New layout for typography and spacing pages](https://user-images.githubusercontent.com/10384315/139312738-dd9e4b7e-5551-4e02-abaa-5e68bb3a5b0d.png) - -- The typography and spacing pages have also been updated with the new layout seen in Primer Web. - -##### Contributors -- [@ashygee](https://github.com/ashygee) - -### Primer Web - -[Figma link](https://www.figma.com/file/GCvY3Qv8czRgZgvl1dG6lp/?node-id=142%3A595) - -#### π Enhancements - -![Indeterminate checkbox variations](https://user-images.githubusercontent.com/10384315/139313632-652beabf-22db-4d2e-b3d4-4d10a524f75d.png) - -- An indeterminate state for the `Form control/checkbox` has been added. (π @ohjoycelau) -- Update Button component to use v2 color system [^1] - -[^1]: text/disabled still applied until next primer/primitives color release which will include actionList colors - - -#### π 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](https://github.com/ohjoycelau) -- [@six7](https://github.com/six7) -- [@maximedegreve](https://github.com/maximedegreve) - -## October 5, 2021 - -### Primer Web - -[Figma link](https://www.figma.com/file/GCvY3Qv8czRgZgvl1dG6lp/?node-id=142%3A595) - -#### π Enhancements - -![Overlay component in Figma](https://user-images.githubusercontent.com/10384315/136107909-96177520-b79d-43e6-ad3f-9f64af6b3481.png) - -- 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 - -## October 1, 2021 - -### Primer color mode libraries - -#### π Enhancement - -- V2 color mode variables have been imported and created as styles. Please read the [color documentation](https://primer.style/design/foundations/color) in our interface guidelines and refer to the [migration guide](https://www.figma.com/file/nWsfmBJOKM3AIGXsuRfrRd/Migration-guide-Color-v2) for more information. - -##### Contributors -- [@ashygee](https://github.com/ashygee) -- [@colebemis](https://github.com/colebemis) - -### Primer Primitives -[Figma link](https://www.figma.com/file/B5XPE8IwGPIZDAvN7jqWqx/Primer-Primitives?node-id=0%3A1) - -#### π 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](https://github.com/ashygee) - -### Primer Web - -[Figma link](https://www.figma.com/file/GCvY3Qv8czRgZgvl1dG6lp/?node-id=142%3A595) - -#### π₯ 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](https://github.com/github/primer/discussions/234) 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](https://www.figma.com/file/nWsfmBJOKM3AIGXsuRfrRd/Migration-guide-Color-v2) 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](https://github.com/github/primer/issues/220). -- ActionList example [templates](https://www.figma.com/file/GCvY3Qv8czRgZgvl1dG6lp/?node-id=6%3A24956) 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](https://github.com/ashygee) -- [@adrianmg](https://github.com/adrianmg) -- [@langermank](https://github.com/langermank) -- [@vdepizzol](https://github.com/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](https://github.com/ashygee) - -## September 9, 2021 - -### Primer Web - -[Figma link](https://www.figma.com/file/GCvY3Qv8czRgZgvl1dG6lp/?node-id=142%3A595) - -#### π 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](https://github.com/ashygee) -- [@nuthinking](https://github.com/nuthinking) -- -## August 25, 2021 - -### Primer Web - -#### π Enhancement -![Example: Buttons with interactive prototyping](https://user-images.githubusercontent.com/10384315/130833227-4cca5072-63ee-4985-af16-d8b821f2425c.png) -- Buttons have interactive prototyping added. (ππΌ @vdepizzol) - -![Example: ActionList item with hover and pressed states](https://user-images.githubusercontent.com/10384315/130876264-5d8cc77d-0831-4dff-af7c-0e9cc97cbdc5.gif) - -- ActionList items (default) have interactive prototyping added. (ππΌ @vdepizzol) -- New section divider "overflow" property for ActionList (ππΌ @vdepizzol) - -![Example: Breadcrumb component](https://user-images.githubusercontent.com/10384315/130879734-32ca1d4a-dda5-4e6c-b22a-0b30315b5547.png) - -- The `breadcrumb` component has been renamed `Breadcrumbs` for consistency with our Primer React and Primer ViewComponents libraries. -- Breadcrumbs variants: Selected page labeled as "Current page" instead of "Text" - -#### π 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 - - -## August 11, 2021 - -### Primer Web - -[Figma link](https://www.figma.com/file/GCvY3Qv8czRgZgvl1dG6lp/?node-id=142%3A595) - -#### π Enhancement - -![new global header logged out variant](https://user-images.githubusercontent.com/10384315/129090169-c22c6346-4fb8-4db8-bced-adda8a8ea205.png) -- 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](https://github.com/ashygee) -- [@ohjoycelau](https://github.com/ohjoycelau) -- [@vdepizzol](https://github.com/vdepizzol) - -## August 4, 2021 - -### Primer Web - -[Figma link](https://www.figma.com/file/GCvY3Qv8czRgZgvl1dG6lp/?node-id=142%3A595) - -#### π Enhancement - -**ActionList now available** - -![ActionList components displayed in Primer Web](https://user-images.githubusercontent.com/10384315/128284679-05233a4b-0db4-424f-a0cc-d719bebc05e0.png) - -@vdepizzol's [ActionList](https://primer.style/design/components/action-list) component is now available in [Primer Web](https://www.figma.com/file/GCvY3Qv8czRgZgvl1dG6lp/?node-id=6%3A24956). 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](https://github.com/primer/react/blob/d3a463f3161049919861e72cbb891ac62e3a89c3/src/ActionList/Item.tsx). - -https://user-images.githubusercontent.com/10384315/128286797-1c1aedde-2e4d-4373-9432-604180ddf41c.mp4 - -#### 𧽠Chores - -- Library updates from Octicons - - -## June 2021 - - -### Primer Interfaces - -[Figma link](https://www.figma.com/file/Y2xJLFBrU7yyiDLlEkQXcF/Primer-Interfaces?node-id=2103%3A5523&viewport=-2953%2C542%2C1) - -#### π Enhancement - -![Select menus for Enterprise/Policies/Repositories.](https://user-images.githubusercontent.com/10384315/122585591-838c5b80-d010-11eb-97a4-92ee9a090fce.png) - -- Enterprise templates added for Policies/Repositories select menus - -![Enterprise audit log template with map and list of recent events -image.png ](https://user-images.githubusercontent.com/10384315/122585429-59d33480-d010-11eb-8490-360b73fe5273.png) - -- Enterprise template for Settings/Audit log added (TY @asiermartinez) - -### Primer Web - -[Figma link](https://www.figma.com/file/GCvY3Qv8czRgZgvl1dG6lp/?node-id=142%3A595) - -#### π Enhancement - -https://user-images.githubusercontent.com/10384315/122585307-38724880-d010-11eb-95d8-3e83daf4ff21.mp4 - -- Footer updates - - Name layers - - Fix autolayout for scaling - - 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](https://www.figma.com/file/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=8002%3A177) - - -#### π Bug fix -- Add missing "default" state to [outline labels](https://www.figma.com/file/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=3813%3A3) (π @nuthinking) - -#### 𧽠Chores -- Octicons bump to v14.2.2 -- Fixed color pairings where color was overridden by import - -##### Contributors -- [@ashygee](https://github.com/ashygee) -- [@nuthinking](https://github.com/nuthinking) - - -### Octicons - -[Figma link](https://www.figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/Octicons?node-id=1%3A2) - -#### π Enhancement -- Added new issue icons -- Added `key-asterisk` -- Added `sort-asc` and `sort-desc icons` - -#### π Bug fix -- Reset colors to text-primary -- Correct rows and columns icon to correct vectors seen in code -- Corrected resizing constraints to be scale/scale for new icons - -##### Contributors -- [@juliusschaeper](https://github.com/juliusschaeper) -- [@edokoa](https://github.com/edokoa) -- [@ashygee](https://github.com/ashygee) - -### Primer Primitives - -#### π Enhancement -- Color modes support for [dark dimmed theme](https://www.figma.com/file/3iBGLtSn36yU2XVoP4Pnfr/Primer-Primitives-Dark-dimmed) - -## May 2021 - -### Primer Web - -[Figma link](https://www.figma.com/file/GCvY3Qv8czRgZgvl1dG6lp/?node-id=142%3A595) - -**Major updates to form components** - -![New form updates](https://user-images.githubusercontent.com/10384315/117332609-e5bc4300-ae4c-11eb-8efa-5565539dcd67.png) - -All form components now use Figma's variants feature - -![Example: Text input with it's properties of size, type, content, and icon](https://user-images.githubusercontent.com/10384315/117335302-dc80a580-ae4f-11eb-8043-ab5158a7973b.png) - -Additional design guidelines added to showcase correct pairing for form group validation. - -![Example: text input with variants](https://user-images.githubusercontent.com/10384315/117332810-2025e000-ae4d-11eb-8ee5-c4da4d015b17.png) - -#### π Enhancement -- Improved Form components! All form components now use variants. -- Text input - - Now includes options for size, content type, variation type, option for leading icon -- Textarea - - Removed unnecessary types -- Corrected coloring for Text input and Textarea -- Changed name of `Form group validation` to `Note` -- Added variant for emphasis to label on checkboxes and radio buttons -- Privatized text elements not necessary to component level -- Applied text styles to Text input -- Reorganized content on Form page -- Descriptions and documentation links added to components -- Toast property of `Size` changed to `Viewport` to reflect which breakpoint you would use a toast -- At small breakpoints the Toast has a max-width of 450px so the `Small screen` variant should be used -- Change autolayout configuration for Toasts -- At larger breakpoints the `Desktop` variant should be used -- Baked in margins have been corrected to use `$spacer-2/8px` for Desktop and `$spacer-3/16px` for smaller screens - -#### 𧽠Chores -- Import color update from Primer Primitives -- Changed all variant uppercase property values to lowercase -- Component names are more readable. - - Removed pascal or camel casing and use sentence case: - - AvatarStack -> Avatar stack - - repoNav -> Repo navigation - - orgNav -> Org navigation - -Note: none of these should be breaking changes but are to be more syntactically consistent for future component authoring. - -##### Contributors -- [@ashygee](https://github.com/ashygee) - -## April 2021 - -### Octicons - -[Figma link](https://www.figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/Octicons?node-id=31%3A80&viewport=376%2C10%2C1) - -#### π Enhancements - -![New icon set](https://user-images.githubusercontent.com/10384315/113764393-bb515b80-96cf-11eb-936e-840abe0d1d7f.png) - -New icons added -- codescan -- codescan-checkmark -- codespaces -- dependabot -- browser -- table -- person-add -- blocked -- duplicate - -#### π₯ Breaking changes - -- Removed insights-24 - -#### π Bug fixes - -- added "-24" suffix to 24px multi-select, number, strikethrough, and video icons. -- Normalized icon fill color to text/primary for kebab-horizontal, kebab-horizontal-24, and paper-airplane-24 - -##### Contributors -- [@ashygee](https://github.com/ashygee) -- [@edokoa](https://github.com/edokoa) -- [@juliusschaeper](https://github.com/juliusschaeper) - -### Primer Web - -[Figma link](https://www.figma.com/file/GCvY3Qv8czRgZgvl1dG6lp/?node-id=136%3A1805) - -#### π₯ Breaking change - -![New select menu uses variants](https://user-images.githubusercontent.com/10384315/113360973-bcfdd680-92ff-11eb-88e9-2a79f447953a.gif) - -- SelectMenu component enhancements -- Four new components have been created/iterated upon to enhance the usage of select menus (Menu items, Headers, Filter, Tabs) -- Each new component has related properties to quickly switch between different types. -- Interactive prototyping added to menu items and tabs -- Note: Select menus items with leading visuals (avatars and icons), counters and status indicators are still WIP - -### π Enhancement - -![Breadcrumb component now offers up to 10 items](https://user-images.githubusercontent.com/10384315/113361088-02220880-9300-11eb-84fd-3abd515359fe.png) - -- Add variant property for breadcrumbs indicating # of items in breadcrumb (up to 10) -- Add variant property to allow for bold text in breadcrumb-items - -![Outline label component property dropdowns now have descriptive properties](https://user-images.githubusercontent.com/10384315/113361248-604eeb80-9300-11eb-8d5b-dea2fce8f852.gif) - -- Cleaned up outline-label descriptions and property values to be more descriptive. (e.g. Label with color Info -> Info (blue)) -- Add pixel sizes to label and counter variants - -#### π Bug fix -- Combined Toast type indicators into one variant (For maintainers) -- Removed Toast type indicators from public library -- Rename Avatar / StackingCombination -> AvatarStack -- Select menu text layer name fixes to preserve overrides -- Corrected weird variant bug with swapping between default selected and unselected menu items that were swapping to hover state -- Corrected tab order for active tab sorting - -#### 𧽠Chores -- Update light mode styles from Primer Primitives: Light mode - -##### Contributors -- [@ashygee](https://github.com/ashygee) - -## March 2021 - -### Primer Web - -[Figma link](https://www.figma.com/file/GCvY3Qv8czRgZgvl1dG6lp/?node-id=136%3A1805) - -#### π Enhancement - -**Note: These are π₯Breaking changes** -- The sideNav-item is refactored and now uses variants. - - Options for leading visual items (icon or avatar) and an optional auxiliary counter can now be toggled on/off from the inspector - - Selected state can now be toggled on/off from the inspector -- The old sideNav-items have been removed - - / text only - - / textAvatar - - / textCounter - - / textIcon - - / textLabel - - / textStatus - - / wHeading -- Improve Markdown comment - - Added variants for size and hide/show title bar - - Add version with title bar -- Remove unnecessary styling from Tip component -- repoNavigation now uses variants! Quickly swap the active tab in the navigation with the property dropdown. -- Org underline navigation is now a part of Primer Web! Swap the active tab using the variant property. Counters can be controlled individually at the tab level variants. ππΌ @pmarsceill! - -#### π Bug fix - -- Removed bg color from underlineNav-tab's -- Removed bg color from repoNavigation to fix the overlap with the component's bottom border. -- repoNav bg color, bg/secondary, is now set to the Repo Head (Pagehead + Footer) -- Corrected tab name for the Discussions tab in repoNavigation -- Fix Issues and Discussions tab selected text to be bold -- Correct positioning of Submit button in Markdown comment box (@brooklyno) -- Remove unnecessary background color in Markdown comment/Desktop (@brooklyno) -- Fix Button/primary/small/icon -- Swap Default for Header component to be Default variant instead of Simple -- Corrected issues icon in repoNav of Repo Head component -- correct new sideNav selected states - -#### π§ͺ Experimental - -- Add interactive component feature to underlineNav-tab -- Refactored repoNavigation to use new underlineNav-tab with prototyping -- The sidenav-item now has the hover state built in - -##### Contributors -- [@ashygee](https://github.com/ashygee) -- [@brooklyno](https://github.com/brooklyno) -- [@pmarsceill](https://github.com/pmarsceill) - -## February 2021 - -### Primer Web - -[Figma link](https://www.figma.com/file/GCvY3Qv8czRgZgvl1dG6lp/?node-id=136%3A1805) - -#### π Enhancement -- Added underlineNav tab for Discussions -- Updated repoNav component to now include Discussions - -#### π Bug fix -- Remove Codespaces from main navigation and mobile main navigation -- Focus border added to input focus state. When Clip content is unchecked, the spread of a shadow effect no longer shows. The input focus now uses state/focus/shadow to enable the blue focus shadow. This closes [#4](https://github.com/primer/figma/issues/4) -- removed misc. search icons from the social count buttons -- color correction on Form control -- hid non-default layers in Subnav - -## January 2021 - -### Primer Web - -[Figma link](https://www.figma.com/file/GCvY3Qv8czRgZgvl1dG6lp/?node-id=136%3A1805) - - -#### πEnhancement - -![Example showing an Avatar stack now includes properties for "Stackable" and "Square"](https://user-images.githubusercontent.com/10384315/106191020-2f670480-615f-11eb-8085-193dcccdb36d.png) - -- Simplified avatars and added the property of "Stackable" which allows for the 20px stackable avatar to be enabled from the base Avatar component. - -![Having "Stackable" toggled on will force the icon to be 20px in size](https://user-images.githubusercontent.com/10384315/106191153-58879500-615f-11eb-8ca5-b03a5d0bcee0.png) -- Replaced Stackable avatar with modified Avatar component in "Stacking combination" -- Avatars now follow the same properties as seen in code. We have removed the difference between User vs Entity and have simplified to state if the avatar visually appears as a circle or a square using the variant property booleans. - - - -- Button variants have been improved to include toggles for the leading icon, counter, and dropdown -_Note: Currently icons don't correctly change color. This can be remidied for now with by resetting the icon and the button's correct icon color will appear but the icon will need to be swapped again._ - -![Fix icon bug by resetting the override to the icon layer and reswapping the icon](https://user-images.githubusercontent.com/10384315/105269878-9ece6a00-5b49-11eb-8de8-cd462cefc326.gif) - -_Note: Descriptions are still supplied to denote correct avatar usage between the circle and square shapes._ - -#### π₯Breaking changes -- Removed Stackable avatar - -#### πBug fix -- Avatar updates have been pushed to components that consume the Avatar -- Counters were updated to use the the new auto layout and the default size option has been changed to medium (@vdepizzol) -- Sponsor button has been fixed on Repohead component (@mkwng) -- List headers now properly use auto layout (@adrianmg) -- Components built using the Button component have been updated to use the latest button component - -##### Contributors - -- [@adrianmg](https://github.com/adrianmg) -- [@ashygee](https://github.com/ashygee) -- [@mkwng](https://github.com/mkwng) -- [@vdepizzol](https://github.com/vdepizzol) - -### Primer Primitives - -[Figma link](https://www.figma.com/file/B5XPE8IwGPIZDAvN7jqWqx/Primer-Primitives?version-id=625591668&node-id=0%3A1&viewport=243%2C186%2C0.5) - -#### π Enhancement - -Improvements to support new color modes in Primer. Read the [team post](https://github.com/orgs/github/teams/product-design/posts/52) for more detailed information on how we're handling color modes in Figma. - -- Linked new color styles from Primer Primitives: Light mode library -- Removed old color styles -- Improved examples to showcase light/dark mode variations - -## December 2020 -### Primer Web -#### π Enhancement - -#### Color modes - -![example of color modes implementation in alert component showing all of the color values matching success alert variables](https://user-images.githubusercontent.com/10384315/101843649-88bb9b80-3aff-11eb-8ddc-72e19ac791eb.png) - -Support for GitHub's new color modes has been implemented into the individual components to correspond to the functional color values supplied by [primer/primitives](https://github.com/primer/primitives). - -To use be sure to turn on the [`Primer Primitives: light beta` library](https://www.figma.com/file/9vhDNyQpOono1vgi0qSViZ/Primer-Primitives-light-beta) as that is now the source of truth for all component color styling. - - -#### Variants - -![example of variants with the primary button showing all of the variant options in a dropdown](https://user-images.githubusercontent.com/10384315/101843779-d1735480-3aff-11eb-9d1d-526c5d23f11f.png) - - -Components have been updated to use the new variants feature in Figma. - -- Flash alerts -- Toasts -- Avatars -- Buttons -- Branch name -- Blankslate -- Breadcrumbs -- Contribution graph -- Cursors -- Forms -- Labels -- Markdown -- Navigation -- Pagehead -- Popovers -- Select menus -- Subhead -- Text contents - -## November 2020 - -#### β¨New features - - - -Introducing variants to Primer Web! In this first update we've implemented the Figma variants feature into the following components: - -- Alerts -- Avatars -- Branch name -- Breadcrumbs -- Contribution: activity squares -- Cursors -- Form components -- Labels - -#### π Bug fixes -- Add disabled state to form controls (radio and checkboxes) -- Refactored form control to allow for [disabled versions of both selected/unselected radio and checkboxes](https://pxlc.at/post/ckhb64s1kfdbj0726bfk5gz3x) -- Fixed resizing and alignment for text placeholders -- Renamed and added descriptions for cursor variants to match CSS properties. Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/cursor -- Fix resizing for Markdown/Text editor -- Update breadcrumb spacing -- Update breadcrumb current page to be bold - - -## October 2020 - -### Primer Web - -#### π Bug fixes - -- Restructure avatar organization -- Formatting and organization of cursors, markdown toolbar components, and form controls -- Added autolayout to Repo sidedbar/Contributor π @mkwng -- Octicons bump: Icons can now be swapped and retain fill color -- Fixed Issue closed state labels to use the correct issue-closed icon -- Fixed Issue closed state labels to use the correct issue-closed icon - -#### π§ͺ Experiments - - - -- Alerts are now reconfigured to use Variants! - - Flash alerts now have properties to choose type and with the option for CTA buttons to be hidden or shown - - Toasts now have properties to select size and state - - - -- Branch name now reconfigured to use Variants! - - Select type of (default or link) and toggle the branch icon on/off - -#### πRemoved: -- 16px Avatar stack components have been removed as they are not a part of the system in code - -##### Contributors - -- [@ashygee](https://github.com/ashygee) -- [@mkwng](https://github.com/mkwng) - -### Primer Primitives - -#### π Bug fixes - -- Removed "00" suffix to match primer/primitives sass file - -##### Contributors - -- [@ashygee](https://github.com/ashygee) - -### Primer Interfaces - -#### π§ͺ Experiments - -- Issue detail page - -## September 2020 - -### Primer Web - -#### π Enhancement - -- Usage notes for primary button groups -- Primary button groups/split buttons to the buttons page -- Blankslate components - - modify `blankslates` to use new components and stylings - - Updating `blankslate` to use primitives styles and refresh web components -- Template components for Dashboard items -- Added `muted-link` component -- Added `btn-invisible` buttons -- Pull request - - PR rows -- Repo - - Sidebar components -- Issues - - Row components - - List components -- Avatar stack - 20px -- Subnav search items - -#### π Bug fixes - -- Fixed text resizing for medium dark gray outline label -- Restored text-red to components using the style -- Improve button description metadata to add sizing and change btn to btn-secondary -- Re-added in orange variant of label-outlined component -- Added CSS class names and React component name to label descriptions -- Add positioning keywords to button groups -- Add CSS button size classes to Buttons -- Added missing CSS classes to button components -- moved markdown comment box templates to markdown page -- updated naming and description for button groups to define `CSS: BtnGroup-item` and `React: ButtonGroup` -- Added updated title/docs links to every page -- Changed the h1 in breadcrumbs to breadcrumbs instead of branch name -- Corrected `Pagehead/basic` typo (thx [@thedamianhdez](https://github.com/thedamianhdez)) -- Renamed `btnGroup` to `btn-group` to be in line with CSS class name -- Removed old blankslate variants -- Corrected main nav height. Originally was too tall (thank you [@brooklyno](https://github.com/brooklyno)) -- Rearrange navbar links -- Fixed L/R padding on navbar to match dotcom -- Simplify social button naming -- add GitHub data fields to box list components -- Rename and move lists for issues and PRs to Box page -- Modified 16px avatar stack -- Clean up borders used in effects - -##### Contributors - -- [@ashygee](https://github.com/ashygee) -- [@auareyou](https://github.com/auareyou) -- [@brooklyno](https://github.com/brooklyno) -- [@thedamianhdez](https://github.com/thedamianhdez) - -