@charcoal-ui/react 3.3.0-beta.0 → 3.4.0

package/src/components/Checkbox/__snapshots__/index.story.storyshot

@@ -0,0 +1,390 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Checkbox Labelled 1`] = `
+.c0 {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  cursor: pointer;
+  gap: 4px;
+}
+
+.c0:disabled,
+.c0[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
+}
+
+.c0:disabled,
+.c0[aria-disabled]:not([aria-disabled=false]) {
+  opacity: 0.32;
+}
+
+.c1 {
+  position: relative;
+}
+
+.c2[type='checkbox'] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  display: block;
+  cursor: pointer;
+  margin: 0;
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+  -webkit-transition: 0.2s box-shadow;
+  transition: 0.2s box-shadow;
+  -webkit-transition: all 0.2s !important;
+  transition: all 0.2s !important;
+}
+
+.c2[type='checkbox']:checked {
+  background-color: var(--charcoal-brand);
+  -webkit-transition: 0.2s background-color;
+  transition: 0.2s background-color;
+}
+
+.c2[type='checkbox']:checked:hover:not(:disabled):not([aria-disabled]),
+.c2[type='checkbox']:checked:hover[aria-disabled=false] {
+  background-color: var(--charcoal-brand-hover);
+}
+
+.c2[type='checkbox']:checked:active:not(:disabled):not([aria-disabled]),
+.c2[type='checkbox']:checked:active[aria-disabled=false] {
+  background-color: var(--charcoal-brand-press);
+}
+
+.c2[type='checkbox']:not(:checked) {
+  border-width: 2px;
+  border-style: solid;
+  border-color: #adadad;
+}
+
+.c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus,
+.c2[type='checkbox'][aria-disabled=false]:focus,
+.c2[type='checkbox']:not(:disabled):not([aria-disabled]):active,
+.c2[type='checkbox'][aria-disabled=false]:active {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c2[type='checkbox'][aria-disabled=false]:focus:not(:focus-visible),
+.c2[type='checkbox']:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
+.c2[type='checkbox'][aria-disabled=false]:active:not(:focus-visible) {
+  outline: none;
+}
+
+.c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus-visible,
+.c2[type='checkbox'][aria-disabled=false]:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c3 {
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  box-sizing: border-box;
+  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;
+  width: 24px;
+  height: 24px;
+  color: var(--charcoal-text5);
+  visibility: hidden;
+}
+
+.c4 {
+  color: var(--charcoal-text2);
+  font-size: 14px;
+  line-height: 20px;
+}
+
+<div
+  data-dark={false}
+>
+  <div>
+    <div
+      style={
+        Object {
+          "marginBottom": "1em",
+        }
+      }
+    >
+      <label
+        aria-disabled={false}
+        className="c0"
+      >
+        <div
+          className="c1"
+        >
+          <input
+            checked={false}
+            className="c2"
+            disabled={false}
+            name="labelled"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onClick={[Function]}
+            onDragStart={[Function]}
+            onFocus={[Function]}
+            onKeyDown={[Function]}
+            onKeyUp={[Function]}
+            onMouseDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            onMouseUp={[Function]}
+            onTouchCancel={[Function]}
+            onTouchEnd={[Function]}
+            onTouchMove={[Function]}
+            onTouchStart={[Function]}
+            type="checkbox"
+          />
+          <div
+            aria-hidden={true}
+            checked={false}
+            className="c3"
+          >
+            <pixiv-icon
+              name="24/Check"
+              unsafe-non-guideline-scale={0.6666666666666666}
+            />
+          </div>
+        </div>
+        <div
+          className="c4"
+        >
+          同意する
+        </div>
+      </label>
+    </div>
+    <div>
+      <label
+        aria-disabled={false}
+        className="c0"
+      >
+        <div
+          className="c1"
+        >
+          <input
+            checked={false}
+            className="c2"
+            disabled={false}
+            name="labelled"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onClick={[Function]}
+            onDragStart={[Function]}
+            onFocus={[Function]}
+            onKeyDown={[Function]}
+            onKeyUp={[Function]}
+            onMouseDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            onMouseUp={[Function]}
+            onTouchCancel={[Function]}
+            onTouchEnd={[Function]}
+            onTouchMove={[Function]}
+            onTouchStart={[Function]}
+            type="checkbox"
+          />
+          <div
+            aria-hidden={true}
+            checked={false}
+            className="c3"
+          >
+            <pixiv-icon
+              name="24/Check"
+              unsafe-non-guideline-scale={0.6666666666666666}
+            />
+          </div>
+        </div>
+        <div
+          className="c4"
+        >
+          <span
+            style={
+              Object {
+                "display": "block",
+                "width": 200,
+              }
+            }
+          >
+            同意する同意する同意する同意する同意する同意する同意する同意する同意する同意する同意する同意する同意する
+          </span>
+        </div>
+      </label>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Checkbox Unlabelled 1`] = `
+.c0 {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  cursor: pointer;
+  gap: 4px;
+}
+
+.c0:disabled,
+.c0[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
+}
+
+.c0:disabled,
+.c0[aria-disabled]:not([aria-disabled=false]) {
+  opacity: 0.32;
+}
+
+.c1 {
+  position: relative;
+}
+
+.c2[type='checkbox'] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  display: block;
+  cursor: pointer;
+  margin: 0;
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+  -webkit-transition: 0.2s box-shadow;
+  transition: 0.2s box-shadow;
+  -webkit-transition: all 0.2s !important;
+  transition: all 0.2s !important;
+}
+
+.c2[type='checkbox']:checked {
+  background-color: var(--charcoal-brand);
+  -webkit-transition: 0.2s background-color;
+  transition: 0.2s background-color;
+}
+
+.c2[type='checkbox']:checked:hover:not(:disabled):not([aria-disabled]),
+.c2[type='checkbox']:checked:hover[aria-disabled=false] {
+  background-color: var(--charcoal-brand-hover);
+}
+
+.c2[type='checkbox']:checked:active:not(:disabled):not([aria-disabled]),
+.c2[type='checkbox']:checked:active[aria-disabled=false] {
+  background-color: var(--charcoal-brand-press);
+}
+
+.c2[type='checkbox']:not(:checked) {
+  border-width: 2px;
+  border-style: solid;
+  border-color: #adadad;
+}
+
+.c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus,
+.c2[type='checkbox'][aria-disabled=false]:focus,
+.c2[type='checkbox']:not(:disabled):not([aria-disabled]):active,
+.c2[type='checkbox'][aria-disabled=false]:active {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c2[type='checkbox'][aria-disabled=false]:focus:not(:focus-visible),
+.c2[type='checkbox']:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
+.c2[type='checkbox'][aria-disabled=false]:active:not(:focus-visible) {
+  outline: none;
+}
+
+.c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus-visible,
+.c2[type='checkbox'][aria-disabled=false]:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c3 {
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  box-sizing: border-box;
+  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;
+  width: 24px;
+  height: 24px;
+  color: var(--charcoal-text5);
+  visibility: hidden;
+}
+
+<div
+  data-dark={false}
+>
+  <div>
+    <label
+      aria-disabled={false}
+      className="c0"
+    >
+      <div
+        className="c1"
+      >
+        <input
+          aria-label="label"
+          checked={false}
+          className="c2"
+          disabled={false}
+          name="unlabelled"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onClick={[Function]}
+          onDragStart={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+          onTouchCancel={[Function]}
+          onTouchEnd={[Function]}
+          onTouchMove={[Function]}
+          onTouchStart={[Function]}
+          type="checkbox"
+        />
+        <div
+          aria-hidden={true}
+          checked={false}
+          className="c3"
+        >
+          <pixiv-icon
+            name="24/Check"
+            unsafe-non-guideline-scale={0.6666666666666666}
+          />
+        </div>
+      </div>
+    </label>
+  </div>
+</div>
+`;

package/src/components/Checkbox/index.story.tsx

@@ -13,6 +13,7 @@ type Props = {
   disabled: boolean
   readonly: boolean
   className?: string
+  invalid: boolean
 }
 
 export const Labelled: Story<Props> = (props) => {
@@ -56,6 +57,7 @@ Labelled.args = {
   defaultChecked: false,
   disabled: false,
   readonly: false,
+  invalid: false,
 }
 
 export const Unlabelled: Story<Props> = (props) => {
@@ -79,4 +81,5 @@ Unlabelled.args = {
   defaultChecked: false,
   disabled: false,
   readonly: false,
+  invalid: false,
 }

package/src/components/Checkbox/index.tsx

@@ -27,6 +27,7 @@ export type CheckboxProps = CheckboxLabelProps & {
   readonly defaultChecked?: boolean
   readonly disabled?: boolean
   readonly readonly?: boolean
+  readonly invalid?: boolean
 
   readonly onClick?: () => void
   readonly onChange?: (isSelected: boolean) => void
@@ -35,17 +36,18 @@ export type CheckboxProps = CheckboxLabelProps & {
 }
 
 const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
-  function CheckboxInner(props, ref) {
+  function CheckboxInner({ invalid = false, ...props }, ref) {
     const ariaCheckboxProps = useMemo<AriaCheckboxProps>(
       () => ({
         ...props,
         isSelected: props.checked,
         defaultSelected: props.defaultChecked,
+        validationState: invalid ? 'invalid' : 'valid',
         // children がいない場合は aria-label をつけないといけない
         'aria-label': 'children' in props ? undefined : props.label,
         isDisabled: props.disabled,
       }),
-      [props]
+      [invalid, props]
     )
     const state = useToggleState(ariaCheckboxProps)
     const objectRef = useObjectRef(ref)
@@ -56,7 +58,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
     return (
       <InputRoot aria-disabled={isDisabled} className={props.className}>
         <CheckboxRoot>
-          <CheckboxInput type="checkbox" {...inputProps} />
+          <CheckboxInput type="checkbox" {...inputProps} invalid={invalid} />
           <CheckboxInputOverlay aria-hidden={true} checked={inputProps.checked}>
             <Icon name="24/Check" unsafeNonGuidelineScale={2 / 3} />
           </CheckboxInputOverlay>
@@ -91,7 +93,7 @@ const CheckboxRoot = styled.div`
   position: relative;
 `
 
-const CheckboxInput = styled.input`
+const CheckboxInput = styled.input<{ invalid: boolean }>`
   &[type='checkbox'] {
     appearance: none;
     display: block;
@@ -109,6 +111,7 @@ const CheckboxInput = styled.input`
       border-color: ${({ theme }) => theme.color.text4};
     }
     ${theme((o) => [o.outline.default.focus, o.borderRadius(4)])}
+    ${(p) => p.invalid && theme((o) => [o.outline.assertive])}
 
     /* FIXME: o.outline.default.focus の transition に o.bg.brand の transition が打ち消されてしまう */
     transition: all 0.2s !important;

package/src/components/Clickable/__snapshots__/index.story.storyshot

@@ -0,0 +1,100 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Clickable Button 1`] = `
+.c0 {
+  cursor: pointer;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: transparent;
+  padding: 0;
+  border-style: none;
+  outline: none;
+  color: inherit;
+  text-rendering: inherit;
+  -webkit-letter-spacing: inherit;
+  -moz-letter-spacing: inherit;
+  -ms-letter-spacing: inherit;
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  font: inherit;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+}
+
+.c0:disabled,
+.c0[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
+}
+
+.c0:focus {
+  outline: none;
+}
+
+.c0::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+<div
+  data-dark={false}
+>
+  <button
+    className="c0"
+    onClick={[Function]}
+  >
+    button
+  </button>
+</div>
+`;
+
+exports[`Storyshots Clickable Link 1`] = `
+.c0 {
+  cursor: pointer;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: transparent;
+  padding: 0;
+  border-style: none;
+  outline: none;
+  color: inherit;
+  text-rendering: inherit;
+  -webkit-letter-spacing: inherit;
+  -moz-letter-spacing: inherit;
+  -ms-letter-spacing: inherit;
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  font: inherit;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+}
+
+.c0:disabled,
+.c0[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
+}
+
+.c0:focus {
+  outline: none;
+}
+
+.c0::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+<div
+  data-dark={false}
+>
+  <a
+    className="c0"
+    href="#"
+    onClick={[Function]}
+  >
+    link
+  </a>
+</div>
+`;

package/src/components/Clickable/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import styled, { css } from 'styled-components'
+import styled from 'styled-components'
 import {
   LinkProps,
   useComponentAbstraction,
@@ -28,34 +28,33 @@ export type ClickableElement = HTMLButtonElement & HTMLAnchorElement
 const Clickable = React.forwardRef<ClickableElement, ClickableProps>(
   function Clickable(props, ref) {
     const { Link } = useComponentAbstraction()
-    if ('to' in props) {
-      const { onClick, disabled = false, ...rest } = props
-      return (
-        <A<typeof Link>
-          {...rest}
-          as={disabled ? undefined : Link}
-          onClick={disabled ? undefined : onClick}
-          aria-disabled={disabled}
-          ref={ref}
-        />
-      )
-    } else {
-      return <Button {...props} ref={ref} />
+    const isLink = 'to' in props
+    const as = isLink ? Link : 'button'
+    const ariaDisabled = isLink && props.disabled === true ? true : undefined
+    let rest = props
+    if (isLink) {
+      const { disabled, ..._rest } = props
+      rest = _rest
     }
+    return (
+      <StyledClickableDiv
+        {...rest}
+        ref={ref}
+        as={as}
+        aria-disabled={ariaDisabled}
+      />
+    )
   }
 )
 export default Clickable
 
-const clickableCss = css`
-  /* Clickable style */
+const StyledClickableDiv = styled.div`
   cursor: pointer;
 
   ${disabledSelector} {
     cursor: default;
   }
-`
 
-const Button = styled.button`
   /* Reset button appearance */
   appearance: none;
   background: transparent;
@@ -88,21 +87,4 @@ const Button = styled.button`
     border-style: none;
     padding: 0;
   }
-
-  ${clickableCss}
-`
-
-const A = styled.span`
-  /* Reset a-tag appearance */
-  color: inherit;
-
-  &:focus {
-    outline: none;
-  }
-
-  .text {
-    top: calc(1em + 2em);
-  }
-
-  ${clickableCss}
 `

package/src/components/DropdownSelector/DropdownPopover.tsx

@@ -26,7 +26,6 @@ export function DropdownPopover({ children, ...props }: DropdownPopoverProps) {
       const selectedElement = document.querySelector(
         `[data-key="${props.value.toString()}"]`
       ) as HTMLElement | undefined
-      selectedElement?.scrollIntoView({ block: 'center' })
       selectedElement?.focus()
       window.scrollTo(windowScrollX, windowScrollY)
     }