Merge branch 'master' into fix/quote-layout

carbon-design-system · Oct 27, 2020 · 3e368ca · 3e368ca
2 parents 682119a + 737589a
commit 3e368ca
Show file tree

Hide file tree

Showing 31 changed files with 4,115 additions and 3,614 deletions.
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -2,7 +2,7 @@
 name: Bug Report 🐛
 about: Something isn't working as expected? Here is the right place to report.
 labels: bug
-assignees: jeffchew, wonilsuhibm, ljcarot, RobertaJHahn, andysherman2121, oliviaflory, ariellalgilmore
+assignees: jeffchew, wonilsuhibm, ljcarot, RobertaJHahn, kennylam, jacobottesen-dgc
 ---
 
 <!-- Feel free to remove sections that aren't relevant.

diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -3,7 +3,7 @@ name: Feature Request 💡
 about: Suggest a new idea for the project.
 title: ''
 labels: Feature request
-assignees: jeffchew, wonilsuhibm, andysherman2121, oliviaflory, ariellalgilmore
+assignees: jeffchew, wonilsuhibm, kennylam, jacobottesen-dgc
 ---
 
 <!-- replace _{{...}}_ with your own words -->

diff --git a/.github/ISSUE_TEMPLATE/question.md b/.github/ISSUE_TEMPLATE/question.md
@@ -2,7 +2,7 @@
 name: Question 🤔
 about: Usage question or discussion about Carbon for IBM.com.
 labels: question
-assignees: jeffchew, wonilsuhibm, ljcarot, RobertaJHahn, andysherman2121, oliviaflory, ariellalgilmore
+assignees: jeffchew, wonilsuhibm, ljcarot, RobertaJHahn, kennylam, jacobottesen-dgc
 ---
 
 <!--

diff --git a/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap b/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap
diff --git a/packages/react/src/components/Masthead/HeaderNavContainer.js b/packages/react/src/components/Masthead/HeaderNavContainer.js
@@ -6,7 +6,6 @@
  */
 
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import calculateTotalWidth from '@carbon/ibmdotcom-utilities/es/utilities/calculateTotalWidth/calculateTotalWidth';
 import CaretLeft20 from '@carbon/icons-react/es/caret--left/20';
 import CaretRight20 from '@carbon/icons-react/es/caret--right/20';
 import PropTypes from 'prop-types';
@@ -18,100 +17,100 @@ const { prefix } = settings;
  * Header nav container component.
  */
 const HeaderNavContainer = ({ children }) => {
-  const headerNavContainerRef = useRef(null);
-  const [resizeObserver, setResizeObserver] = useState(null);
-  const [showLeftCaret, setShowLeftCaret] = useState(false);
-  const [showRightCaret, setShowRightCaret] = useState(false);
-  const [containerWidth, setContainerWidth] = useState(0);
-  const [totalNavWidth, setTotalNavWidth] = useState(0);
+  const containerRef = useRef(null);
+  const contentRef = useRef(null);
+  const contentLeftRef = useRef(null);
+  const contentRightRef = useRef(null);
+  const caretLeftRef = useRef(null);
+  const caretRightRef = useRef(null);
+  const [io, setIO] = useState(null);
+  const [position, setPosition] = useState(0);
 
   const paginateLeft = useCallback(() => {
-    headerNavContainerRef.current.scrollLeft -= containerWidth;
-    setShowRightCaret(true);
-    // 40 accounts for caret size
-    if (headerNavContainerRef.current.scrollLeft <= 40) {
-      setShowLeftCaret(false);
-      headerNavContainerRef.current.scrollLeft = 0;
-    }
-  }, [containerWidth]);
+    const moveLeft = Math.min(position + containerRef.current.offsetWidth, 0);
+    contentRef.current.style.left = String(moveLeft) + 'px';
+    setPosition(moveLeft);
+  }, [position]);
 
   const paginateRight = useCallback(() => {
-    headerNavContainerRef.current.scrollLeft += containerWidth;
-    setShowLeftCaret(true);
-    // 80 accounts for caret sizes
-    if (
-      headerNavContainerRef.current.scrollLeft + containerWidth >=
-      totalNavWidth - 80
-    ) {
-      setShowRightCaret(false);
-      headerNavContainerRef.current.scrollLeft += 80;
-    }
-  }, [containerWidth, totalNavWidth]);
+    const moveRight = -Math.min(
+      -position + containerRef.current.offsetWidth,
+      contentRef.current.offsetWidth - containerRef.current.offsetWidth
+    );
+    contentRef.current.style.left = String(moveRight) + 'px';
+    setPosition(moveRight);
+  }, [position]);
 
   useEffect(() => {
-    if (window.ResizeObserver) {
-      setResizeObserver(
-        new ResizeObserver(() => {
-          setContainerWidth(calculateTotalWidth(['bx--header__nav-container']));
-          setTotalNavWidth(calculateTotalWidth(['bx--header__nav']));
-        })
+    if (window.IntersectionObserver) {
+      setIO(
+        new IntersectionObserver(
+          records => {
+            records.forEach(record => {
+              if (
+                record.target.classList.contains(
+                  contentLeftRef.current.className
+                )
+              ) {
+                caretLeftRef.current.hidden = record.isIntersecting;
+              }
+              if (
+                record.target.classList.contains(
+                  contentRightRef.current.className
+                )
+              ) {
+                caretRightRef.current.hidden = record.isIntersecting;
+              }
+            });
+          },
+          {
+            root: containerRef.current,
+            threshold: 1,
+          }
+        )
       );
     }
-  }, []);
+  }, [setIO]);
 
   useEffect(() => {
-    if (totalNavWidth > containerWidth) {
-      // 80 accounts for caret sizes
-      if (
-        headerNavContainerRef.current.scrollLeft === 0 ||
-        headerNavContainerRef.current.scrollLeft + containerWidth <
-          totalNavWidth - 80
-      ) {
-        setShowRightCaret(true);
-      }
-      if (headerNavContainerRef.current.scrollLeft > 0) {
-        setShowLeftCaret(true);
-      }
+    if (io) {
+      io.observe(contentLeftRef.current);
+      io.observe(contentRightRef.current);
     } else {
-      setShowLeftCaret(false);
-      setShowRightCaret(false);
-    }
-  }, [containerWidth, totalNavWidth]);
-
-  useEffect(() => {
-    const { current: headerNavContainerNode } = headerNavContainerRef;
-    if (resizeObserver) {
-      resizeObserver.observe(headerNavContainerNode);
+      return () => {
+        if (io) {
+          io.disconnect();
+        }
+      };
     }
-
-    return () => {
-      if (resizeObserver) {
-        resizeObserver.disconnect();
-      }
-    };
-  }, [resizeObserver]);
+  }, [io]);
 
   return (
     <>
-      <button
-        className={`${prefix}--header__nav-caret-left`}
-        aria-label="Masthead left caret"
-        hidden={!showLeftCaret}
-        onClick={paginateLeft}>
-        <CaretLeft20 />
-      </button>
-      <div
-        className={`${prefix}--header__nav-container`}
-        ref={headerNavContainerRef}>
-        {children}
+      <div className={`${prefix}--header__nav-container`} ref={containerRef}>
+        <div className={`${prefix}--header__nav-content`} ref={contentRef}>
+          <div className={`${prefix}--sub-content-left`} ref={contentLeftRef} />
+          <div
+            className={`${prefix}--sub-content-right`}
+            ref={contentRightRef}
+          />
+          {children}
+        </div>
+        <button
+          className={`${prefix}--header__nav-caret-left`}
+          aria-label="Masthead left caret"
+          onClick={paginateLeft}
+          ref={caretLeftRef}>
+          <CaretLeft20 />
+        </button>
+        <button
+          className={`${prefix}--header__nav-caret-right`}
+          aria-label="Masthead right caret"
+          onClick={paginateRight}
+          ref={caretRightRef}>
+          <CaretRight20 />
+        </button>
       </div>
-      <button
-        className={`${prefix}--header__nav-caret-right`}
-        aria-label="Masthead right caret"
-        hidden={!showRightCaret}
-        onClick={paginateRight}>
-        <CaretRight20 />
-      </button>
     </>
   );
 };

diff --git a/packages/react/src/components/carbon-components-react/UIShell/HeaderMenu.js b/packages/react/src/components/carbon-components-react/UIShell/HeaderMenu.js
@@ -268,6 +268,7 @@ class HeaderMenu extends React.Component {
           role="menuitem"
           tabIndex={0}
           ref={this.menuLinkRef}
+          aria-selected={selected ? 'true' : ''}
           {...accessibilityLabel}>
           {menuLinkName}
           <MenuContent />

diff --git a/packages/react/src/components/carbon-components-react/UIShell/SideNavMenu.js b/packages/react/src/components/carbon-components-react/UIShell/SideNavMenu.js
@@ -186,7 +186,10 @@ export class SideNavMenu extends React.Component {
       [customClassName]: !!customClassName,
     });
     return (
-      <li className={className}>
+      <li
+        className={className}
+        role="tab"
+        aria-selected={rest.selected ? 'true' : 'false'}>
         <button
           aria-haspopup="true"
           aria-expanded={isExpanded}

diff --git a/packages/styles/scss/components/card/index.scss b/packages/styles/scss/components/card/index.scss
@@ -16,7 +16,8 @@
   :host(#{$dds-prefix}-card),
   :host(#{$dds-prefix}-link-list-item-card),
   :host(#{$dds-prefix}-card-group-item) .#{$prefix}--card,
-  :host(#{$dds-prefix}-card-cta) {
+  :host(#{$dds-prefix}-card-cta),
+  :host(#{$dds-prefix}-link-list-item-card-cta) {
     background-color: $ui-01;
     text-decoration: none;
     display: flex;

diff --git a/packages/styles/scss/components/link-list/_link-list.scss b/packages/styles/scss/components/link-list/_link-list.scss
@@ -15,6 +15,7 @@
   }
 
   :host(#{$dds-prefix}-link-list-item-card),
+  :host(#{$dds-prefix}-link-list-item-card-cta),
   .#{$prefix}--link-list {
     .#{$prefix}--card {
       max-width: none;
@@ -74,6 +75,8 @@
   .#{$prefix}--link-list__list--horizontal {
     ::slotted(#{$dds-prefix}-link-list-item),
     ::slotted(#{$dds-prefix}-link-list-item-card),
+    ::slotted(#{$dds-prefix}-link-list-item-cta),
+    ::slotted(#{$dds-prefix}-link-list-item-card-cta),
     .#{$prefix}--link-list__list__CTA {
       float: left;
       padding-right: $carbon--spacing-07;
@@ -88,6 +91,8 @@
   .#{$prefix}--link-list__list--vertical {
     ::slotted(#{$dds-prefix}-link-list-item),
     ::slotted(#{$dds-prefix}-link-list-item-card),
+    ::slotted(#{$dds-prefix}-link-list-item-cta),
+    ::slotted(#{$dds-prefix}-link-list-item-card-cta),
     .#{$prefix}--link-list__list__CTA {
       padding-bottom: $carbon--spacing-05;
 
@@ -99,6 +104,7 @@
 
   .#{$prefix}--link-list__list--vertical-end {
     ::slotted(#{$dds-prefix}-link-list-item),
+    ::slotted(#{$dds-prefix}-link-list-item-cta),
     .#{$prefix}--link-list__list__CTA .#{$prefix}--link-with-icon__container {
       @include carbon--make-col-ready;
 
@@ -128,13 +134,15 @@
   }
 
   :host(#{$dds-prefix}-link-list-item-card),
+  :host(#{$dds-prefix}-link-list-item-card-cta),
   .#{$prefix}--link-list__list__CTA {
     &.#{$prefix}--link-list__list--video .#{$prefix}--card__footer span {
       color: $link-01;
     }
   }
 
   :host(#{$dds-prefix}-link-list-item-card),
+  :host(#{$dds-prefix}-link-list-item-card-cta),
   .#{$prefix}--link-list__list--card .#{$prefix}--link-list__list__CTA {
     max-width: carbon--mini-units(80);
     border-top: 1px solid $ui-03;
@@ -145,6 +153,7 @@
   }
 
   :host(#{$dds-prefix}-link-list-item-card),
+  :host(#{$dds-prefix}-link-list-item-card-cta),
   .#{$prefix}--link-list__list--card .#{$prefix}--link-list__list__CTA div {
     .#{$prefix}--tile {
       margin-left: 0;

diff --git a/packages/styles/scss/components/link-with-icon/_link-with-icon.scss b/packages/styles/scss/components/link-with-icon/_link-with-icon.scss
@@ -14,6 +14,7 @@
   .#{$prefix}--link-with-icon,
   :host(#{$dds-prefix}-link-with-icon),
   :host(#{$dds-prefix}-link-list-item),
+  :host(#{$dds-prefix}-link-list-item-cta),
   :host(#{$dds-prefix}-text-cta) {
     display: flex;
 
@@ -41,18 +42,18 @@
         }
       }
     }
+  }
 
-    &.#{$prefix}--link-with-icon__icon-left {
-      justify-content: flex-end;
-      flex-direction: row-reverse;
+  .#{$prefix}--link-with-icon.#{$prefix}--link-with-icon__icon-left {
+    justify-content: flex-end;
+    flex-direction: row-reverse;
 
-      svg {
-        align-self: start;
-        position: relative;
-        top: 1px;
-        margin-left: 0;
-        margin-right: $carbon--spacing-03;
-      }
+    svg {
+      align-self: start;
+      position: relative;
+      top: 1px;
+      margin-left: 0;
+      margin-right: $carbon--spacing-03;
     }
   }
 
@@ -62,15 +63,6 @@
     &:not(:first-of-type) {
       margin-left: $carbon--spacing-07;
     }
-
-    .#{$prefix}--link-with-icon__icon-left::slotted(svg[slot='icon']) {
-      margin-right: $carbon--spacing-03;
-      margin-left: 0;
-    }
-    .#{$prefix}--link-with-icon__icon-right::slotted(svg[slot='icon']) {
-      margin-left: $carbon--spacing-03;
-      margin-right: 0;
-    }
   }
 
   .#{$prefix}--link-with-icon__container {