@charcoal-ui/react 3.3.0 → 3.4.0

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

@@ -0,0 +1,533 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Modal Bottom Sheet 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;
+}
+
+.c1 {
+  width: -webkit-min-content;
+  width: -moz-min-content;
+  width: min-content;
+  display: inline-grid;
+  -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;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  white-space: nowrap;
+  color: var(--charcoal-text2);
+  background-color: var(--charcoal-surface3);
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: bold;
+  padding-right: 24px;
+  padding-left: 24px;
+  border-radius: 999999px;
+  -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
+  transition: 0.2s color,0.2s background-color,0.2s box-shadow;
+  height: 40px;
+}
+
+.c1:hover:not(:disabled):not([aria-disabled]),
+.c1:hover[aria-disabled=false] {
+  color: var(--charcoal-text2-hover);
+}
+
+.c1:active:not(:disabled):not([aria-disabled]),
+.c1:active[aria-disabled=false] {
+  color: var(--charcoal-text2-press);
+}
+
+.c1:hover:not(:disabled):not([aria-disabled]),
+.c1:hover[aria-disabled=false] {
+  background-color: var(--charcoal-surface3-hover);
+}
+
+.c1:active:not(:disabled):not([aria-disabled]),
+.c1:active[aria-disabled=false] {
+  background-color: var(--charcoal-surface3-press);
+}
+
+.c1:disabled,
+.c1[aria-disabled]:not([aria-disabled=false]) {
+  opacity: 0.32;
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus,
+.c1[aria-disabled=false]:focus,
+.c1:not(:disabled):not([aria-disabled]):active,
+.c1[aria-disabled=false]:active {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c1[aria-disabled=false]:focus:not(:focus-visible),
+.c1:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
+.c1[aria-disabled=false]:active:not(:focus-visible) {
+  outline: none;
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus-visible,
+.c1[aria-disabled=false]:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+<div
+  data-dark={false}
+>
+  <div
+    aria-hidden={null}
+    data-overlay-container={true}
+  >
+    <button
+      className="c0 c1"
+      disabled={false}
+      onClick={[Function]}
+    >
+      Open Modal
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Modal Default 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;
+}
+
+.c1 {
+  width: -webkit-min-content;
+  width: -moz-min-content;
+  width: min-content;
+  display: inline-grid;
+  -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;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  white-space: nowrap;
+  color: var(--charcoal-text2);
+  background-color: var(--charcoal-surface3);
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: bold;
+  padding-right: 24px;
+  padding-left: 24px;
+  border-radius: 999999px;
+  -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
+  transition: 0.2s color,0.2s background-color,0.2s box-shadow;
+  height: 40px;
+}
+
+.c1:hover:not(:disabled):not([aria-disabled]),
+.c1:hover[aria-disabled=false] {
+  color: var(--charcoal-text2-hover);
+}
+
+.c1:active:not(:disabled):not([aria-disabled]),
+.c1:active[aria-disabled=false] {
+  color: var(--charcoal-text2-press);
+}
+
+.c1:hover:not(:disabled):not([aria-disabled]),
+.c1:hover[aria-disabled=false] {
+  background-color: var(--charcoal-surface3-hover);
+}
+
+.c1:active:not(:disabled):not([aria-disabled]),
+.c1:active[aria-disabled=false] {
+  background-color: var(--charcoal-surface3-press);
+}
+
+.c1:disabled,
+.c1[aria-disabled]:not([aria-disabled=false]) {
+  opacity: 0.32;
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus,
+.c1[aria-disabled=false]:focus,
+.c1:not(:disabled):not([aria-disabled]):active,
+.c1[aria-disabled=false]:active {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c1[aria-disabled=false]:focus:not(:focus-visible),
+.c1:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
+.c1[aria-disabled=false]:active:not(:focus-visible) {
+  outline: none;
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus-visible,
+.c1[aria-disabled=false]:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+<div
+  data-dark={false}
+>
+  <div
+    aria-hidden={null}
+    data-overlay-container={true}
+  >
+    <button
+      className="c0 c1"
+      disabled={false}
+      onClick={[Function]}
+    >
+      Open Modal
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Modal Full Bottom Sheet 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;
+}
+
+.c1 {
+  width: -webkit-min-content;
+  width: -moz-min-content;
+  width: min-content;
+  display: inline-grid;
+  -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;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  white-space: nowrap;
+  color: var(--charcoal-text2);
+  background-color: var(--charcoal-surface3);
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: bold;
+  padding-right: 24px;
+  padding-left: 24px;
+  border-radius: 999999px;
+  -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
+  transition: 0.2s color,0.2s background-color,0.2s box-shadow;
+  height: 40px;
+}
+
+.c1:hover:not(:disabled):not([aria-disabled]),
+.c1:hover[aria-disabled=false] {
+  color: var(--charcoal-text2-hover);
+}
+
+.c1:active:not(:disabled):not([aria-disabled]),
+.c1:active[aria-disabled=false] {
+  color: var(--charcoal-text2-press);
+}
+
+.c1:hover:not(:disabled):not([aria-disabled]),
+.c1:hover[aria-disabled=false] {
+  background-color: var(--charcoal-surface3-hover);
+}
+
+.c1:active:not(:disabled):not([aria-disabled]),
+.c1:active[aria-disabled=false] {
+  background-color: var(--charcoal-surface3-press);
+}
+
+.c1:disabled,
+.c1[aria-disabled]:not([aria-disabled=false]) {
+  opacity: 0.32;
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus,
+.c1[aria-disabled=false]:focus,
+.c1:not(:disabled):not([aria-disabled]):active,
+.c1[aria-disabled=false]:active {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c1[aria-disabled=false]:focus:not(:focus-visible),
+.c1:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
+.c1[aria-disabled=false]:active:not(:focus-visible) {
+  outline: none;
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus-visible,
+.c1[aria-disabled=false]:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+<div
+  data-dark={false}
+>
+  <div
+    aria-hidden={null}
+    data-overlay-container={true}
+  >
+    <button
+      className="c0 c1"
+      disabled={false}
+      onClick={[Function]}
+    >
+      Open Modal
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Modal Internal Scroll 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;
+}
+
+.c1 {
+  width: -webkit-min-content;
+  width: -moz-min-content;
+  width: min-content;
+  display: inline-grid;
+  -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;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  white-space: nowrap;
+  color: var(--charcoal-text2);
+  background-color: var(--charcoal-surface3);
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: bold;
+  padding-right: 24px;
+  padding-left: 24px;
+  border-radius: 999999px;
+  -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
+  transition: 0.2s color,0.2s background-color,0.2s box-shadow;
+  height: 40px;
+}
+
+.c1:hover:not(:disabled):not([aria-disabled]),
+.c1:hover[aria-disabled=false] {
+  color: var(--charcoal-text2-hover);
+}
+
+.c1:active:not(:disabled):not([aria-disabled]),
+.c1:active[aria-disabled=false] {
+  color: var(--charcoal-text2-press);
+}
+
+.c1:hover:not(:disabled):not([aria-disabled]),
+.c1:hover[aria-disabled=false] {
+  background-color: var(--charcoal-surface3-hover);
+}
+
+.c1:active:not(:disabled):not([aria-disabled]),
+.c1:active[aria-disabled=false] {
+  background-color: var(--charcoal-surface3-press);
+}
+
+.c1:disabled,
+.c1[aria-disabled]:not([aria-disabled=false]) {
+  opacity: 0.32;
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus,
+.c1[aria-disabled=false]:focus,
+.c1:not(:disabled):not([aria-disabled]):active,
+.c1[aria-disabled=false]:active {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c1[aria-disabled=false]:focus:not(:focus-visible),
+.c1:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
+.c1[aria-disabled=false]:active:not(:focus-visible) {
+  outline: none;
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus-visible,
+.c1[aria-disabled=false]:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+<div
+  data-dark={false}
+>
+  <div
+    aria-hidden={null}
+    data-overlay-container={true}
+  >
+    <button
+      className="c0 c1"
+      disabled={false}
+      onClick={[Function]}
+    >
+      Open Modal
+    </button>
+  </div>
+</div>
+`;

package/src/components/Modal/__stories__/InternalScrollStory.tsx

@@ -0,0 +1,75 @@
+import { Story } from '../../../_lib/compat'
+import Modal, { BottomSheet, ModalProps } from '..'
+import { OverlayProvider } from '@react-aria/overlays'
+import { useOverlayTriggerState } from 'react-stately'
+import Button from '../../Button'
+import { ModalBody, ModalButtons, ModalHeader } from '../ModalPlumbing'
+import styled, { css } from 'styled-components'
+import { maxWidth } from '@charcoal-ui/utils'
+
+export const InternalScrollStory: 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>
+          <ModalBodyOverflowDiv $offset={56} $bottomSheet={args.bottomSheet}>
+            <div
+              style={{
+                height: 1000,
+                background: `linear-gradient(#e66465, #9198e5)`,
+              }}
+            ></div>
+          </ModalBodyOverflowDiv>
+          <TopBorderButtons>
+            <Button fullWidth onClick={() => state.close()}>
+              Close
+            </Button>
+          </TopBorderButtons>
+        </ModalBody>
+      </Modal>
+    </OverlayProvider>
+  )
+}
+
+// underlay padding-top: 40px (desktop)
+// underlay padding-bottom: 40px (desktop)
+// modal header: 64px (desktop)
+// modal header: 48px (mobile-bottom-sheet)
+// modal padding-bottom: 40px
+// button and space: 56px
+const MAX_HEIGHT_OFFSET = 64 + 40 + 40 + 40
+const MAX_HEIGHT_OFFSET_MOBILE = MAX_HEIGHT_OFFSET - 40 * 2 - 16
+const ModalBodyOverflowDiv = styled.div<{
+  $offset: number
+  $bottomSheet?: BottomSheet
+}>`
+  overflow: auto;
+  max-height: calc(
+    100vh - ${MAX_HEIGHT_OFFSET}px - ${({ $offset }) => $offset}px
+  );
+  ${({ $bottomSheet, $offset }) =>
+    ($bottomSheet === true || $bottomSheet === 'full') &&
+    css`
+      @media ${({ theme }) => maxWidth(theme.breakpoint.screen1)} {
+        max-height: calc(100vh - ${MAX_HEIGHT_OFFSET_MOBILE}px - ${$offset}px);
+      }
+    `}
+`
+
+const TopBorderButtons = styled(ModalButtons)`
+  position: relative;
+  &::before {
+    content: '';
+    pointer-events: none;
+    border-top: 1px solid ${({ theme }) => theme.border.default.color};
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+  }
+`

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

@@ -12,6 +12,8 @@ import {
 import styled from 'styled-components'
 import { theme } from '../../styled'
 import TextField from '../TextField'
+import DropdownSelector from '../DropdownSelector'
+import DropdownMenuItem from '../DropdownSelector/DropdownMenuItem'
 
 export default {
   title: 'Modal',
@@ -43,51 +45,66 @@ const DefaultStory = (args: ModalProps) => {
     // hidden from screen readers when a modal opens.
     <OverlayProvider>
       <Button onClick={() => state.open()}>Open Modal</Button>
-
-      <Modal
+      <M
         {...args}
+        isDismissable
         isOpen={state.isOpen}
         onClose={() => state.close()}
-        isDismissable
-      >
-        <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>
-            <ModalAlign>
-              <TextField
-                showLabel
-                label="Name"
-                placeholder="Nagisa"
-              ></TextField>
-            </ModalAlign>
-            <ModalAlign>
-              <TextField
-                showLabel
-                label="Country"
-                placeholder="Tokyo"
-              ></TextField>
-            </ModalAlign>
-          </ModalVStack>
-          <ModalButtons>
-            <Button variant="Primary" onClick={() => state.close()} fullWidth>
-              Apply
-            </Button>
-            <Button onClick={() => state.close()} fullWidth>
-              Cancel
-            </Button>
-          </ModalButtons>
-        </ModalBody>
-      </Modal>
+      />
     </OverlayProvider>
   )
 }
 
+const M = (props: ModalProps) => {
+  return (
+    <Modal {...props}>
+      <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>
+          <ModalAlign>
+            <TextField showLabel label="Name" placeholder="Nagisa"></TextField>
+          </ModalAlign>
+          <ModalAlign>
+            <TextField
+              autoFocus
+              showLabel
+              label="Country"
+              placeholder="Tokyo"
+            ></TextField>
+          </ModalAlign>
+          <ModalAlign>
+            <DropdownSelector
+              onChange={() => null}
+              value="10"
+              showLabel
+              label="Fruits"
+              placeholder="Apple"
+            >
+              <DropdownMenuItem value={'10'}>Apple</DropdownMenuItem>
+              <DropdownMenuItem value={'20'}>Banana</DropdownMenuItem>
+              <DropdownMenuItem value={'30'}>Orange</DropdownMenuItem>
+            </DropdownSelector>
+          </ModalAlign>
+        </ModalVStack>
+        <ModalButtons>
+          <Button variant="Primary" onClick={() => props.onClose()} fullWidth>
+            Apply
+          </Button>
+          <Button onClick={() => props.onClose()} fullWidth>
+            Cancel
+          </Button>
+        </ModalButtons>
+      </ModalBody>
+    </Modal>
+  )
+}
+
 const ModalVStack = styled.div`
   display: grid;
   gap: 24px;
@@ -192,3 +209,5 @@ const BottomSheetStory = (args: ModalProps) => {
 }
 
 export const BottomSheet: Story<ModalProps> = BottomSheetStory.bind({})
+
+export { InternalScrollStory as InternalScroll } from './__stories__/InternalScrollStory'