Merge pull request #543 from pixiv/toshusai/feat-add-rounded-checkbox

feat: add the rounded style to the Checkbox
pixiv · Jun 5, 2024 · d81fc37 · d81fc37
2 parents 76eff7d + 71cd7fd
commit d81fc37
Show file tree

Hide file tree

Showing 17 changed files with 98 additions and 1,999 deletions.
diff --git a/docs/src/components/NavList.tsx b/docs/src/components/NavList.tsx
@@ -34,7 +34,6 @@ const reactList: ListItem[] = [
     'IconButton',
     'LoadingSpinner',
     'Modal',
-    'MultiSelect',
     'Radio',
     'SegmentedControl',
     'Switch',

diff --git a/docs/src/pages/@charcoal-ui/react/Checkbox/apiData.tsx b/docs/src/pages/@charcoal-ui/react/Checkbox/apiData.tsx
@@ -1,5 +1,4 @@
 import { CheckboxProps } from '@charcoal-ui/react'
-import { ComponentPropsWithRef } from 'react'
 import { ApiTableData } from '../_components/ApiTable'
 
 export const apiData: Omit<
@@ -11,4 +10,9 @@ export const apiData: Omit<
     default: 'false',
     type: 'boolean',
   },
+  rounded: {
+    description: '角丸の有効化',
+    default: 'false',
+    type: 'boolean',
+  },
 }
diff --git a/docs/src/pages/@charcoal-ui/react/MultiSelect/ExampleMultiSelect.tsx b/docs/src/pages/@charcoal-ui/react/MultiSelect/ExampleMultiSelect.tsx
diff --git a/docs/src/pages/@charcoal-ui/react/MultiSelect/apiData.tsx b/docs/src/pages/@charcoal-ui/react/MultiSelect/apiData.tsx
diff --git a/docs/src/pages/@charcoal-ui/react/MultiSelect/index.page.tsx b/docs/src/pages/@charcoal-ui/react/MultiSelect/index.page.tsx
diff --git a/docs/src/pages/@charcoal-ui/react/MultiSelect/sections.tsx b/docs/src/pages/@charcoal-ui/react/MultiSelect/sections.tsx
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=ad4272&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
@@ -220,7 +220,7 @@ __metadata:
   peerDependencies:
     react: ">=17.0.0"
     styled-components: ">=5.1.1"
-  checksum: 16f091a0e3faddb16826416c1cd961323842348bb1ba61264dd841cdfd17b54d8cc6c80bd88ee8b6d45c8dc03be215301edbfb33edca10d7fe3816861d391794
+  checksum: 317dc2198a9b89b080cb6b10c61de451ea378e927949cab5a9dead70cfb2fdd3ec37ef2acf0b22299372d096bed15815363993ecf5a328c410cd8984c7b0649a
   languageName: node
   linkType: hard
 

diff --git a/packages/react/src/components/Checkbox/CheckboxInput/__snapshots__/index.story.storyshot b/packages/react/src/components/Checkbox/CheckboxInput/__snapshots__/index.story.storyshot
@@ -52,3 +52,26 @@ exports[`Storybook Tests React/Internal/CheckboxInput Invalid 1`] = `
   />
 </div>
 `;
+
+exports[`Storybook Tests React/Internal/CheckboxInput Rounded 1`] = `
+<div
+  data-dark={false}
+>
+  <div
+    style={
+      Object {
+        "backgroundColor": "var(--charcoal-background2)",
+        "padding": 8,
+      }
+    }
+  >
+    <input
+      checked={false}
+      className="charcoal-checkbox-input"
+      data-rounded={true}
+      onChange={[Function]}
+      type="checkbox"
+    />
+  </div>
+</div>
+`;
diff --git a/packages/react/src/components/Checkbox/CheckboxInput/index.css b/packages/react/src/components/Checkbox/CheckboxInput/index.css
@@ -7,6 +7,8 @@
   height: 20px;
   border-radius: 4px;
   transition: 0.2s box-shadow, 0.2s background-color;
+  position: relative;
+  box-sizing: border-box;
 }
 
 .charcoal-checkbox-input:disabled,
@@ -60,3 +62,50 @@
 .charcoal-checkbox-input[aria-invalid='true']:not(:disabled):focus {
   box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
 }
+
+.charcoal-checkbox-input[data-rounded='true'] {
+  border-radius: 10px;
+  background-color: var(--charcoal-surface3);
+  border: 2px solid transparent;
+}
+
+.charcoal-checkbox-input[data-rounded='true']:checked {
+  background-color: var(--charcoal-brand);
+}
+
+.charcoal-checkbox-input[data-rounded='true']:not(:disabled):hover {
+  background-color: var(--charcoal-surface3-hover);
+}
+.charcoal-checkbox-input[data-rounded='true']:not(:disabled):active {
+  background-color: var(--charcoal-surface3-press);
+}
+
+.charcoal-checkbox-input[data-rounded='true']:not(:disabled):focus-visible {
+  box-shadow: 0 0 0 6px rgba(0, 150, 250, 0.32);
+}
+
+.charcoal-checkbox-input[data-rounded='true']:checked:not(:disabled):hover {
+  background-color: var(--charcoal-brand-hover);
+}
+.charcoal-checkbox-input[data-rounded='true']:checked:not(:disabled):active {
+  background-color: var(--charcoal-brand-press);
+}
+
+.charcoal-checkbox-input[data-rounded='true'][aria-invalid='true'],
+.charcoal-checkbox-input[data-rounded='true'][aria-invalid='true']:not(
+    :disabled
+  ):focus {
+  box-shadow: 0 0 0 6px rgba(255, 43, 0, 0.32);
+}
+
+.charcoal-checkbox-input[data-rounded='true']::before {
+  content: '';
+  width: 24px;
+  height: 24px;
+  position: absolute;
+  top: -4px;
+  left: -4px;
+  border-radius: 12px;
+  border: 2px solid #fff;
+  box-sizing: border-box;
+}