Merge branch 'v4.0.0' of https://github.com/pixiv/charcoal into toshu…

…sai/feat-add-rounded-checkbox
pixiv · May 30, 2024 · 71cd7fd · 71cd7fd
2 parents aee4ef9 + 76eff7d
commit 71cd7fd
Show file tree

Hide file tree

Showing 15 changed files with 347 additions and 963 deletions.
diff --git a/docs/src/pages/@charcoal-ui/react/TextArea/apiData.tsx b/docs/src/pages/@charcoal-ui/react/TextArea/apiData.tsx
@@ -1,22 +1,10 @@
 import { TextAreaProps } from '@charcoal-ui/react'
-import { TableItem } from '../_components/ApiTable'
+import { ApiTableData } from '../_components/ApiTable'
 
 export const apiData: Omit<
-  Record<
-    Exclude<
-      keyof TextAreaProps,
-      keyof React.InputHTMLAttributes<HTMLTextAreaElement>
-    >,
-    TableItem
-  >,
-  'type' | 'value' | 'cols' | 'dirName' | 'wrap'
+  ApiTableData<TextAreaProps, HTMLInputElement>,
+  keyof React.HTMLProps<HTMLInputElement> | 'dirName'
 > = {
-  label: {
-    default: '',
-    description: 'ラベル',
-    required: true,
-    type: 'string',
-  },
   assistiveText: {
     description: 'エラーのテキスト',
     type: 'string',
@@ -36,11 +24,6 @@ export const apiData: Omit<
     description: '必須を示すのテキスト',
     type: 'string',
   },
-  rows: {
-    default: '',
-    description: '表示する行数、multilineのみ有効',
-    type: 'number',
-  },
   showCount: {
     default: 'false',
     description: '入力文字数の表示',
@@ -55,4 +38,8 @@ export const apiData: Omit<
     description: '右側に表示されるラベル',
     type: 'string',
   },
+  getCount: {
+    description: 'textの長さを計算する関数',
+    type: '(value: string) => number',
+  },
 }
diff --git a/docs/src/pages/@charcoal-ui/react/TextField/apiData.tsx b/docs/src/pages/@charcoal-ui/react/TextField/apiData.tsx
@@ -1,22 +1,10 @@
 import { TextFieldProps } from '@charcoal-ui/react'
-import { TableItem } from '../_components/ApiTable'
+import { ApiTableData } from '../_components/ApiTable'
 
 export const apiData: Omit<
-  Record<
-    Exclude<
-      keyof TextFieldProps,
-      keyof React.InputHTMLAttributes<HTMLInputElement>
-    >,
-    TableItem
-  >,
-  'type' | 'value'
+  ApiTableData<TextFieldProps, HTMLInputElement>,
+  keyof React.HTMLProps<HTMLInputElement> | 'enterKeyHint'
 > = {
-  label: {
-    default: '',
-    description: 'ラベル',
-    required: true,
-    type: 'string',
-  },
   assistiveText: {
     description: 'エラーのテキスト',
     type: 'string',
@@ -49,4 +37,12 @@ export const apiData: Omit<
     description: 'フィールドの末尾の要素、multilineでは無効',
     type: 'ReactNode',
   },
+  getCount: {
+    description: 'textの長さを計算する関数',
+    type: '(value: string) => number',
+  },
+  rdfaPredix: {
+    description: 'input要素のprefix',
+    type: 'string',
+  },
 }
diff --git a/docs/yarn.lock b/docs/yarn.lock
@@ -195,7 +195,7 @@ __metadata:
 
 "@charcoal-ui/react@file:../packages/react::locator=charcoal-web-docs%40workspace%3A.":
   version: 4.0.0-beta.4
-  resolution: "@charcoal-ui/react@file:../packages/react#../packages/react::hash=60be7a&locator=charcoal-web-docs%40workspace%3A."
+  resolution: "@charcoal-ui/react@file:../packages/react#../packages/react::hash=8077ae&locator=charcoal-web-docs%40workspace%3A."
   dependencies:
     "@charcoal-ui/foundation": ^4.0.0-beta.4
     "@charcoal-ui/icons": ^4.0.0-beta.4
@@ -210,7 +210,6 @@ __metadata:
     "@react-aria/radio": ^3.10.0
     "@react-aria/ssr": ^3.9.1
     "@react-aria/switch": ^3.6.0
-    "@react-aria/textfield": ^3.14.1
     "@react-aria/utils": ^3.23.0
     "@react-aria/visually-hidden": ^3.8.8
     "@react-stately/radio": ^3.10.2
@@ -221,7 +220,7 @@ __metadata:
   peerDependencies:
     react: ">=17.0.0"
     styled-components: ">=5.1.1"
-  checksum: ff2e47cd8668c5e9e4ce9b2dc73a38e5940579bdabb630021d4f7f5875b805acf3666a66fdf6011c5d55c9ab2a3b04fc8d652d7f7333464dc5311b01fac182e1
+  checksum: 317dc2198a9b89b080cb6b10c61de451ea378e927949cab5a9dead70cfb2fdd3ec37ef2acf0b22299372d096bed15815363993ecf5a328c410cd8984c7b0649a
   languageName: node
   linkType: hard
 
@@ -906,25 +905,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-aria/textfield@npm:^3.14.1":
-  version: 3.14.1
-  resolution: "@react-aria/textfield@npm:3.14.1"
-  dependencies:
-    "@react-aria/focus": ^3.16.0
-    "@react-aria/form": ^3.0.1
-    "@react-aria/label": ^3.7.4
-    "@react-aria/utils": ^3.23.0
-    "@react-stately/form": ^3.0.0
-    "@react-stately/utils": ^3.9.0
-    "@react-types/shared": ^3.22.0
-    "@react-types/textfield": ^3.9.0
-    "@swc/helpers": ^0.5.0
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
-  checksum: c1750b02fb0376726385ef4f8c62494bc911f75d6ee69789597ac656028743385a96e38569956090700d71355f25423a46c3bb25f8442d74ade9077353d1547b
-  languageName: node
-  linkType: hard
-
 "@react-aria/toggle@npm:^3.10.0":
   version: 3.10.0
   resolution: "@react-aria/toggle@npm:3.10.0"

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -70,7 +70,6 @@
     "@react-aria/radio": "^3.10.0",
     "@react-aria/ssr": "^3.9.1",
     "@react-aria/switch": "^3.6.0",
-    "@react-aria/textfield": "^3.14.1",
     "@react-aria/utils": "^3.23.0",
     "@react-aria/visually-hidden": "^3.8.8",
     "@react-stately/radio": "^3.10.2",

diff --git a/packages/react/src/components/DropdownSelector/__snapshots__/index.story.storyshot b/packages/react/src/components/DropdownSelector/__snapshots__/index.story.storyshot
@@ -1154,65 +1154,6 @@ exports[`Storybook Tests DropdownSelector InModal 1`] = `
   color: var(--charcoal-text2);
 }
 
-.c11 {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  width: 32px;
-  height: 32px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  color: var(--charcoal-text3);
-  background-color: var(--charcoal-transparent);
-  border-radius: 999999px;
-  -webkit-transition: 0.2s background-color,0.2s box-shadow;
-  transition: 0.2s background-color,0.2s box-shadow;
-}
-
-.c11:not(:disabled):not([aria-disabled]):hover,
-.c11[aria-disabled='false']:hover {
-  color: var(--charcoal-text3-hover);
-  background-color: var(--charcoal-transparent-hover);
-}
-
-.c11:not(:disabled):not([aria-disabled]):active,
-.c11[aria-disabled='false']:active {
-  color: var(--charcoal-text3-press);
-  background-color: var(--charcoal-transparent-press);
-}
-
-.c11:not(:disabled):not([aria-disabled]):focus,
-.c11[aria-disabled='false']:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c11:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c11[aria-disabled='false']:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c11:not(:disabled):not([aria-disabled]):focus-visible,
-.c11[aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c11:disabled,
-.c11[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-}
-
 .c8 {
   display: grid;
   grid-template-columns: 1fr;
@@ -1452,21 +1393,18 @@ exports[`Storybook Tests DropdownSelector InModal 1`] = `
                 className="c6"
               >
                 <input
+                  aria-describedby="test-id"
                   aria-labelledby="test-id"
-                  aria-required={true}
                   className="c7"
-                  disabled={false}
                   id="test-id"
                   onChange={[Function]}
                   placeholder="placeholder"
-                  readOnly={false}
-                  required={false}
                   type="text"
-                  value=""
                 />
               </div>
               <p
                 className="c4"
+                id="test-id"
               >
                 assistiveText
               </p>
@@ -1500,21 +1438,18 @@ exports[`Storybook Tests DropdownSelector InModal 1`] = `
                 rows={4}
               >
                 <textarea
+                  aria-describedby="test-id"
                   aria-labelledby="test-id"
-                  aria-required={true}
                   className="c10"
-                  disabled={false}
                   id="test-id"
                   onChange={[Function]}
                   placeholder="placeholder"
-                  readOnly={false}
-                  required={false}
                   rows={4}
-                  value=""
                 />
               </div>
               <p
                 className="c4"
+                id="test-id"
               >
                 assistiveText
               </p>
@@ -1604,7 +1539,10 @@ exports[`Storybook Tests DropdownSelector InModal 1`] = `
           </div>
         </div>
         <button
-          className="charcoal-clickable c11 charcoal-modal-close-button"
+          className="charcoal-icon-button charcoal-modal-close-button"
+          data-active={false}
+          data-size="S"
+          data-variant="Default"
           onClick={[Function]}
         >
           <pixiv-icon