From b087c4ee738d2c3cd5377f52ce07d84232eecdf8 Mon Sep 17 00:00:00 2001 From: Lyza Danger Gardner Date: Tue, 10 Aug 2021 12:03:37 -0400 Subject: [PATCH 1/4] Extract some HTML-filler JSX into a separate `samples` module Keep this markup from cluttering pattern page modules and make it reusable. --- .../components/patterns/samples.js | 167 ++++++++++++++++++ 1 file changed, 167 insertions(+) create mode 100644 src/pattern-library/components/patterns/samples.js diff --git a/src/pattern-library/components/patterns/samples.js b/src/pattern-library/components/patterns/samples.js new file mode 100644 index 00000000..d5c861a4 --- /dev/null +++ b/src/pattern-library/components/patterns/samples.js @@ -0,0 +1,167 @@ +/** + * Fixture-like "sample" HTML-cased components for filling out pattern and + * component examples. + */ + +/** + *
  • elements for examples. The international NATO phonetic (radio) alphabet. + */ +export function SampleListElements() { + return ( + <> +
  • Alpha
    • +
  • Bravo
    • +
  • Charlie
    • +
  • Delta
    • +
  • Echo
    • +
  • Foxtrot
    • +
  • Golf
    • +
  • Hotel
    • +
  • India
    • +
  • Juliett
    • +
  • Kilo
    • +
  • Lima
    • +
  • Mike
    • +
  • November
    • +
  • Oscar
    • +
  • Papa
    • +
  • Quebec
    • +
  • Romeo
    • +
  • Sierra
    • +
  • Tango
    • +
  • Uniform
    • +
  • Victor
    • +
  • Whiskey
    • +
  • XRay
    • +
  • Yankee
    • +
  • Zulu
    • + + ); +} + +export function SampleTBody() { + return ( + + + Alphanumeric Balloons + Champagne Delusions + + + Elephantine Fry-ups + Gargantuan Hiccups + + + Illicit Jugglers + Katydid Lozenges Meringue + + + Alphanumeric Balloons + Champagne Delusions + + + Elephantine Fry-ups + Gargantuan Hiccups + + + Illicit Jugglers + Katydid Lozenges Moebius + + + Elephantine Fry-ups + Gargantuan Hiccups + + + Illicit Jugglers + Katydid Lozenges Meringue + + + Alphanumeric Balloons + Champagne Delusions + + + ); +} + +/** + * Provide Lorem Ipsum text. + * + * TODO: This can be extended to return different lengths of lorem. + */ +export function LoremIpsum() { + return ( +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a sapien + cursus, fringilla diam posuere, varius urna. Phasellus dictum sodales dui, + sed scelerisque mauris auctor et. Integer suscipit justo in erat + tristique, nec feugiat augue ultrices. Sed accumsan pretium commodo. Orci + varius natoque penatibus et magnis dis parturient montes, nascetur + ridiculus mus. Ut lobortis tortor metus, sed rutrum risus ultricies non. + Maecenas ultricies rutrum diam non feugiat. Nam ut ex ac enim efficitur + semper. Integer sed rhoncus eros. Nulla pharetra vulputate faucibus. + Vestibulum vestibulum orci non maximus aliquet. Donec id dui ac ipsum + pellentesque gravida sit amet non sem. Suspendisse malesuada turpis id + erat porta, nec luctus odio mollis. Sed a arcu sed sem venenatis porta. In + dictum sapien ut congue facilisis. Curabitur consequat vestibulum + ultricies. Vivamus rhoncus vitae sapien id volutpat. Fusce ac nisi dolor. + Suspendisse ut venenatis ex. Quisque elementum libero quam, non + consectetur lorem faucibus a. Sed eu orci vitae nibh sodales sodales ut at + neque. Ut lobortis arcu eu lorem porttitor scelerisque. Aenean euismod est + ac enim fermentum, sit amet tristique dui consequat. Phasellus vitae + sapien dolor. Nulla iaculis nibh at magna convallis finibus ut vitae + ipsum. Maecenas ultricies ultrices diam laoreet lacinia. Nunc commodo eu + lorem a bibendum. Sed eu magna rutrum, consectetur orci sit amet, + venenatis ex. Aliquam sodales nec odio ac ultricies. In sit amet congue + ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, + per inceptos himenaeos. Phasellus accumsan justo nec maximus sollicitudin. + Aenean eu urna egestas justo dignissim venenatis quis quis massa. + Pellentesque convallis posuere elit, eu interdum diam placerat et. Aenean + cursus vehicula nibh, in scelerisque nunc feugiat eu. Praesent eleifend + ipsum eget urna dictum semper. Nullam dapibus nisl sit amet ultricies + lobortis. Vestibulum a velit neque. Suspendisse tincidunt aliquet lorem et + consectetur. Phasellus at libero fringilla nulla egestas aliquam. Nullam + ut magna risus. Etiam consequat neque sapien, vel ultrices justo vehicula + sit amet. Donec semper facilisis odio vel faucibus. Integer eget sagittis + justo. Integer sed tincidunt neque. In vulputate fermentum lacus, eget + sollicitudin nisi vestibulum vel. Etiam porttitor varius justo, id + efficitur tellus congue a. Cras condimentum congue lectus sit amet + commodo. Etiam lacus ex, efficitur volutpat enim id, malesuada posuere + metus. Mauris convallis convallis arcu, sit amet placerat felis sodales + ut. Duis semper a risus ac consequat. Nulla id nibh sem. Aliquam et nulla + nec lectus viverra lobortis. Vivamus eros enim, lobortis nec efficitur + nec, rhoncus at tortor. Aliquam aliquet bibendum ipsum eu feugiat. Duis + iaculis bibendum ligula non ultricies. Curabitur cursus nulla in nisl + tincidunt, eget eleifend tellus ultricies. Pellentesque eget mauris nec + magna ultrices fringilla id sit amet nulla. Ut nec velit sed augue + eleifend pharetra. Aliquam a posuere massa. Nunc vitae tortor ut est + cursus vestibulum. In hac habitasse platea dictumst. Nulla eget orci + eleifend, elementum turpis vitae, consectetur magna. In in nulla in tellus + vestibulum pharetra. Curabitur at rhoncus enim, tempus congue est. Nullam + consectetur lobortis nunc, vel feugiat lorem semper a. Ut tellus nulla, + tempus id posuere vel, luctus et sem. Nulla nec rhoncus mi. Aenean sit + amet mollis nibh. Nam ullamcorper tellus quis arcu aliquam, dignissim + ultricies justo efficitur. Cras non ipsum tempor, elementum dui id, + pellentesque turpis. Praesent commodo dolor in elit aliquet, sit amet + pellentesque sem molestie. In pharetra nisl nec orci pellentesque, ut + posuere quam faucibus. Class aptent taciti sociosqu ad litora torquent per + conubia nostra, per inceptos himenaeos. Maecenas mollis purus non erat + tempor euismod. Vestibulum non leo eget magna vestibulum mattis. Aenean + vitae tortor vel mauris pretium tempor. Sed viverra eros tristique, + dapibus tellus a, feugiat ipsum. Pellentesque non tellus scelerisque, + molestie massa vitae, fermentum ex. Quisque molestie interdum nibh a + luctus. Sed aliquet risus ac varius suscipit. Proin eget leo vel lacus + finibus posuere vel non nisl. In tristique ligula leo, sed molestie sem + sodales nec. Phasellus sed consectetur lectus. In pretium hendrerit eros, + a sagittis est faucibus ac. Etiam faucibus felis et eros commodo + fringilla. Duis volutpat lobortis suscipit. Maecenas facilisis metus in + lorem aliquet efficitur. Duis scelerisque eros scelerisque, rhoncus massa + eget, tempor ipsum. Donec id feugiat purus, non condimentum turpis. Sed + consequat lorem a odio pharetra pretium. Proin sed turpis ac sapien + convallis iaculis a sit amet est. Proin lorem risus, rhoncus non metus at, + fringilla commodo erat. Sed quis elit vitae leo ullamcorper interdum non + nec ipsum. Etiam ullamcorper lorem ac velit condimentum, eget porttitor + odio mollis. Maecenas semper, urna eu cursus placerat, enim neque aliquam + orci, ut elementum justo ex id justo. Nunc malesuada egestas dui at + vestibulum. +

    + ); +} From d5041025b458d40b59c826fdcee064c6e13cefcd Mon Sep 17 00:00:00 2001 From: Lyza Danger Gardner Date: Tue, 10 Aug 2021 12:03:58 -0400 Subject: [PATCH 2/4] Use `sample` components to simplify things --- .../components/patterns/ContainerPatterns.js | 37 ++------------ .../components/patterns/TablePatterns.js | 50 ++----------------- 2 files changed, 7 insertions(+), 80 deletions(-) diff --git a/src/pattern-library/components/patterns/ContainerPatterns.js b/src/pattern-library/components/patterns/ContainerPatterns.js index a156f525..0351ee61 100644 --- a/src/pattern-library/components/patterns/ContainerPatterns.js +++ b/src/pattern-library/components/patterns/ContainerPatterns.js @@ -4,38 +4,7 @@ import Library from '../Library'; import { IconButton, LabeledButton } from '../../../'; -function ListElements() { - return ( - <> -
  • Alpha
    • -
  • Bravo
    • -
  • Charlie
    • -
  • Delta
    • -
  • Echo
    • -
  • Foxtrot
    • -
  • Golf
    • -
  • Hotel
    • -
  • India
    • -
  • Juliett
    • -
  • Kilo
    • -
  • Lima
    • -
  • Mike
    • -
  • November
    • -
  • Oscar
    • -
  • Papa
    • -
  • Quebec
    • -
  • Romeo
    • -
  • Sierra
    • -
  • Tango
    • -
  • Uniform
    • -
  • Victor
    • -
  • Whiskey
    • -
  • XRay
    • -
  • Yankee
    • -
  • Zulu
    • - - ); -} +import { SampleListElements } from './samples'; export default function ContainerPatterns() { const [showModalExample, setShowModalExample] = useState(false); @@ -267,7 +236,7 @@ export default function ContainerPatterns() {
      - +
    @@ -293,7 +262,7 @@ export default function ContainerPatterns() { diff --git a/src/pattern-library/components/patterns/TablePatterns.js b/src/pattern-library/components/patterns/TablePatterns.js index 7cb62c2b..362d4d55 100644 --- a/src/pattern-library/components/patterns/TablePatterns.js +++ b/src/pattern-library/components/patterns/TablePatterns.js @@ -1,48 +1,6 @@ import Library from '../Library'; -// "Fixture" for example table contents -function ExampleTBody() { - return ( - - - Alphanumeric Balloons - Champagne Delusions - - - Elephantine Fry-ups - Gargantuan Hiccups - - - Illicit Jugglers - Katydid Lozenges Meringue - - - Alphanumeric Balloons - Champagne Delusions - - - Elephantine Fry-ups - Gargantuan Hiccups - - - Illicit Jugglers - Katydid Lozenges Moebius - - - Elephantine Fry-ups - Gargantuan Hiccups - - - Illicit Jugglers - Katydid Lozenges Meringue - - - Alphanumeric Balloons - Champagne Delusions - - - ); -} +import { SampleTBody } from './samples'; export default function TablePatterns() { return ( @@ -70,7 +28,7 @@ export default function TablePatterns() { Column B - + @@ -92,7 +50,7 @@ export default function TablePatterns() { - + @@ -114,7 +72,7 @@ export default function TablePatterns() { Column B - + From fa2ed459e3cae8abce555917f9093b86d03ae269 Mon Sep 17 00:00:00 2001 From: Lyza Danger Gardner Date: Tue, 10 Aug 2021 12:04:23 -0400 Subject: [PATCH 3/4] Refactor Dialog Components examples Fixes #148 --- .../components/patterns/DialogComponents.js | 434 ++++++------------ 1 file changed, 148 insertions(+), 286 deletions(-) diff --git a/src/pattern-library/components/patterns/DialogComponents.js b/src/pattern-library/components/patterns/DialogComponents.js index 69343988..b89652f4 100644 --- a/src/pattern-library/components/patterns/DialogComponents.js +++ b/src/pattern-library/components/patterns/DialogComponents.js @@ -1,4 +1,4 @@ -import { createRef, render } from 'preact'; +import { createRef } from 'preact'; import { useState } from 'preact/hooks'; import { ConfirmModal, @@ -12,263 +12,163 @@ import { import Library from '../Library'; -/** - * Render a Dialog or Modal within the `container`, and invoke - * `setOpen` as needed to alert caller to state changes. Provides the - * ability to open and close a Dialog demo. We don't want to render a Dialog - * until it's opened because it will grab focus when it first mounts. - * - * @param {Object} options - * @param {import('preact').FunctionComponent} options.DialogComponent - Which Dialog - * or Dialog-wrapping component (function) to use; - * a reference to `Dialog`, `Modal`, `ConfirmModal`, e.g. - * @param {HTMLElement} options.container - Element to render the Dialog inside of - * @param {(isOpen: boolean) => void} options.setOpen - callback to call when - * the Dialog state changes: opened (true) or closed/removed (false) - * @param {Object} [options.props] - Extra prop(s) for Dialog component - */ -const showDialog = ({ DialogComponent, container, setOpen, props }) => { - const initialFocusRef = createRef(); +import { LoremIpsum } from './samples'; - const close = message => { - if (message) { - alert(message); - } - if (container) { - render(null, container); - } - setOpen(false); - }; +function DialogExample() { + const [dialogOpen, setDialogOpen] = useState(false); + const focusRef = createRef(); - if (!container) { - return null; - } + const buttons = [ + alert('You chose maybe')}> + Maybe + , + alert('You chose yep')} + variant="primary" + > + Do it! + , + ]; - if (!props.children) { - props.children = ( - <> -

    This is an example of a dialog.

    + if (!dialogOpen) { + return ( + setDialogOpen(!dialogOpen)} + variant="primary" + > + Show Dialog Example + + ); + } else { + return ( + setDialogOpen(false)} + title="This is a Dialog" + >

    - This dialog contains an input which is focused when the - dialog is opened. + This is a Dialog, with initial focus on a{' '} + TextInputWithButton component input.

    - - + + + + +     ); } +} - return render( - close()} - {...props} - />, - container - ); -}; - -export default function DialogComponents() { - // Dialog/Modal state for each of the examples - - // Basic Dialog example - const [dialogIsOpen, setDialogIsOpen] = useState(false); - // Basic Modal example - const [, setModalIsOpen] = useState(false); - // Modal with manual focus control - const [, setFocusModalIsOpen] = useState(false); - // Modal with overflowing content example - const [, setLongModalIsOpen] = useState(false); - // ConfirmModal example - const [, setConfirmModalIsOpen] = useState(false); +function ModalExample() { + const [dialogOpen, setDialogOpen] = useState(false); + const focusRef = createRef(); - // Extra buttons to use in Dialog, Modal examples const buttons = [ - alert('You chose maybe')}> - Maybe - , alert('You chose yep')} + onClick={() => alert('You chose Save')} variant="primary" > - Do it! + Save , ]; - const openDialog = () => { - setDialogIsOpen(true); - showDialog({ - DialogComponent: Dialog, - container: /** @type {HTMLElement} */ (document.getElementById( - 'dialog1' - )), - setOpen: setDialogIsOpen, - props: { - buttons, - }, - }); - }; + if (!dialogOpen) { + return ( + setDialogOpen(!dialogOpen)} + variant="primary" + > + Show Modal Example + + ); + } else { + return ( + setDialogOpen(false)} + title="Sample Modal" + > +

    + This is a Modal, with initial focus on a{' '} + TextInputWithButton component input. +

    + + + + +     + ); + } +} + +function LongModalExample() { + const [dialogOpen, setDialogOpen] = useState(false); - const openModal = () => { - setModalIsOpen(true); - showDialog({ - DialogComponent: Modal, - container: /** @type {HTMLElement} */ (document.getElementById('modal1')), - setOpen: setModalIsOpen, - props: { - buttons, - }, - }); - }; + const buttons = [ + alert('You chose Save')} + variant="primary" + > + Save + , + ]; - const openFocusModal = () => { - const inputRef = createRef(); - const children = ( - <> -
    - The input here is manually focused after the Modal is - opened. + if (!dialogOpen) { + return ( + setDialogOpen(!dialogOpen)} + variant="primary" + > + Show Long Modal + + ); + } else { + return ( + setDialogOpen(false)} + title="Modal with overflowing content" + > +
    +
    - - - - - +     ); - setFocusModalIsOpen(true); - showDialog({ - DialogComponent: Modal, - container: /** @type {HTMLElement} */ (document.getElementById( - 'modalFocus' - )), - setOpen: setFocusModalIsOpen, - props: { - buttons, - children, - initialFocus: null, - }, - }); - // This is possible because the Dialog has not grabbed focus - inputRef.current.focus(); - }; + } +} - const openLongModal = () => { - const children = ( -
    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a sapien - cursus, fringilla diam posuere, varius urna. Phasellus dictum sodales - dui, sed scelerisque mauris auctor et. Integer suscipit justo in erat - tristique, nec feugiat augue ultrices. Sed accumsan pretium commodo. - Orci varius natoque penatibus et magnis dis parturient montes, - nascetur ridiculus mus. Ut lobortis tortor metus, sed rutrum risus - ultricies non. Maecenas ultricies rutrum diam non feugiat. Nam ut ex - ac enim efficitur semper. Integer sed rhoncus eros. Nulla pharetra - vulputate faucibus. Vestibulum vestibulum orci non maximus aliquet. - Donec id dui ac ipsum pellentesque gravida sit amet non sem. - Suspendisse malesuada turpis id erat porta, nec luctus odio mollis. - Sed a arcu sed sem venenatis porta. In dictum sapien ut congue - facilisis. Curabitur consequat vestibulum ultricies. Vivamus rhoncus - vitae sapien id volutpat. Fusce ac nisi dolor. Suspendisse ut - venenatis ex. Quisque elementum libero quam, non consectetur lorem - faucibus a. Sed eu orci vitae nibh sodales sodales ut at neque. Ut - lobortis arcu eu lorem porttitor scelerisque. Aenean euismod est ac - enim fermentum, sit amet tristique dui consequat. Phasellus vitae - sapien dolor. Nulla iaculis nibh at magna convallis finibus ut vitae - ipsum. Maecenas ultricies ultrices diam laoreet lacinia. Nunc commodo - eu lorem a bibendum. Sed eu magna rutrum, consectetur orci sit amet, - venenatis ex. Aliquam sodales nec odio ac ultricies. In sit amet - congue ipsum. Class aptent taciti sociosqu ad litora torquent per - conubia nostra, per inceptos himenaeos. Phasellus accumsan justo nec - maximus sollicitudin. Aenean eu urna egestas justo dignissim venenatis - quis quis massa. Pellentesque convallis posuere elit, eu interdum diam - placerat et. Aenean cursus vehicula nibh, in scelerisque nunc feugiat - eu. Praesent eleifend ipsum eget urna dictum semper. Nullam dapibus - nisl sit amet ultricies lobortis. Vestibulum a velit neque. - Suspendisse tincidunt aliquet lorem et consectetur. Phasellus at - libero fringilla nulla egestas aliquam. Nullam ut magna risus. Etiam - consequat neque sapien, vel ultrices justo vehicula sit amet. Donec - semper facilisis odio vel faucibus. Integer eget sagittis justo. - Integer sed tincidunt neque. In vulputate fermentum lacus, eget - sollicitudin nisi vestibulum vel. Etiam porttitor varius justo, id - efficitur tellus congue a. Cras condimentum congue lectus sit amet - commodo. Etiam lacus ex, efficitur volutpat enim id, malesuada posuere - metus. Mauris convallis convallis arcu, sit amet placerat felis - sodales ut. Duis semper a risus ac consequat. Nulla id nibh sem. - Aliquam et nulla nec lectus viverra lobortis. Vivamus eros enim, - lobortis nec efficitur nec, rhoncus at tortor. Aliquam aliquet - bibendum ipsum eu feugiat. Duis iaculis bibendum ligula non ultricies. - Curabitur cursus nulla in nisl tincidunt, eget eleifend tellus - ultricies. Pellentesque eget mauris nec magna ultrices fringilla id - sit amet nulla. Ut nec velit sed augue eleifend pharetra. Aliquam a - posuere massa. Nunc vitae tortor ut est cursus vestibulum. In hac - habitasse platea dictumst. Nulla eget orci eleifend, elementum turpis - vitae, consectetur magna. In in nulla in tellus vestibulum pharetra. - Curabitur at rhoncus enim, tempus congue est. Nullam consectetur - lobortis nunc, vel feugiat lorem semper a. Ut tellus nulla, tempus id - posuere vel, luctus et sem. Nulla nec rhoncus mi. Aenean sit amet - mollis nibh. Nam ullamcorper tellus quis arcu aliquam, dignissim - ultricies justo efficitur. Cras non ipsum tempor, elementum dui id, - pellentesque turpis. Praesent commodo dolor in elit aliquet, sit amet - pellentesque sem molestie. In pharetra nisl nec orci pellentesque, ut - posuere quam faucibus. Class aptent taciti sociosqu ad litora torquent - per conubia nostra, per inceptos himenaeos. Maecenas mollis purus non - erat tempor euismod. Vestibulum non leo eget magna vestibulum mattis. - Aenean vitae tortor vel mauris pretium tempor. Sed viverra eros - tristique, dapibus tellus a, feugiat ipsum. Pellentesque non tellus - scelerisque, molestie massa vitae, fermentum ex. Quisque molestie - interdum nibh a luctus. Sed aliquet risus ac varius suscipit. Proin - eget leo vel lacus finibus posuere vel non nisl. In tristique ligula - leo, sed molestie sem sodales nec. Phasellus sed consectetur lectus. - In pretium hendrerit eros, a sagittis est faucibus ac. Etiam faucibus - felis et eros commodo fringilla. Duis volutpat lobortis suscipit. - Maecenas facilisis metus in lorem aliquet efficitur. Duis scelerisque - eros scelerisque, rhoncus massa eget, tempor ipsum. Donec id feugiat - purus, non condimentum turpis. Sed consequat lorem a odio pharetra - pretium. Proin sed turpis ac sapien convallis iaculis a sit amet est. - Proin lorem risus, rhoncus non metus at, fringilla commodo erat. Sed - quis elit vitae leo ullamcorper interdum non nec ipsum. Etiam - ullamcorper lorem ac velit condimentum, eget porttitor odio mollis. - Maecenas semper, urna eu cursus placerat, enim neque aliquam orci, ut - elementum justo ex id justo. Nunc malesuada egestas dui at vestibulum. -

    -
    +function ConfirmModalExample() { + const [dialogOpen, setDialogOpen] = useState(false); + + if (!dialogOpen) { + return ( + setDialogOpen(!dialogOpen)} + variant="primary" + > + Show ConfirmModal Example + ); - setLongModalIsOpen(true); - showDialog({ - DialogComponent: Modal, - container: /** @type {HTMLElement} */ (document.getElementById('modal2')), - setOpen: setLongModalIsOpen, - props: { - title: 'Long Modal', - buttons, - children, - }, - }); - }; + } else { + return ( + setDialogOpen(false)} + onConfirm={() => alert('ok')} + title="Confirm this" + /> + ); + } +} - const openConfirmModal = () => { - setConfirmModalIsOpen(true); - showDialog({ - DialogComponent: ConfirmModal, - container: /** @type {HTMLElement} */ (document.getElementById( - 'confirm-modal1' - )), - setOpen: setConfirmModalIsOpen, - props: { - confirmAction: 'Sure thing', - message: 'Confirm modal content goes right here.', - title: 'Confirm Modal Example', - onConfirm: () => alert('ok'), - }, - }); - }; +export default function DialogComponents() { return ( @@ -281,6 +181,9 @@ export default function DialogComponents() { a Panel for presenting panel-styled content that does not require grabbing focus.

    +

    + Dialogs are styled using the panel pattern. +

    This example shows a dismiss-able Dialog with an @@ -290,18 +193,16 @@ export default function DialogComponents() { input element.

    - Dialogs are styled using the panel{' '} - pattern. + In some cases, you might need finer control over which element is + focused when the Dialog or Modal is + opened. This might arise if you have nested components within a{' '} + Modal or Dialog, or there is complex logic + about focus. Setting the initialFocus prop to{' '} + null will opt out of automatic focus handling.

    + -
    -
    - {!dialogIsOpen && ( - - Open dialog - - )} -
    + @@ -317,36 +218,7 @@ export default function DialogComponents() { or clicking anywhere outside of it.

    -
    -
    - - Open modal - -
    - - - - -

    - In some cases, you might need more manual control of focus routing. - This might arise if you have nested components within a{' '} - Modal or Dialog, or there is complex logic - about focus. Setting the initialFocus prop to{' '} - null will opt out of automatic focus handling. -

    -

    - In this example, automatic focus is disabled. When the{' '} - Modal is opened, a contained TextInput{' '} - component is manually set to focused. -

    - - -
    -
    - - Open modal - -
    + @@ -363,12 +235,7 @@ export default function DialogComponents() { Modal.

    -
    -
    - - Open long modal - -
    + @@ -391,12 +258,7 @@ export default function DialogComponents() { modal.

    -
    -
    - - Open confirm modal - -
    + From 99f304ce8a8ee113fd1ab8f24f97fb22aea9280c Mon Sep 17 00:00:00 2001 From: Lyza Danger Gardner Date: Wed, 11 Aug 2021 08:49:56 -0400 Subject: [PATCH 4/4] Rename SampleTBody => SampleTableBody --- src/pattern-library/components/patterns/TablePatterns.js | 8 ++++---- src/pattern-library/components/patterns/samples.js | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/pattern-library/components/patterns/TablePatterns.js b/src/pattern-library/components/patterns/TablePatterns.js index 362d4d55..a36f7520 100644 --- a/src/pattern-library/components/patterns/TablePatterns.js +++ b/src/pattern-library/components/patterns/TablePatterns.js @@ -1,6 +1,6 @@ import Library from '../Library'; -import { SampleTBody } from './samples'; +import { SampleTableBody } from './samples'; export default function TablePatterns() { return ( @@ -28,7 +28,7 @@ export default function TablePatterns() { Column B - + @@ -50,7 +50,7 @@ export default function TablePatterns() { - + @@ -72,7 +72,7 @@ export default function TablePatterns() { Column B - +
    diff --git a/src/pattern-library/components/patterns/samples.js b/src/pattern-library/components/patterns/samples.js index d5c861a4..481f9791 100644 --- a/src/pattern-library/components/patterns/samples.js +++ b/src/pattern-library/components/patterns/samples.js @@ -39,7 +39,7 @@ export function SampleListElements() { ); } -export function SampleTBody() { +export function SampleTableBody() { return (