Merge branch 'master' into button-fixes

carbon-design-system · Oct 12, 2020 · 5bacdf4 · 5bacdf4
2 parents ec74c9f + c522af5
commit 5bacdf4
Show file tree

Hide file tree

Showing 11 changed files with 95 additions and 289 deletions.
diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md
@@ -8208,6 +8208,7 @@ $disabled-01: if(
 - **Type**: `{undefined}`
 - **Used by**:
   - [carbon--theme [mixin]](#carbon--theme-mixin)
+  - [accordion [mixin]](#accordion-mixin)
   - [content-switcher [mixin]](#content-switcher-mixin)
   - [file-uploader [mixin]](#file-uploader-mixin)
   - [slider [mixin]](#slider-mixin)
@@ -8241,6 +8242,7 @@ $disabled-02: if(
 - **Type**: `{undefined}`
 - **Used by**:
   - [carbon--theme [mixin]](#carbon--theme-mixin)
+  - [accordion [mixin]](#accordion-mixin)
   - [button [mixin]](#button-mixin)
   - [button-base [mixin]](#button-base-mixin)
   - [button-theme [mixin]](#button-theme-mixin)
@@ -13638,6 +13640,29 @@ Accordion styles
     }
   }
 
+  // Disabled styles
+  .#{$prefix}--accordion__heading[disabled] {
+    color: $disabled-02;
+    cursor: not-allowed;
+  }
+
+  .#{$prefix}--accordion__heading[disabled] .#{$prefix}--accordion__arrow {
+    fill: $disabled-02;
+  }
+
+  .#{$prefix}--accordion__heading[disabled]:hover::before {
+    background-color: transparent;
+  }
+
+  .#{$prefix}--accordion__item--disabled,
+  .#{$prefix}--accordion__item--disabled ~ * {
+    border-top: 1px solid $disabled-01;
+  }
+
+  li.#{$prefix}--accordion__item--disabled:last-of-type {
+    border-bottom: 1px solid $disabled-01;
+  }
+
   .#{$prefix}--accordion__arrow {
     @include focus-outline('reset');
     // Without flex basis and flex shrink being set here, our icon width can go
@@ -13795,6 +13820,8 @@ Accordion styles
   - [ui-03 [variable]](#ui-03-variable)
   - [text-01 [variable]](#text-01-variable)
   - [hover-ui [variable]](#hover-ui-variable)
+  - [disabled-02 [variable]](#disabled-02-variable)
+  - [disabled-01 [variable]](#disabled-01-variable)
   - [ui-05 [variable]](#ui-05-variable)
   - [carbon--spacing-05 [variable]](#carbon--spacing-05-variable)
   - [carbon--spacing-09 [variable]](#carbon--spacing-09-variable)

diff --git a/packages/components/src/components/accordion/_accordion.scss b/packages/components/src/components/accordion/_accordion.scss
@@ -72,6 +72,29 @@
     }
   }
 
+  // Disabled styles
+  .#{$prefix}--accordion__heading[disabled] {
+    color: $disabled-02;
+    cursor: not-allowed;
+  }
+
+  .#{$prefix}--accordion__heading[disabled] .#{$prefix}--accordion__arrow {
+    fill: $disabled-02;
+  }
+
+  .#{$prefix}--accordion__heading[disabled]:hover::before {
+    background-color: transparent;
+  }
+
+  .#{$prefix}--accordion__item--disabled,
+  .#{$prefix}--accordion__item--disabled ~ * {
+    border-top: 1px solid $disabled-01;
+  }
+
+  li.#{$prefix}--accordion__item--disabled:last-of-type {
+    border-bottom: 1px solid $disabled-01;
+  }
+
   .#{$prefix}--accordion__arrow {
     @include focus-outline('reset');
     // Without flex basis and flex shrink being set here, our icon width can go

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -22,6 +22,9 @@ Map {
       "className": Object {
         "type": "string",
       },
+      "disabled": Object {
+        "type": "bool",
+      },
     },
   },
   "AccordionItem" => Object {
@@ -32,6 +35,9 @@ Map {
       "className": Object {
         "type": "string",
       },
+      "disabled": Object {
+        "type": "bool",
+      },
       "iconDescription": [Function],
       "onClick": Object {
         "type": "func",

diff --git a/packages/react/src/components/Accordion/Accordion-story.js b/packages/react/src/components/Accordion/Accordion-story.js
@@ -89,6 +89,7 @@ const props = {
 
 export const playground = () => (
   <Accordion
+    disabled={boolean('Disable entire Accordion (disabled)', false)}
     align={select(
       'Accordion heading alignment (align)',
       ['start', 'end'],
@@ -113,7 +114,10 @@ export const playground = () => (
         commodo consequat.
       </p>
     </AccordionItem>
-    <AccordionItem title="Section 3 title" {...props}>
+    <AccordionItem
+      title="Section 3 title"
+      {...props}
+      disabled={boolean('Disable Section 3 (disabled)', true)}>
       <Button>This is a button.</Button>
     </AccordionItem>
     <AccordionItem

diff --git a/packages/react/src/components/Accordion/Accordion.js b/packages/react/src/components/Accordion/Accordion.js
@@ -12,13 +12,23 @@ import React from 'react';
 
 const { prefix } = settings;
 
-function Accordion({ align, children, className: customClassName, ...rest }) {
+function Accordion({
+  align,
+  children,
+  className: customClassName,
+  disabled,
+  ...rest
+}) {
   const className = cx(`${prefix}--accordion`, customClassName, {
     [`${prefix}--accordion--${align}`]: align,
   });
   return (
     <ul className={className} {...rest}>
-      {children}
+      {disabled
+        ? React.Children.toArray(children).map((child) => {
+            return React.cloneElement(child, { disabled });
+          })
+        : children}
     </ul>
   );
 }
@@ -42,6 +52,11 @@ Accordion.propTypes = {
    * Specify an optional className to be applied to the container node
    */
   className: PropTypes.string,
+
+  /**
+   * Specify whether an individual AccordionItem should be disabled
+   */
+  disabled: PropTypes.bool,
 };
 
 export default Accordion;
diff --git a/packages/react/src/components/Accordion/AccordionItem.js b/packages/react/src/components/Accordion/AccordionItem.js
@@ -25,6 +25,7 @@ function AccordionItem({
   onHeadingClick,
   renderExpando: Expando = defaultRenderExpando,
   title = 'title',
+  disabled,
   ...rest
 }) {
   const [isOpen, setIsOpen] = useState(open);
@@ -35,6 +36,7 @@ function AccordionItem({
     [`${prefix}--accordion__item`]: true,
     [`${prefix}--accordion__item--active`]: isOpen,
     [`${prefix}--accordion__item--${animation}`]: animation,
+    [`${prefix}--accordion__item--disabled`]: disabled,
     [customClassName]: !!customClassName,
   });
 
@@ -73,6 +75,7 @@ function AccordionItem({
   return (
     <li className={className} {...rest} onAnimationEnd={handleAnimationEnd}>
       <Expando
+        disabled={disabled}
         aria-controls={id}
         aria-expanded={isOpen}
         className={`${prefix}--accordion__heading`}
@@ -100,6 +103,11 @@ AccordionItem.propTypes = {
    */
   className: PropTypes.string,
 
+  /**
+   * Specify whether an individual AccordionItem should be disabled
+   */
+  disabled: PropTypes.bool,
+
   /**
    * The description of the expando icon.
    */

diff --git a/packages/react/src/components/ComposedModal/ComposedModal-story.js b/packages/react/src/components/ComposedModal/ComposedModal-story.js
@@ -198,9 +198,10 @@ export const UsingHeaderFooterProps = () => {
         {...bodyProps}
         aria-label={hasScrollingContent ? 'Modal content' : undefined}>
         <p className={`${prefix}--modal-content__text`}>
-          Please see ModalWrapper for more examples and demo of the
-          functionality.
+          Please see the &quot;With Trigger Button&quot; storybook example for a
+          demo of this functionality.
         </p>
+        <br />
         {hasScrollingContent && scrollingContent}
       </ModalBody>
       <ModalFooter {...props.modalFooter()} />
@@ -234,9 +235,10 @@ export const UsingChildNodes = () => {
         {...bodyProps}
         aria-label={hasScrollingContent ? 'Modal content' : undefined}>
         <p>
-          Please see ModalWrapper for more examples and demo of the
-          functionality.
+          Please see the &quot;With Trigger Button&quot; storybook example for a
+          demo of this functionality.
         </p>
+        <br />
         {hasScrollingContent && scrollingContent}
       </ModalBody>
       <ModalFooter>
@@ -299,10 +301,6 @@ export const WithTriggerButton = () => {
           <ModalBody
             {...bodyProps}
             aria-label={hasScrollingContent ? 'Modal content' : undefined}>
-            <p className={`${prefix}--modal-content__text`}>
-              Please see ModalWrapper for more examples and demo of the
-              functionality.
-            </p>
             {hasScrollingContent && scrollingContent}
           </ModalBody>
           <ModalFooter {...props.modalFooter()} />

diff --git a/packages/react/src/components/ComposedModal/ComposedModal.mdx b/packages/react/src/components/ComposedModal/ComposedModal.mdx
@@ -94,9 +94,6 @@ const ModalStateManager = ({
 };
 ```
 
-`<ModalWrapper>` is a modal state manager implementation which ships out of the
-box with Carbon.
-
 <InlineNotification
   kind="warning"
   title="Warning"

diff --git a/packages/react/src/components/Modal/Modal-story.js b/packages/react/src/components/Modal/Modal-story.js
@@ -183,8 +183,10 @@ export const Default = () => {
   return (
     <Modal {...rest} size={size || undefined}>
       <p className={`${prefix}--modal-content__text`}>
-        Please see ModalWrapper for more examples and demo of the functionality.
+        Please see the &quot;With State Manager&quot; storybook example for a
+        demo of this functionality.
       </p>
+      <br />
       {rest.hasScrollingContent && (
         <>
           <p>
@@ -265,10 +267,6 @@ export const WithStateManager = () => {
           size={size || undefined}
           open={open}
           onRequestClose={() => setOpen(false)}>
-          <p className={`${prefix}--modal-content__text`}>
-            Please see ModalWrapper for more examples and demo of the
-            functionality.
-          </p>
           {rest.hasScrollingContent && (
             <>
               <p>

diff --git a/packages/react/src/components/Modal/Modal.mdx b/packages/react/src/components/Modal/Modal.mdx
@@ -97,9 +97,6 @@ const ModalStateManager = ({
 };
 ```
 
-`<ModalWrapper>` is a modal state manager implementation which ships out of the
-box with Carbon.
-
 <InlineNotification title="Warning" kind="warning">
   <code>{`<Modal>`}</code>/<code>{`<ComposedModal>`}</code> has to be put at the
   top level in a React tree. The easiest way to ensure that is using React