@charcoal-ui/react 3.5.0 → 3.7.0

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

@@ -210,4 +210,31 @@ const BottomSheetStory = (args: ModalProps) => {
 
 export const BottomSheet: Story<ModalProps> = BottomSheetStory.bind({})
 
+export const NotDismmissableStory: Story<ModalProps> = (args: ModalProps) => {
+  const state = useOverlayTriggerState({})
+  return (
+    <OverlayProvider>
+      <Button onClick={() => state.open()}>Open Modal</Button>
+
+      <Modal {...args} isOpen={state.isOpen} onClose={() => state.close()}>
+        <ModalHeader />
+        <ModalBody>
+          <ModalVStack>
+            <StyledModalText>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod
+              placeat tenetur, necessitatibus laudantium cumque exercitationem
+              provident. Quaerat iure enim, eveniet dolores earum odio quo
+              possimus fugiat aspernatur, numquam, commodi repellat.
+            </StyledModalText>
+          </ModalVStack>
+          <ModalButtons>
+            <Button variant="Primary" onClick={() => state.close()} fullWidth>
+              OK
+            </Button>
+          </ModalButtons>
+        </ModalBody>
+      </Modal>
+    </OverlayProvider>
+  )
+}
 export { InternalScrollStory as InternalScroll } from './__stories__/InternalScrollStory'

package/src/components/Modal/index.tsx

@@ -6,7 +6,6 @@ import {
   useModalOverlay,
 } from '@react-aria/overlays'
 import styled, { css, useTheme } from 'styled-components'
-import { theme } from '../../styled'
 import { AriaDialogProps } from '@react-types/dialog'
 import { maxWidth } from '@charcoal-ui/utils'
 import { useMedia } from '@charcoal-ui/styled'
@@ -83,7 +82,12 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(function ModalInner(
   const ref = useObjectRef<HTMLDivElement>(external)
 
   const { modalProps, underlayProps } = useModalOverlay(
-    props,
+    {
+      ...props,
+      isKeyboardDismissDisabled:
+        isDismissable === undefined || isDismissable === false,
+    },
+
     {
       close: onClose,
       isOpen: isOpen,
@@ -214,7 +218,7 @@ const ModalBackground = animated(styled.div<{
   padding: 40px 0;
   box-sizing: border-box;
 
-  background-color: ${({ theme }) => theme.color.surface4};
+  background-color: var(--charcoal-surface4);
 
   @media ${({ theme }) => maxWidth(theme.breakpoint.screen1)} {
     ${(p) =>
@@ -230,7 +234,18 @@ const ModalCrossButton = styled(IconButton)`
   top: 8px;
   right: 8px;
 
-  ${theme((o) => [o.font.text3.hover.press])}
+  color: var(--charcoal-text3);
+  transition: 0.2s color;
+
+  &:not(:disabled):not([aria-disabled]),
+  &[aria-disabled='false'] {
+    &:hover {
+      color: var(--charcoal-text3-hover);
+    }
+    &:active {
+      color: var(--charcoal-text3-press);
+    }
+  }
 `
 
 export function ModalTitle(props: React.HTMLAttributes<HTMLHeadingElement>) {

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

@@ -14,13 +14,9 @@ exports[`Storyshots MultiSelect Default 1`] = `
 }
 
 .c1:disabled,
-.c1[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
-.c1:disabled,
-.c1[aria-disabled]:not([aria-disabled=false]) {
+.c1[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
+  cursor: default;
 }
 
 .c4 {
@@ -64,33 +60,31 @@ exports[`Storyshots MultiSelect Default 1`] = `
   margin: 0;
   background-color: var(--charcoal-text3);
   border-radius: 999999px;
-  -webkit-transition: 0.2s background-color;
-  transition: 0.2s background-color;
+  -webkit-transition: 0.2s background-color,0.2s box-shadow;
+  transition: 0.2s background-color,0.2s box-shadow;
 }
 
 .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] {
+.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] {
+.c2[type='checkbox']:checked:active[aria-disabled='false'] {
   background-color: var(--charcoal-brand-press);
 }
 
 .c2[type='checkbox']:hover:not(:disabled):not([aria-disabled]),
-.c2[type='checkbox']:hover[aria-disabled=false] {
+.c2[type='checkbox']:hover[aria-disabled='false'] {
   background-color: var(--charcoal-text3-hover);
 }
 
 .c2[type='checkbox']:active:not(:disabled):not([aria-disabled]),
-.c2[type='checkbox']:active[aria-disabled=false] {
+.c2[type='checkbox']:active[aria-disabled='false'] {
   background-color: var(--charcoal-text3-press);
 }
 
@@ -115,6 +109,8 @@ exports[`Storyshots MultiSelect Default 1`] = `
   height: 24px;
   border-radius: 999999px;
   color: var(--charcoal-text5);
+  -webkit-transition: 0.2s box-shadow;
+  transition: 0.2s box-shadow;
 }
 
 .c0 {
@@ -255,7 +251,263 @@ exports[`Storyshots MultiSelect Default 1`] = `
 </div>
 `;
 
-exports[`Storyshots MultiSelect Playground 1`] = `
+exports[`Storyshots MultiSelect Invalid 1`] = `
+.c1 {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+  cursor: pointer;
+  gap: 4px;
+}
+
+.c1:disabled,
+.c1[aria-disabled]:not([aria-disabled='false']) {
+  opacity: 0.32;
+  cursor: default;
+}
+
+.c4 {
+  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;
+  font-size: 14px;
+  line-height: 22px;
+  display: flow-root;
+  color: var(--charcoal-text2);
+}
+
+.c4::before {
+  display: block;
+  width: 0;
+  height: 0;
+  content: '';
+  margin-top: -4px;
+}
+
+.c4::after {
+  display: block;
+  width: 0;
+  height: 0;
+  content: '';
+  margin-bottom: -4px;
+}
+
+.c2[type='checkbox'] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  display: block;
+  width: 20px;
+  height: 20px;
+  margin: 0;
+  background-color: var(--charcoal-text3);
+  border-radius: 999999px;
+  -webkit-transition: 0.2s background-color,0.2s box-shadow;
+  transition: 0.2s background-color,0.2s box-shadow;
+}
+
+.c2[type='checkbox']:checked {
+  background-color: var(--charcoal-brand);
+}
+
+.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']:hover:not(:disabled):not([aria-disabled]),
+.c2[type='checkbox']:hover[aria-disabled='false'] {
+  background-color: var(--charcoal-text3-hover);
+}
+
+.c2[type='checkbox']:active:not(:disabled):not([aria-disabled]),
+.c2[type='checkbox']:active[aria-disabled='false'] {
+  background-color: var(--charcoal-text3-press);
+}
+
+.c2[type='checkbox']:not(:disabled):not([aria-disabled]),
+.c2[type='checkbox'][aria-disabled='false'] {
+  box-shadow: 0 0 0 4px rgba(255,43,0,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;
+  border-radius: 999999px;
+  color: var(--charcoal-text5);
+  -webkit-transition: 0.2s box-shadow;
+  transition: 0.2s box-shadow;
+}
+
+.c0 {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 8px;
+}
+
+<div
+  data-dark={false}
+>
+  <div
+    aria-label=""
+    className="c0"
+    data-testid="SelectGroup"
+  >
+    <label
+      aria-disabled={false}
+      className="c1"
+    >
+      <input
+        aria-invalid={true}
+        checked={false}
+        className="c2"
+        disabled={false}
+        name="defaultName"
+        onChange={[Function]}
+        type="checkbox"
+        value="選択肢1"
+      />
+      <div
+        aria-hidden={true}
+        className="c3"
+      >
+        <pixiv-icon
+          name="24/Check"
+          unsafe-non-guideline-scale={0.6666666666666666}
+        />
+      </div>
+      <div
+        className="c4"
+      >
+        選択肢
+        1
+      </div>
+    </label>
+    <label
+      aria-disabled={false}
+      className="c1"
+    >
+      <input
+        aria-invalid={true}
+        checked={false}
+        className="c2"
+        disabled={false}
+        name="defaultName"
+        onChange={[Function]}
+        type="checkbox"
+        value="選択肢2"
+      />
+      <div
+        aria-hidden={true}
+        className="c3"
+      >
+        <pixiv-icon
+          name="24/Check"
+          unsafe-non-guideline-scale={0.6666666666666666}
+        />
+      </div>
+      <div
+        className="c4"
+      >
+        選択肢
+        2
+      </div>
+    </label>
+    <label
+      aria-disabled={false}
+      className="c1"
+    >
+      <input
+        aria-invalid={true}
+        checked={false}
+        className="c2"
+        disabled={false}
+        name="defaultName"
+        onChange={[Function]}
+        type="checkbox"
+        value="選択肢3"
+      />
+      <div
+        aria-hidden={true}
+        className="c3"
+      >
+        <pixiv-icon
+          name="24/Check"
+          unsafe-non-guideline-scale={0.6666666666666666}
+        />
+      </div>
+      <div
+        className="c4"
+      >
+        選択肢
+        3
+      </div>
+    </label>
+    <label
+      aria-disabled={false}
+      className="c1"
+    >
+      <input
+        aria-invalid={true}
+        checked={false}
+        className="c2"
+        disabled={false}
+        name="defaultName"
+        onChange={[Function]}
+        type="checkbox"
+        value="選択肢4"
+      />
+      <div
+        aria-hidden={true}
+        className="c3"
+      >
+        <pixiv-icon
+          name="24/Check"
+          unsafe-non-guideline-scale={0.6666666666666666}
+        />
+      </div>
+      <div
+        className="c4"
+      >
+        選択肢
+        4
+      </div>
+    </label>
+  </div>
+</div>
+`;
+
+exports[`Storyshots MultiSelect Overlay 1`] = `
 .c1 {
   display: grid;
   grid-template-columns: auto 1fr;
@@ -269,13 +521,264 @@ exports[`Storyshots MultiSelect Playground 1`] = `
 }
 
 .c1:disabled,
-.c1[aria-disabled]:not([aria-disabled=false]) {
+.c1[aria-disabled]:not([aria-disabled='false']) {
+  opacity: 0.32;
   cursor: default;
 }
 
+.c4 {
+  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;
+  font-size: 14px;
+  line-height: 22px;
+  display: flow-root;
+  color: var(--charcoal-text2);
+}
+
+.c4::before {
+  display: block;
+  width: 0;
+  height: 0;
+  content: '';
+  margin-top: -4px;
+}
+
+.c4::after {
+  display: block;
+  width: 0;
+  height: 0;
+  content: '';
+  margin-bottom: -4px;
+}
+
+.c2[type='checkbox'] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  display: block;
+  width: 20px;
+  height: 20px;
+  margin: 0;
+  background-color: var(--charcoal-text3);
+  border-radius: 999999px;
+  -webkit-transition: 0.2s background-color,0.2s box-shadow;
+  transition: 0.2s background-color,0.2s box-shadow;
+  background-color: var(--charcoal-surface4);
+}
+
+.c2[type='checkbox']:checked {
+  background-color: var(--charcoal-brand);
+}
+
+.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']:hover:not(:disabled):not([aria-disabled]),
+.c2[type='checkbox']:hover[aria-disabled='false'] {
+  background-color: var(--charcoal-text3-hover);
+}
+
+.c2[type='checkbox']:active:not(:disabled):not([aria-disabled]),
+.c2[type='checkbox']:active[aria-disabled='false'] {
+  background-color: var(--charcoal-text3-press);
+}
+
+.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;
+  border-radius: 999999px;
+  color: var(--charcoal-text5);
+  -webkit-transition: 0.2s box-shadow;
+  transition: 0.2s box-shadow;
+  border-color: var(--charcoal-text5);
+  border-width: 2px;
+  border-style: solid;
+}
+
+.c0 {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 8px;
+}
+
+<div
+  data-dark={false}
+>
+  <div
+    aria-label=""
+    className="c0"
+    data-testid="SelectGroup"
+  >
+    <label
+      aria-disabled={false}
+      className="c1"
+    >
+      <input
+        aria-invalid={false}
+        checked={false}
+        className="c2"
+        disabled={false}
+        name="defaultName"
+        onChange={[Function]}
+        type="checkbox"
+        value="選択肢1"
+      />
+      <div
+        aria-hidden={true}
+        className="c3"
+      >
+        <pixiv-icon
+          name="24/Check"
+          unsafe-non-guideline-scale={0.6666666666666666}
+        />
+      </div>
+      <div
+        className="c4"
+      >
+        選択肢
+        1
+      </div>
+    </label>
+    <label
+      aria-disabled={false}
+      className="c1"
+    >
+      <input
+        aria-invalid={false}
+        checked={false}
+        className="c2"
+        disabled={false}
+        name="defaultName"
+        onChange={[Function]}
+        type="checkbox"
+        value="選択肢2"
+      />
+      <div
+        aria-hidden={true}
+        className="c3"
+      >
+        <pixiv-icon
+          name="24/Check"
+          unsafe-non-guideline-scale={0.6666666666666666}
+        />
+      </div>
+      <div
+        className="c4"
+      >
+        選択肢
+        2
+      </div>
+    </label>
+    <label
+      aria-disabled={false}
+      className="c1"
+    >
+      <input
+        aria-invalid={false}
+        checked={false}
+        className="c2"
+        disabled={false}
+        name="defaultName"
+        onChange={[Function]}
+        type="checkbox"
+        value="選択肢3"
+      />
+      <div
+        aria-hidden={true}
+        className="c3"
+      >
+        <pixiv-icon
+          name="24/Check"
+          unsafe-non-guideline-scale={0.6666666666666666}
+        />
+      </div>
+      <div
+        className="c4"
+      >
+        選択肢
+        3
+      </div>
+    </label>
+    <label
+      aria-disabled={false}
+      className="c1"
+    >
+      <input
+        aria-invalid={false}
+        checked={false}
+        className="c2"
+        disabled={false}
+        name="defaultName"
+        onChange={[Function]}
+        type="checkbox"
+        value="選択肢4"
+      />
+      <div
+        aria-hidden={true}
+        className="c3"
+      >
+        <pixiv-icon
+          name="24/Check"
+          unsafe-non-guideline-scale={0.6666666666666666}
+        />
+      </div>
+      <div
+        className="c4"
+      >
+        選択肢
+        4
+      </div>
+    </label>
+  </div>
+</div>
+`;
+
+exports[`Storyshots MultiSelect Playground 1`] = `
+.c1 {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+  cursor: pointer;
+  gap: 4px;
+}
+
 .c1:disabled,
-.c1[aria-disabled]:not([aria-disabled=false]) {
+.c1[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
+  cursor: default;
 }
 
 .c4 {
@@ -319,33 +822,31 @@ exports[`Storyshots MultiSelect Playground 1`] = `
   margin: 0;
   background-color: var(--charcoal-text3);
   border-radius: 999999px;
-  -webkit-transition: 0.2s background-color;
-  transition: 0.2s background-color;
+  -webkit-transition: 0.2s background-color,0.2s box-shadow;
+  transition: 0.2s background-color,0.2s box-shadow;
 }
 
 .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] {
+.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] {
+.c2[type='checkbox']:checked:active[aria-disabled='false'] {
   background-color: var(--charcoal-brand-press);
 }
 
 .c2[type='checkbox']:hover:not(:disabled):not([aria-disabled]),
-.c2[type='checkbox']:hover[aria-disabled=false] {
+.c2[type='checkbox']:hover[aria-disabled='false'] {
   background-color: var(--charcoal-text3-hover);
 }
 
 .c2[type='checkbox']:active:not(:disabled):not([aria-disabled]),
-.c2[type='checkbox']:active[aria-disabled=false] {
+.c2[type='checkbox']:active[aria-disabled='false'] {
   background-color: var(--charcoal-text3-press);
 }
 
@@ -370,6 +871,8 @@ exports[`Storyshots MultiSelect Playground 1`] = `
   height: 24px;
   border-radius: 999999px;
   color: var(--charcoal-text5);
+  -webkit-transition: 0.2s box-shadow;
+  transition: 0.2s box-shadow;
 }
 
 .c0 {