Merge pull request #677 from pixiv/mimo/v4-release-note

docs: v4 release note

.github/workflows/publish.yml

@@ -14,6 +14,7 @@ on:
         options:
           - latest
           - beta
+          - rc
 
 jobs:
   build:

.prettierignore

@@ -16,4 +16,4 @@ LICENSE
 /packages/token-cli/tokens/
 /packages/token-cli/out/
 /packages/theme/src/unstable-css/
-/packages/react/docs/v4.0.0.mdx
+.storybook/src/v4.0.0.mdx

packages/react/docs/v4.0.0.mdx → .storybook/src/v4.0.0.mdx

@@ -1,7 +1,7 @@
 import { Meta, Story } from '@storybook/addon-docs'
 import { Unstyled } from '@storybook/blocks'
 
-<Meta title="react/docs/v4.0.0" />
+<Meta title="v4.0.0" />
 
 # @charcoal-ui/react@v4.0.0
 
@@ -22,6 +22,25 @@ function App() {
 }
 ```
 
+※ styled 廃止した影響で classname の優先度が変わるケースがあります。
+
+```tsx
+import { Button } from '@charcoal-ui/react'
+import styled from 'styled-components'
+
+// 今ままでと違う見た目になる可能性がある
+const NewButton = styled(Button)`
+  color: red;
+`
+```
+
+この場合 @layer 版の利用をおすすめしますが、サポート対象が iOS 15.4+ になります。
+
+```diff
+- import '@charcoal-ui/react/dist/index.css'
++ import '@charcoal-ui/react/dist/layered.css'
+```
+
 ## ComponentAbstraction
 
 - `ComponentAbstraction`が削除されました。
@@ -100,7 +119,6 @@ After
 
 ## MultiSelect
 
-- コンポーネントが削除されました。
 - `overlay`の代替として`Checkbox`の`rounded`が追加されました。
 
 ## RadioGroup
@@ -126,3 +144,76 @@ After
 
 - `input`要素の`props`を継承するように変更しました。
 - 文字数の計算ロジックを`getCount`プロパティで上書きできるように変更しました。
+
+## その他
+
+- `PixivIcon.extend` に渡す内容が sanitize されなくなります。必要な場合事前に sanitize するか、dompurify などを挟んでください [fix!(@charcoal-ui/icons): remove dompurify from v4. #643](https://github.com/pixiv/charcoal/pull/643)
+
+# Design Token 2.0 の実験的サポート
+
+## styled-components
+
+実装例: [feat: token v2 demo styled #655](https://github.com/pixiv/charcoal/pull/655)
+
+```ts
+import React, { useState } from 'react'
+import styled from 'styled-components'
+import tokens from '@charcoal-ui/theme/unstable-tokens/css-variables.json'
+
+const User = styled.a`
+  width: 40px;
+  height: 40px;
+  display: grid;
+  place-items: center;
+  border-radius: calc(${tokens.radius.oval} * 1px);
+  cursor: pointer;
+  color: ${tokens.color.icon.default};
+  background-color: ${tokens.color.container.secondary.default};
+  &:hover {
+    color: ${tokens.color.icon.hover};
+    background-color: ${tokens.color.container.secondary.hover};
+  }
+  &:active {
+    color: ${tokens.color.icon.press};
+    background-color: ${tokens.color.container.secondary.press};
+  }
+`
+```
+
+## tailwindcss
+
+実装例: [feat: allow design token v2 in tailwind config #650](https://github.com/pixiv/charcoal/pull/650)
+
+```diff
+const { light, dark } = require('@charcoal-ui/theme')
+const {
+  createTailwindConfig,
+} = require('@charcoal-ui/tailwind-config')
+
+/**
+ * @type {import('tailwindcss/tailwind-config').TailwindConfig}
+ */
+module.exports = {
+  darkMode: false,
+  content: ['**/*.tsx'],
+  presets: [
+    createTailwindConfig({
+      version: 'v3',
+      theme: {
+        ':root': light,
+        '[data-dark="true"]': dark,
+      },
++     unstableTokenV2: true,
+    }),
+  ],
+  corePlugins: {
+```
+
+```html
+<a
+  className="rounded-oval text-icon hover:text-icon-hover active:text-icon-press bg-container-secondary hover:bg-container-hover active:bg-container-press grid h-[40px] w-[40px] cursor-pointer place-items-center"
+  aria-label="UserIcon"
+>
+  <Icon name="24/FaceEdit" />
+</a>
+```

lerna.json

@@ -86,5 +86,5 @@
   "packages": [
     "packages/*"
   ],
-  "version": "4.0.0-beta.17"
+  "version": "4.0.0-rc.0"
 }

packages/esbuild-plugin-styled-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/esbuild-plugin-styled-components",
-  "version": "4.0.0-beta.17",
+  "version": "4.0.0-rc.0",
   "private": true,
   "license": "Apache-2.0",
   "main": "src/index.ts",

packages/foundation/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/foundation",
-  "version": "4.0.0-beta.17",
+  "version": "4.0.0-rc.0",
   "license": "Apache-2.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",

packages/icon-files/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/icon-files",
-  "version": "4.0.0-beta.17",
+  "version": "4.0.0-rc.0",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./src/index.cjs",

packages/icons-cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/icons-cli",
-  "version": "4.0.0-beta.17",
+  "version": "4.0.0-rc.0",
   "license": "Apache-2.0",
   "bin": "./dist/index.js",
   "scripts": {

packages/icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/icons",
-  "version": "4.0.0-beta.17",
+  "version": "4.0.0-rc.0",
   "license": "Apache-2.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
@@ -36,7 +36,7 @@
     "vitest": "^2.0.1"
   },
   "dependencies": {
-    "@charcoal-ui/icon-files": "^4.0.0-beta.17",
+    "@charcoal-ui/icon-files": "^4.0.0-rc.0",
     "warning": "^4.0.3"
   },
   "files": [

packages/react-sandbox/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/react-sandbox",
-  "version": "4.0.0-beta.17",
+  "version": "4.0.0-rc.0",
   "license": "Apache-2.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
@@ -21,7 +21,7 @@
     "test": "vitest run --passWithNoTests"
   },
   "devDependencies": {
-    "@charcoal-ui/esbuild-plugin-styled-components": "^4.0.0-beta.17",
+    "@charcoal-ui/esbuild-plugin-styled-components": "^4.0.0-rc.0",
     "@storybook/addon-actions": "^7.4.1",
     "@storybook/addon-knobs": "^7.0.2",
     "@storybook/addons": "^7.4.1",
@@ -54,11 +54,11 @@
     "vitest": "^2.0.2"
   },
   "dependencies": {
-    "@charcoal-ui/foundation": "^4.0.0-beta.17",
-    "@charcoal-ui/react": "^4.0.0-beta.17",
-    "@charcoal-ui/styled": "^4.0.0-beta.17",
-    "@charcoal-ui/theme": "^4.0.0-beta.17",
-    "@charcoal-ui/utils": "^4.0.0-beta.17",
+    "@charcoal-ui/foundation": "^4.0.0-rc.0",
+    "@charcoal-ui/react": "^4.0.0-rc.0",
+    "@charcoal-ui/styled": "^4.0.0-rc.0",
+    "@charcoal-ui/theme": "^4.0.0-rc.0",
+    "@charcoal-ui/utils": "^4.0.0-rc.0",
     "polished": "^4.1.4",
     "react-spring": "^9.0.0",
     "warning": "^4.0.3"

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/react",
-  "version": "4.0.0-beta.17",
+  "version": "4.0.0-rc.0",
   "license": "Apache-2.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
@@ -33,7 +33,7 @@
     "test": "vitest run --passWithNoTests"
   },
   "devDependencies": {
-    "@charcoal-ui/esbuild-plugin-styled-components": "^4.0.0-beta.17",
+    "@charcoal-ui/esbuild-plugin-styled-components": "^4.0.0-rc.0",
     "@react-types/switch": "^3.1.2",
     "@storybook/addon-actions": "^8.0.5",
     "@storybook/react": "^8.0.5",
@@ -62,10 +62,10 @@
     "vitest": "^2.0.1"
   },
   "dependencies": {
-    "@charcoal-ui/foundation": "^4.0.0-beta.17",
-    "@charcoal-ui/icons": "^4.0.0-beta.17",
-    "@charcoal-ui/theme": "^4.0.0-beta.17",
-    "@charcoal-ui/utils": "^4.0.0-beta.17",
+    "@charcoal-ui/foundation": "^4.0.0-rc.0",
+    "@charcoal-ui/icons": "^4.0.0-rc.0",
+    "@charcoal-ui/theme": "^4.0.0-rc.0",
+    "@charcoal-ui/utils": "^4.0.0-rc.0",
     "@react-aria/button": "^3.9.1",
     "@react-aria/checkbox": "^3.13.0",
     "@react-aria/dialog": "^3.5.10",

packages/styled/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/styled",
-  "version": "4.0.0-beta.17",
+  "version": "4.0.0-rc.0",
   "license": "Apache-2.0",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.cjs.js",
@@ -38,9 +38,9 @@
     "vitest": "^2.0.2"
   },
   "dependencies": {
-    "@charcoal-ui/foundation": "^4.0.0-beta.17",
-    "@charcoal-ui/theme": "^4.0.0-beta.17",
-    "@charcoal-ui/utils": "^4.0.0-beta.17",
+    "@charcoal-ui/foundation": "^4.0.0-rc.0",
+    "@charcoal-ui/theme": "^4.0.0-rc.0",
+    "@charcoal-ui/utils": "^4.0.0-rc.0",
     "warning": "^4.0.3"
   },
   "peerDependencies": {

packages/tailwind-config/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/tailwind-config",
-  "version": "4.0.0-beta.17",
+  "version": "4.0.0-rc.0",
   "license": "Apache-2.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
@@ -32,9 +32,9 @@
     "vitest": "^2.0.2"
   },
   "dependencies": {
-    "@charcoal-ui/foundation": "^4.0.0-beta.17",
-    "@charcoal-ui/theme": "^4.0.0-beta.17",
-    "@charcoal-ui/utils": "^4.0.0-beta.17"
+    "@charcoal-ui/foundation": "^4.0.0-rc.0",
+    "@charcoal-ui/theme": "^4.0.0-rc.0",
+    "@charcoal-ui/utils": "^4.0.0-rc.0"
   },
   "peerDependencies": {
     "csstype": ">=3.0.0",

packages/tailwind-diff/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/tailwind-diff",
-  "version": "4.0.0-beta.17",
+  "version": "4.0.0-rc.0",
   "bin": "bin/tailwind-diff.js",
   "scripts": {
     "build": "tsc",

packages/theme/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/theme",
-  "version": "4.0.0-beta.17",
+  "version": "4.0.0-rc.0",
   "license": "Apache-2.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
@@ -63,8 +63,8 @@
     "vitest": "^2.0.2"
   },
   "dependencies": {
-    "@charcoal-ui/foundation": "^4.0.0-beta.17",
-    "@charcoal-ui/utils": "^4.0.0-beta.17",
+    "@charcoal-ui/foundation": "^4.0.0-rc.0",
+    "@charcoal-ui/utils": "^4.0.0-rc.0",
     "change-case-all": "^2.1.0",
     "deepmerge": "^4.3.1",
     "polished": "^4.1.4"

packages/token-cli/package.json

@@ -3,7 +3,7 @@
   "private": true,
   "bin": "./dist/index.js",
   "type": "commonjs",
-  "version": "4.0.0-beta.17",
+  "version": "4.0.0-rc.0",
   "license": "Apache-2.0",
   "scripts": {
     "build": "FORCE_COLOR=1 tsup-node",

packages/utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/utils",
-  "version": "4.0.0-beta.17",
+  "version": "4.0.0-rc.0",
   "license": "Apache-2.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
@@ -26,7 +26,7 @@
     "vitest": "^2.0.2"
   },
   "dependencies": {
-    "@charcoal-ui/foundation": "^4.0.0-beta.17",
+    "@charcoal-ui/foundation": "^4.0.0-rc.0",
     "polished": "^4.1.4"
   },
   "files": [