@primer/components 29.1.1-rc.0f976d3a → 30.0.0-rc.48fd5c94

package/.eslintrc.json

@@ -53,19 +53,14 @@
     "camelcase": [
       "error",
       {
-        "allow": [
-          "dark_dimmed"
-        ]
+        "allow": ["dark_dimmed"]
       }
     ]
   },
   "overrides": [
     // rules which apply only to JS
     {
-      "files": [
-        "**/*.js",
-        "**/*.jsx"
-      ],
+      "files": ["**/*.{js,jsx}"],
       "rules": {
         "eslint-comments/no-use": 0,
         "import/no-namespace": 0,
@@ -83,13 +78,8 @@
       "parserOptions": {
         "project": "tsconfig.json"
       },
-      "files": [
-        "**/*.ts",
-        "**/*.tsx"
-      ],
-      "extends": [
-        "plugin:@typescript-eslint/recommended"
-      ],
+      "files": ["**/*.{ts,tsx}"],
+      "extends": ["plugin:@typescript-eslint/recommended"],
       "rules": {
         "@typescript-eslint/no-explicit-any": 2,
         "@typescript-eslint/no-unnecessary-condition": 2,
@@ -101,6 +91,46 @@
           }
         ]
       }
+    },
+    // rules which apply only to Markdown
+    {
+      "files": ["**/*.{md,mdx}"],
+      "extends": ["plugin:mdx/recommended"],
+      "settings": {
+        "mdx/code-blocks": true
+      },
+      "rules": {
+        "prettier/prettier": 0
+      }
+    },
+    // rules which apply only to Markdown code blocks
+    {
+      "files": ["**/*.{md,mdx}/**"],
+      "parserOptions": {
+        "project": false
+      },
+      "rules": {
+        "camelcase": 0,
+        "no-constant-condition": 0,
+        "no-console": 0,
+        "no-empty-pattern": 0,
+        "no-unused-vars": 0,
+        "no-undef": 0,
+        "react/no-unescaped-entities": 0,
+        "react/react-in-jsx-scope": 0,
+        "react/jsx-no-undef": 0,
+        "react/jsx-key": 0,
+        "react/jsx-no-comment-textnodes": 0,
+        "import/no-anonymous-default-export": 0,
+        "prettier/prettier": 0,
+        // These a11y rules should eventually be re-enabled
+        "jsx-a11y/anchor-is-valid": 0,
+        "jsx-a11y/accessible-emoji": 0,
+        "jsx-a11y/label-has-for": 0,
+        "@typescript-eslint/no-unnecessary-condition": 0,
+        "@typescript-eslint/no-unused-vars": 0,
+        "primer-react/no-deprecated-colors": ["error", {"skipImportCheck": true}]
+      }
     }
   ]
 }

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @primer/components
 
+## 30.0.0
+
+### Major Changes
+
+- [#1448](https://github.com/primer/react/pull/1448) [`1a39fb02`](https://github.com/primer/react/commit/1a39fb0284c5e19324d378629d09a343be4cde05) Thanks [@SferaDev](https://github.com/SferaDev)! - Remove `.Breadcrumb` classname from the root element of the `Breadcrumbs` component. This change shouldn't break anything unless you have styles, scripts, or tests that reference the `.Breadcrumb` classname.
+
+### Patch Changes
+
+- [#1448](https://github.com/primer/react/pull/1448) [`1a39fb02`](https://github.com/primer/react/commit/1a39fb0284c5e19324d378629d09a343be4cde05) Thanks [@SferaDev](https://github.com/SferaDev)! - Rename `Breadcrumb` component to `Breadcrumbs`
+
 ## 29.1.1
 
 ### Patch Changes
@@ -558,7 +568,7 @@
   import {ThemeProvider} from 'styled-components'
   import {theme} from '@primer/react'
 
-  funciton App(props) {
+  function App(props) {
     return (
       <div>
         <ThemeProvider theme={theme}>

package/contributor-docs/CONTRIBUTING.md

@@ -79,7 +79,7 @@ Here's an example of a basic component written in the style of Primer Components
 
 ```jsx
 import {TYPOGRAPHY, COMMON} from './constants'
-import sx from './sx
+import sx from './sx'
 
 const Component = styled.div`
   // additional styles here
@@ -258,7 +258,7 @@ Ensure you are using the latest minor of Node.js for the major version specified
 System props are style functions that provide one or more props, and can be passed directly the return value of [styled-components]'s `styled()` function:
 
 ```jsx
-import {styled} from 'styled-components'
+import styled from 'styled-components'
 import {space} from 'styled-system'
 const SpaceDiv = styled.div`
   ${space}

package/contributor-docs/component-contents-api-patterns.md

@@ -166,12 +166,13 @@ Now let's dive into `WordWrap`, implemented with a React children-based API:
 
 ```jsx
 function WordWrap({ children, charactersPerLine }) {
+  const items = React.Children.toArray(children);
   let textContent = "";
-  React.Children.forEach(children, (child) => {
+  for (const child of items) {
     if (typeof child === "string") {
       textContent += child;
     }
-  });
+  }
   const lines = [];
   for (
     let low = 0;
@@ -247,8 +248,8 @@ function MyApp() {
 ```jsx
 function List({ items, ordered }) {
   const Elem = ordered ? "ol" : "ul";
-  const items = items.map((i) => <li key={i}>i</li>);
-  return <Elem>{items}</Elem>;
+  const listItems = items.map((i) => <li key={i}>i</li>);
+  return <Elem>{listItems}</Elem>;
 }
 
 // usage