Merge branch 'master' into locale-modal-reset-search-box

carbon-design-system · Oct 26, 2020 · 6e50035 · 6e50035
2 parents e8a7cae + 4019ee0
commit 6e50035
Show file tree

Hide file tree

Showing 19 changed files with 4,007 additions and 3,593 deletions.
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/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 {

diff --git a/packages/styles/scss/components/masthead/_masthead.scss b/packages/styles/scss/components/masthead/_masthead.scss
@@ -210,12 +210,20 @@ $search-transition-timing: 95ms;
   .#{$prefix}--header__nav-container {
     height: 100%;
     overflow-x: hidden;
+    position: relative;
     @include carbon--breakpoint(md) {
       display: flex;
       flex: 1;
     }
   }
 
+  .#{$prefix}--header__nav-content {
+    position: absolute;
+    height: 100%;
+    left: 0;
+    transition: left $transition--base motion(standard, productive);
+  }
+
   .#{$prefix}--header__nav {
     a.#{$prefix}--header__menu-item {
       @include masthead-top-nav-link;
@@ -308,13 +316,30 @@ $search-transition-timing: 95ms;
     }
   }
 
+  .#{$prefix}--sub-content-left {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 1px;
+    height: 100%;
+  }
+
+  .#{$prefix}--sub-content-right {
+    position: absolute;
+    top: 0;
+    right: 1px;
+    width: 1px;
+    height: 100%;
+  }
+
   .#{$prefix}--header__nav-caret-left,
   .#{$prefix}--header__nav-caret-right {
     width: rem(40px);
     height: 100%;
     display: none;
-    position: relative;
-    background: none;
+    position: absolute;
+    top: 0;
+    background-color: $ui-background;
     border: none;
     > {
       svg {
@@ -354,6 +379,7 @@ $search-transition-timing: 95ms;
     display: none;
   }
   .#{$prefix}--header__nav-caret-left {
+    left: 0;
     &::before {
       content: '';
       display: block;
@@ -386,6 +412,7 @@ $search-transition-timing: 95ms;
     }
   }
   .#{$prefix}--header__nav-caret-right {
+    right: 0;
     &::before {
       content: '';
       display: block;

diff --git a/packages/web-components/src/components/card-link/card-link.scss b/packages/web-components/src/components/card-link/card-link.scss
@@ -12,14 +12,11 @@
 @import '@carbon/ibmdotcom-styles/scss/components/card-link/card-link';
 
 :host(#{$dds-prefix}-card-link),
-:host(#{$dds-prefix}-link-list-item-card) {
+:host(#{$dds-prefix}-link-list-item-card),
+:host(#{$dds-prefix}-link-list-item-card-cta) {
   .#{$prefix}--card__wrapper {
     .#{$prefix}--card__copy {
       flex: 1;
     }
-
-    ::slotted(svg[slot='footer']) {
-      fill: $link-01;
-    }
   }
 }