docs(modal): introduce title-only modal examples (#4703)

Refs #4607.
carbon-design-system · Nov 21, 2019 · 62e9186 · 62e9186
1 parent 6a0cfea
commit 62e9186
Show file tree

Hide file tree

Showing 4 changed files with 148 additions and 7 deletions.
diff --git a/packages/components/src/components/modal/modal.config.js b/packages/components/src/components/modal/modal.config.js
@@ -12,6 +12,7 @@ const { prefix } = require('../../globals/js/settings');
 module.exports = {
   context: {
     prefix,
+    hasBody: true,
   },
   variants: [
     {
@@ -120,6 +121,62 @@ module.exports = {
         size: 'lg',
       },
     },
+    {
+      name: 'titleonly-xs',
+      label: 'Title Only Modal (XS)',
+      context: {
+        idSuffix: Math.random()
+          .toString(36)
+          .substr(2),
+        hasBody: false,
+        hasFooter: true,
+        classPrimaryButton: `${prefix}--btn--primary`,
+        classCloseButton: `${prefix}--btn--secondary`,
+        size: 'xs',
+      },
+    },
+    {
+      name: 'titleonly-sm',
+      label: 'Title Only Modal (Small)',
+      context: {
+        idSuffix: Math.random()
+          .toString(36)
+          .substr(2),
+        hasBody: false,
+        hasFooter: true,
+        classPrimaryButton: `${prefix}--btn--primary`,
+        classCloseButton: `${prefix}--btn--secondary`,
+        size: 'sm',
+      },
+    },
+    {
+      name: 'titleonly-nofooter-xs',
+      label: 'Title Only Passive Modal (XS)',
+      context: {
+        idSuffix: Math.random()
+          .toString(36)
+          .substr(2),
+        hasBody: false,
+        hasFooter: false,
+        classPrimaryButton: `${prefix}--btn--primary`,
+        classCloseButton: `${prefix}--btn--secondary`,
+        size: 'xs',
+      },
+    },
+    {
+      name: 'titleonly-nofooter-sm',
+      label: 'Title Only Passive Modal (Small)',
+      context: {
+        idSuffix: Math.random()
+          .toString(36)
+          .substr(2),
+        hasBody: false,
+        hasFooter: false,
+        classPrimaryButton: `${prefix}--btn--primary`,
+        classCloseButton: `${prefix}--btn--secondary`,
+        size: 'sm',
+      },
+    },
     {
       name: 'danger',
       label: 'Danger Modal',

diff --git a/packages/components/src/components/modal/modal.hbs b/packages/components/src/components/modal/modal.hbs
@@ -13,7 +13,7 @@
   <div class="{{@root.prefix}}--modal-container{{#if size}} {{@root.prefix}}--modal-container--{{size}}{{/if}}">
     <div class="{{@root.prefix}}--modal-header">
       <p class="{{@root.prefix}}--modal-header__label {{@root.prefix}}--type-delta" id="modal-{{idSuffix}}-label">Optional label</p>
-      <p class="{{@root.prefix}}--modal-header__heading {{@root.prefix}}--type-beta" id="modal-{{idSuffix}}-heading">Modal heading</p>
+      <p class="{{@root.prefix}}--modal-header__heading {{@root.prefix}}--type-beta" id="modal-{{idSuffix}}-heading">{{#if hasBody}}Modal heading{{else}}Passive modal title as the message. Should be direct and 3 lines or less.{{/if}}</p>
       <button class="{{@root.prefix}}--modal-close" type="button" data-modal-close aria-label="close modal" {{#unless hasFooter}} data-modal-primary-focus{{/unless}}>
         {{ carbon-icon 'Close16' class=(add @root.prefix '--modal-close__icon') }}
       </button>
@@ -28,7 +28,7 @@
         <input id="text-input-{{idSuffix}}" type="text" class="{{@root.prefix}}--text-input" placeholder="Optional placeholder text"
           data-modal-primary-focus>
       </div>
-      {{else}}
+      {{else if hasBody}}
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus consequat augue
         vitae
         tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum risus. Nulla

diff --git a/packages/react/src/components/ComposedModal/ComposedModal-story.js b/packages/react/src/components/ComposedModal/ComposedModal-story.js
@@ -27,19 +27,26 @@ const sizes = {
 };
 
 const props = {
-  composedModal: (includeOpen = true) => ({
-    open: includeOpen ? boolean('Open (open in <ComposedModal>)', true) : null,
+  composedModal: ({ titleOnly } = {}) => ({
+    open: boolean('Open (open in <ComposedModal>)', true),
     onKeyDown: action('onKeyDown'),
     danger: boolean('Danger mode (danger)', false),
     selectorPrimaryFocus: text(
       'Primary focus element selector (selectorPrimaryFocus)',
       '[data-modal-primary-focus]'
     ),
-    size: select('Size (size)', sizes),
+    size: select('Size (size)', sizes, titleOnly ? 'sm' : ''),
   }),
-  modalHeader: () => ({
+  modalHeader: ({ titleOnly } = {}) => ({
     label: text('Optional Label (label in <ModalHeader>)', 'Optional Label'),
-    title: text('Optional title (title in <ModalHeader>)', 'Example'),
+    title: text(
+      'Optional title (title in <ModalHeader>)',
+      titleOnly
+        ? `
+      Passive modal title as the message. Should be direct and 3 lines or less.
+    `.trim()
+        : 'Example'
+    ),
     iconDescription: text(
       'Close icon description (iconDescription in <ModalHeader>)',
       'Close'
@@ -191,6 +198,27 @@ storiesOf('ComposedModal', module)
       },
     }
   )
+  .add(
+    'Title only',
+    () => {
+      const { size, ...rest } = props.composedModal({ titleOnly: true });
+      return (
+        <ComposedModal {...rest} size={size || undefined}>
+          <ModalHeader {...props.modalHeader({ titleOnly: true })} />
+          <ModalBody />
+          <ModalFooter {...props.modalFooter()} />
+        </ComposedModal>
+      );
+    },
+    {
+      info: {
+        text: `
+          In "small" and "xs" modals size, the title is allowed to span multiple lines and be used for the main message.
+          It should be less than 3 lines of text. If more room is required then use the standard body copy format.
+        `,
+      },
+    }
+  )
   .add(
     'Example usage with trigger button',
     () => {

diff --git a/packages/react/src/components/Modal/Modal-story.js b/packages/react/src/components/Modal/Modal-story.js
@@ -68,6 +68,43 @@ const props = () => ({
   onSecondarySubmit: action('onSecondarySubmit'),
 });
 
+const titleOnlyProps = () => {
+  const passiveModal = boolean('Without footer (passiveModal)', false);
+  return {
+    className: 'some-class',
+    open: boolean('Open (open)', true),
+    passiveModal,
+    danger: !passiveModal && boolean('Danger mode (danger)', false),
+    modalHeading: text(
+      'Modal heading (modalHeading)',
+      `
+      Passive modal title as the message. Should be direct and 3 lines or less.
+    `.trim()
+    ),
+    modalAriaLabel: text(
+      'ARIA label, used only if modalLabel not provided (modalAriaLabel)',
+      'A label to be read by screen readers on the modal root node'
+    ),
+    primaryButtonText: text(
+      'Primary button text (primaryButtonText)',
+      'Primary Button'
+    ),
+    secondaryButtonText: text(
+      'Secondary button text (secondaryButtonText)',
+      'Secondary Button'
+    ),
+    size: select('Size (size)', sizes, 'sm'),
+    iconDescription: text(
+      'Close icon description (iconDescription)',
+      'Close the modal'
+    ),
+    onBlur: action('onBlur'),
+    onClick: action('onClick'),
+    onFocus: action('onFocus'),
+    onRequestClose: action('onRequestClose'),
+  };
+};
+
 storiesOf('Modal', module)
   .addDecorator(withKnobs)
   .add(
@@ -153,6 +190,25 @@ storiesOf('Modal', module)
       },
     }
   )
+  .add(
+    'Title only',
+    () => {
+      const { size, ...rest } = titleOnlyProps();
+      return (
+        <>
+          <Modal {...rest} size={size || undefined}></Modal>
+        </>
+      );
+    },
+    {
+      info: {
+        text: `
+          In "small" and "xs" modals size, the title is allowed to span multiple lines and be used for the main message.
+          It should be less than 3 lines of text. If more room is required then use the standard body copy format.
+        `,
+      },
+    }
+  )
   .add(
     'Trap Focus',
     () => {