Merge branch 'main' into adam/eslint-plugin

Author: TheSonOfThomp

.changeset/curly-worms-drum.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/tokens': minor
+---
+
+Adds additional spacing tokens

.changeset/quick-eggs-kneel.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/typography': patch
+---
+
+Updates dependency `@leafygreen-ui/[email protected]`

.changeset/tricky-cars-cheat.md

@@ -0,0 +1,7 @@
+---
+'@leafygreen-ui/text-area': minor
+'@leafygreen-ui/combobox': minor
+'@leafygreen-ui/select': minor
+---
+
+`description` prop can now be a `React.ReactNode` rather than a `string`

STYLEGUIDE.md

@@ -190,7 +190,42 @@ Keeps functions pure.
 
 ---
 
-### Use “be” verbs for boolean types. (e.g. `should`/`is`/`can`/`does`/`has`)
+### Prefix boolean variables with “to be” verbs.
+
+(e.g. `shouldX`, `isY`, `canZ`, `doesX`, `hasY`, `willZ`)
+
+---
+
+### Follow BEM-ish patterns when hard-coding a `data-testid` or `data-lgid`
+
+1. Prefix with “lg”
+2. Words are separated by underscore `_`
+3. Blocks are separated by dash `-`
+4. Name hierarchy should somewhat match the directory structure
+
+Additionally, a hard-coded `data` attribute should _only_ be placed on a root-level, native HTML element. Components should have their own internal id.
+
+#### Prefer
+
+```jsx
+// CalendarCell.tsx
+<td data-testid="lg-date_picker-calendar_cell" />
+```
+
+#### Avoid
+
+```jsx
+// Calendar.tsx
+<Cell data-testid="lg-date-picker-calendar-cell" />
+```
+
+(Note, this is fine to do in a _test/spec_ file. Just don't hard-code this into the component)
+
+#### Why BEM-_ish_?
+
+BEM uses dashes (`-`) to separate words within a block/element, and a double underscore (`__`) to separate blocks/elements/modifiers.
+
+The main issue with strict BEM syntax is that it creates a poor user experience when editing. In most text editors a Double click or `Option`+`ArrowKey` presses treat underscores as one works and dashes as a separator. For example, to replace the `"calendar_cell"` part in the above example, you can double click it and paste. Or to move the cursor from the end of that string to the previous element you can press `Option` + `ArrowLeft`.
 
 ---
 

package.json

@@ -10,6 +10,7 @@
   },
   "scripts": {
     "init": "yarn && yarn build",
+    "init17": "yarn && yarn build:cli && npx ts-node tools/test/scripts/install-react17.ts && yarn build",
     "create-package": "lg create",
     "prebuild": "yarn build:cli",
     "build": "turbo run build tsc",
@@ -52,11 +53,11 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "5.2.0",
     "storybook": "7.1.1",
-    "turbo": "^1.10.7",
+    "turbo": "^1.12.3",
     "typescript": "~4.7.0"
   },
   "resolutions": {
-    "caniuse-lite": "^1.0.30001135"
+    "caniuse-lite": "^1.0.30001585"
   },
   "workspaces": [
     "packages/*",

packages/badge/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @leafygreen-ui/badge
 
+## 8.1.0
+
+### Minor Changes
+
+- cbe92872: Badge components now have a `border-radius` of `24px`, up from `5px` previously.
+
 ## 8.0.15
 
 ### Patch Changes

packages/badge/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafygreen-ui/badge",
-  "version": "8.0.15",
+  "version": "8.1.0",
   "description": "leafyGreen UI Kit Badge",
   "main": "./dist/index.js",
   "module": "./dist/esm/index.js",

packages/badge/src/Badge/styles.ts

@@ -12,7 +12,7 @@ export const baseStyle = css`
   font-weight: ${fontWeights.bold};
   font-size: 12px;
   line-height: 16px;
-  border-radius: 5px;
+  border-radius: 24px;
   height: 18px;
   padding-left: 6px;
   padding-right: 6px;

packages/button/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @leafygreen-ui/button
 
+## 21.0.12
+
+### Patch Changes
+
+- e4767683: Fixes disabled state styling when a button is focused or active
+- Updated dependencies [2bceccb1]
+- Updated dependencies [2645cd50]
+  - @leafygreen-ui/lib@13.2.1
+  - @leafygreen-ui/tokens@2.3.0
+
 ## 21.0.11
 
 ### Patch Changes

packages/button/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafygreen-ui/button",
-  "version": "21.0.11",
+  "version": "21.0.12",
   "description": "leafyGreen UI Kit Button",
   "main": "./dist/index.js",
   "module": "./dist/esm/index.js",
@@ -24,16 +24,16 @@
   "dependencies": {
     "@leafygreen-ui/box": "^3.1.8",
     "@leafygreen-ui/emotion": "^4.0.7",
-    "@leafygreen-ui/lib": "^13.1.0",
+    "@leafygreen-ui/lib": "^13.2.1",
     "@leafygreen-ui/palette": "^4.0.7",
     "@leafygreen-ui/ripple": "^1.1.12",
-    "@leafygreen-ui/tokens": "^2.1.4",
+    "@leafygreen-ui/tokens": "^2.3.0",
     "polished": "^4.2.2"
   },
   "devDependencies": {
     "next": "^13.0.5",
     "@leafygreen-ui/icon": "^11.25.1",
-    "@leafygreen-ui/loading-indicator": "^2.0.7"
+    "@leafygreen-ui/loading-indicator": "^2.0.8"
   },
   "peerDependencies": {
     "@leafygreen-ui/leafygreen-provider": "^3.1.10"