Merge branch 'main' into contributing-code-design-docs

.github/CODEOWNERS

@@ -1,32 +1,19 @@
 # Default to system one design and one dev
-* @carbon-design-system/developers-system @carbon-design-system/design
-
-*.conf @vpicone
 
-# Vikki Paterson is code owner for Experimental IDE patterns
-src/pages/community/patterns/create-flows/* @vikkipaterson
-src/pages/community/patterns/delete-pattern/* @vikkipaterson
-src/pages/community/patterns/export-pattern/* @vikkipaterson
-src/pages/community/patterns/generate-an-api-key/* @vikkipaterson
-src/pages/community/patterns/import-pattern/* @vikkipaterson
-src/pages/community/patterns/remove-pattern/* @vikkipaterson
-
-# Vincent Snagg is code owner for Experimental Watson Health patterns
-src/pages/community/patterns/chatbot/* @vincentsnagg
+* @carbon-design-system/developers-system @carbon-design-system/design
 
-# Adriana Morales is code owner for Experimental Cloud PAL patterns
-src/pages/community/patterns/order-summary-template/* @adrianamorales
-src/pages/community/patterns/cards/* @adrianamorales
-src/pages/community/patterns/dashboard-widgets/* @adrianamorales
+# Diana Tran is the owner for Sustainability Software Patterns
 
-# Chris Reckling is the code owner for Experimental IoT patterns
-src/pages/community/patterns/login-pattern/* @lukefirth
+src/pages/community/patterns/login-pattern/*  @dianatran18 @lukefirth
 
 # Eliad Moosavi and Natasha Decoste are the code owners for Data Visualization
+
 src/pages/data-visualization/* @theiliad @natashadecoste
 
-# Cal Smith for Angular tutorial
+# Zvonimir Fras for Angular tutorial
+
 /src/pages/tutorial/angular/* @zvonimirfras
 
 # Lee Chase for Vue tutorial
-/src/pages/tutorial/vue/* @lee-chase
+
+/src/pages/tutorial/vue/* @lee-chase

package.json

@@ -40,12 +40,12 @@
   "dependencies": {
     "@babel/core": "^7.15.8",
     "@carbon/charts-react": "0.55.0",
-    "@carbon/elements": "^11.30.0",
-    "@carbon/icons": "^11.27.0",
-    "@carbon/icons-react": "^11.27.0",
+    "@carbon/elements": "^11.31.0",
+    "@carbon/icons": "^11.28.0",
+    "@carbon/icons-react": "^11.28.0",
     "@carbon/pictograms": "^12.23.0",
     "@carbon/pictograms-react": "^11.49.0",
-    "@carbon/react": "^1.38.0",
+    "@carbon/react": "^1.39.0",
     "@loadable/component": "^5.15.2",
     "@slack/web-api": "^5.11.0",
     "babel-preset-env": "^1.7.0",
@@ -58,7 +58,7 @@
     "gatsby": "^4.25.7",
     "gatsby-image": "^3.7.1",
     "gatsby-plugin-image": "^2.9.0",
-    "gatsby-theme-carbon": "^3.1.18",
+    "gatsby-theme-carbon": "^3.1.20",
     "lodash-es": "^4.17.15",
     "markdown-it": "^12.3.2",
     "nanoid": "^2.1.11",

src/pages/components/button/usage.mdx

@@ -376,7 +376,7 @@ Button groups are a useful way of aligning buttons that have a relationship.
 Group the buttons logically into sets based on usage and importance. Too many
 calls to action will overwhelm and confuse users so they should be avoided.
 
-As mentioned in the [Emphasis section](#Emphasis), you don’t necessarily need to
+As mentioned in the [Emphasis section](#emphasis), you don’t necessarily need to
 use the buttons in the order that their labels imply. Either a secondary or a
 tertiary button can be used in conjunction with a primary button. In fact, due
 to the visual weight of the secondary button, it’s recommended to use tertiary
@@ -458,7 +458,7 @@ container with a programmatic 16px gutter between them.
 #### Horizontally arranged groups
 
 When using multiple buttons, the position of the primary button adheres to the
-[alignment guidance](#Alignment) above. To sum up, a primary button will be
+[alignment guidance](#alignment) above. To sum up, a primary button will be
 left-aligned and positioned to the left of the secondary/tertiary button on
 full-page designs. The primary button will be right-aligned and appear to the
 right of the secondary/tertiary button within wizards and dialog windows.

src/pages/components/tooltip/usage.mdx

@@ -176,6 +176,7 @@ interactive elements, such as a button, that a user needs to interact with.
     },
   ]}
 />
+
 ## Formatting
 
 ### Standard tooltip anatomy
@@ -336,10 +337,8 @@ or link.
 ### Best practices
 
 - The content within a standard tooltip should be purely additional information
-  that is not critical for a user to read to complete a task.
-- Standard tooltips appear on hover and are not focusable or read by screen
-  readers. If the content is essential for the user to interpret concerning
-  their workflow, use a
+  that is not critical for a user to read to complete a task. If the content is
+  essential for the user to interpret concerning their workflow, use a
   [toggletip](https://carbondesignsystem.com/components/toggletip/usage/) for
   this information instead.
 

src/pages/contributing/get-started.mdx

@@ -16,7 +16,6 @@ designers and developers. Anyone can contribute code, design, and documentation.
 <AnchorLinks>
 
 <AnchorLink>Get started</AnchorLink>
-<AnchorLink>Contribution gallery</AnchorLink>
 <AnchorLink>Carbon champions</AnchorLink>
 <AnchorLink>Types of contribution</AnchorLink>
 <AnchorLink>The process</AnchorLink>
@@ -34,28 +33,44 @@ stop on by. We'll help you find an appropriate first contribution depending on
 your skills and interests. Read on to learn about common types of contributions
 and the process.
 
-## Contribution gallery
+## Carbon champions
 
-In the past year, Carbon contributors have added features to components,
-improved the React testing suite, created image production guidelines in Figma,
-and so much more! Explore the gallery below to see a small sample of finished
-projects.
+Many thanks to our 2023 Carbon champions for making significant contributions to
+the design system.
 
-<iframe
-  class="airtable-embed"
-  src="https://airtable.com/embed/appuREd5slHj4VLfl/shrv9yRexbUjzn4pJ?backgroundColor=cyanDusty&viewControls=on"
-  frameborder="0"
-  onmousewheel=""
-  width="100%"
-  height="533"
-  style="background: transparent; border: 1px solid #ccc;"
-></iframe>
+<Row className="mobile-columns">
+<Column className="one" colSm={2} colMd={2} colLg={3}>
 
-## Carbon champions
+**Kylee Barnard**<br />Community support<br /> <br /> **Michael Barrera**<br />
+Typescript<br /><br /> **Patrick Clough**<br /> Figma<br /><br /> **Enzo
+Colasante**<br /> Charts Figma Kit
+
+</Column>
+
+<Column className="one" colSm={2} colMd={2} colLg={3}>
+
+**Matt Gallo**<br /> React Testing Library<br /><br /> **Valerie Garza**<br />
+Gantt chart<br /><br /> **Michael Gower**<br /> Accessibility<br /><br /> **Mark
+Judy**<br /> Typescript
+
+</Column>
+
+<Column className="one" colSm={2} colMd={2} colLg={3}>
+
+**Chris Knabe**<br /> React Testing Library**<br /><br /> Marcin
+Lewandowski**<br /> Typescript<br /><br /> **Jessica Lin**<br />
+Accessibility<br /><br /> **Amaya Mali**<br /> Gantt chart
+
+</Column>
+
+<Column className="one" colSm={2} colMd={2} colLg={3}>
+
+**Tom Roach**<br /> Community support<br /><br />**Eugene To **<br />
+Figma<br /><br /> **Shankar Venkatachalam** <br /> Create React App<br /><br />
+**Colleen Yates**<br /> lllustration Guild
 
-Many thanks to our 2023 Carbon champions. Know someone who deserves recognition?
-Fill out the
-[nomination form](https://airtable.com/appOVMXJWJgb6dwhX/shrkMzlvQhPBB6UnX).
+</Column>
+</Row>
 
 ## Types of contribution
 
@@ -72,7 +87,7 @@ in our enhancement backlog that need design or development work.
 
 ### Design kits
 
-This work is all about creating and updating reusable components is Figma.
+This work is all about creating and updating reusable components in Figma.
 You'll get valuable Figma experience and will collaborate with the Figma Guild.
 Check out the
 [status of design kits](https://www.figma.com/file/CFMtqV5Nztdbm0mi2UiDLg/Library-%2B-Template-Planning?type=design&node-id=3713-26762&mode=design&t=HqvAYXUeccKNMstT-0)
@@ -112,12 +127,12 @@ to follow. Here's what it looks like:
 #### Volunteer for existing work
 
 The best way to volunteer is to look through
-[existing GitHub issues](https://github.com/carbon-design-system/carbon/issues?q=is%3Aopen+is%3Aissue+label%3A%22community+contribution%22)
-labeled with `community contribution`. You can also filter by
-[developer](https://github.com/carbon-design-system/carbon/issues?q=is%3Aopen+is%3Aissue+label%3A%22community+contribution%22++label%3A%22role%3A+dev+%F0%9F%A4%96%22_)
+[existing GitHub issues](https://github.com/carbon-design-system/carbon/issues?q=is%3Aopen+is%3Aissue+label%3A%22needs%3A+community+contribution%22+)
+labeled with `needs: community contribution`. You can also filter by
+[code](https://github.com/carbon-design-system/carbon/issues?q=is%3Aopen+is%3Aissue+label%3A%22needs%3A+community+contribution%22+label%3A%22needs%3A+code+contribution%22+)
 or
-[designer](https://github.com/carbon-design-system/carbon/issues?q=is%3Aopen+is%3Aissue+label%3A%22community+contribution%22++label%3A%22role%3A+design+%3Apencil2%3A%22+)
-roles. Put a comment in the issue saying you'd like to help.
+[design](https://github.com/carbon-design-system/carbon/issues?q=is%3Aopen+is%3Aissue+label%3A%22needs%3A+community+contribution%22+label%3A%22needs%3A+design+contribution%22+)
+work. Put a comment in the issue saying you'd like to help.
 
 The Carbon team is also happy to help you find a good first issue. Just stop by
 our [office hours](/whats-happening/meetups/) or send us a slack message.

src/pages/developing/react-tutorial/step-4.mdx

@@ -284,7 +284,7 @@ With everything imported, replace the current:
 With the new components:
 
 ```javascript path=src/content/LandingPage/LandingPage.js
-<InfoSection heading="The Principles" className="landing-page__r3">
+<InfoSection heading="The Principles">
   <InfoCard
     heading="Carbon is Open"
     body="It's a distributed effort, guided by the principles of the open-source movement. Carbon's users are also it's makers, and everyone is encouraged to contribute."

src/pages/patterns/forms-pattern/index.mdx

@@ -66,7 +66,7 @@ Forms are comprised of some or all of the following elements.
 <Row>
 <Column colLg={8}>
 
-![Basic form with anatomy callouts](/images/Elements.png)
+![Basic form with anatomy callouts](/images/form-usage-1.png)
 
 </Column>
 </Row>
@@ -467,31 +467,35 @@ information.
 #### Button emphasis
 
 Emphasis refers to the position of the primary button in relation to secondary
-and tertiary actions. When using multiple buttons, the primary button appears to
-the right and any secondary buttons appear to the left.
-[Research](https://www.nngroup.com/articles/ok-cancel-or-cancel-ok/) has shown
-that performance differences between secondary and primary button placement are
-negligible, however maintaining consistency throughout a product, offering, or
-platform is crucial. The Secondary / Primary button order (secondary to the left
-and primary to the right) is therefore our required guidance and should be
-followed at all times.
+and tertiary actions. When using multiple buttons in forms, the position of the
+primary button can vary according to the
+[button groups](/components/button/usage/#button-groups) guidance. Factors such
+as page layout, form type, and alignment will influence your button emphasis.
+
+The primary button will be left-aligned and positioned to the left of the
+secondary/tertiary button on in-page forms or most other form layouts that don’t
+fit the right-aligned criteria. The primary button will be right-aligned and
+appear to the right of the secondary/tertiary button within progressive forms,
+wizards, and forms in structured containers like dialog windows or side panels.
 
 <Row>
 <Column colLg={8}>
 
-![Example of dedicated page forms](/images/dedicated_pg_buttons.png)
+![Examples of form with a left-aligned primary button](/images/form-buttons-primary-left.png)
 
-<Caption>Example of dedicated page forms</Caption>
+<Caption>Examples of in-page forms with a left-aligned primary button</Caption>
 
 </Column>
 </Row>
 
 <Row>
 <Column colLg={8}>
 
-![Dialog and side-panel forms](/images/dialog_and_panel_buttons.png)
+![Examples of form with a right-aligned primary button](/images/form-buttons-primary-right.png)
 
-<Caption>Dialog and side-panel forms</Caption>
+<Caption>
+  Examples of progressive and dialog forms with a right-aligned primary button
+</Caption>
 
 </Column>
 </Row>