fix(link-with-icon): add icon line wrap behavior by default

packages/react/src/components/CTA/TextCTA.js

@@ -35,6 +35,7 @@ const TextCTA = ({
         <LinkWithIcon
           href="#"
           onClick={e => CTALogic.setLightBox(e, openLightBox)}
+          iconInline={otherProps.iconInline}
           {...(iconPlacement && { iconPlacement })}>
           <span>
             {formatCTAcopy({
@@ -51,6 +52,7 @@ const TextCTA = ({
       href={href}
       target={CTALogic.external(type)}
       onClick={e => CTALogic.jump(e, type)}
+      iconInline={otherProps.iconInline}
       {...(iconPlacement && { iconPlacement })}>
       <span>{otherProps.copy}</span>
       {type !== 'default' && <Icon />}

packages/react/src/components/LinkList/LinkList.js

@@ -24,6 +24,7 @@ const { prefix } = settings;
  */
 const LinkList = ({ heading, iconPlacement, items, style }) => {
   const linkStyle = style === 'card' ? 'card' : 'text';
+  const iconInline = style === 'vertical' || style === 'horizontal';
   return (
     <div
       className={`${prefix}--link-list`}
@@ -46,6 +47,7 @@ const LinkList = ({ heading, iconPlacement, items, style }) => {
                 disableImage
                 {...(iconPlacement &&
                   linkStyle === 'text' && { iconPlacement })}
+                {...(linkStyle === 'text' && { iconInline })}
               />
             </li>
           );

packages/react/src/components/LinkWithIcon/LinkWithIcon.js

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2020
+ * Copyright IBM Corp. 2016, 2021
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -23,6 +23,7 @@ const LinkWithIcon = ({
   className: customClassName,
   href,
   inverse,
+  iconInline,
   iconPlacement,
   ...props
 }) => {
@@ -40,6 +41,8 @@ const LinkWithIcon = ({
         href={href}
         className={classNames(`${prefix}--link-with-icon`, {
           [`${prefix}--link-with-icon__icon-left`]: iconPlacement === 'left',
+          [`${prefix}--link-with-icon--inline-icon`]:
+            iconInline && iconPlacement === 'right',
         })}
         {...props}>
         {children}
@@ -59,6 +62,11 @@ LinkWithIcon.propTypes = {
    */
   href: PropTypes.string,
 
+  /**
+   * Positions the icon inline with text when `true`
+   */
+  iconInline: PropTypes.bool,
+
   /**
    * Icon placement.
    */
@@ -78,6 +86,7 @@ LinkWithIcon.propTypes = {
 LinkWithIcon.defaultProps = {
   children: [],
   href: '',
+  iconInline: true,
   iconPlacement: 'right',
 };
 

packages/styles/scss/components/card/index.scss

@@ -255,6 +255,17 @@
     }
   }
 
+  :host(#{$dds-prefix}-card-footer) {
+    .#{$prefix}--link-with-icon.#{$prefix}--link-with-icon--inline-icon {
+      display: flex;
+
+      svg,
+      ::slotted(svg[slot='icon']) {
+        display: block;
+      }
+    }
+  }
+
   .#{$prefix}--card .#{$prefix}--card__footer,
   :host(#{$dds-prefix}-card-footer) a,
   :host(#{$dds-prefix}-card-cta-footer) a,

packages/styles/scss/components/link-with-icon/_link-with-icon.scss

@@ -58,6 +58,25 @@
     }
   }
 
+  .#{$prefix}--link-with-icon__container,
+  :host(#{$dds-prefix}-callout-link-with-icon),
+  :host(#{$dds-prefix}-card-cta-footer),
+  :host(#{$dds-prefix}-link-with-icon),
+  :host(#{$dds-prefix}-link-list-item),
+  :host(#{$dds-prefix}-link-list-item-cta),
+  :host(#{$dds-prefix}-text-cta) {
+    .#{$prefix}--link-with-icon.#{$prefix}--link-with-icon--inline-icon {
+      display: inline-block;
+
+      svg,
+      ::slotted(svg[slot='icon']) {
+        display: inline;
+        vertical-align: middle;
+        white-space: nowrap;
+      }
+    }
+  }
+
   .#{$prefix}--link-with-icon,
   :host(#{$dds-prefix}-link-with-icon),
   :host(#{$dds-prefix}-text-cta) {

packages/web-components/src/components/link-list/link-list-item.ts

@@ -29,6 +29,12 @@ class DDSLinkListItem extends DDSLinkWithIcon {
   @property({ reflect: true })
   type = LINK_LIST_ITEM_TYPE.DEFAULT;
 
+  /**
+   * Positions the icon inline with text when `true`
+   */
+  @property({ type: Boolean })
+  iconInline = false;
+
   connectedCallback() {
     if (!this.hasAttribute('role')) {
       this.setAttribute('role', 'listitem');

packages/web-components/src/components/link-list/link-list.ts

@@ -125,6 +125,12 @@ class DDSLinkList extends StableSelectorMixin(LitElement) {
         (elem as DDSLinkListItem).type = LINK_LIST_ITEM_TYPE.END;
       });
     }
+
+    if (this.type === LINK_LIST_TYPE.HORIZONTAL || this.type === LINK_LIST_TYPE.VERTICAL) {
+      this._childItems.forEach(elem => {
+        (elem as DDSLinkListItem).iconInline = true;
+      });
+    }
   }
 
   /**

packages/web-components/src/components/link-with-icon/link-with-icon.ts

@@ -35,6 +35,12 @@ class DDSLinkWithIcon extends StableSelectorMixin(BXLink) {
   @property({ attribute: 'icon-placement', reflect: true })
   iconPlacement = ICON_PLACEMENT.RIGHT;
 
+  /**
+   * Positions the icon inline with text when `true`
+   */
+  @property({ type: Boolean })
+  iconInline = true;
+
   /**
    * @returns The main content.
    */
@@ -62,14 +68,18 @@ class DDSLinkWithIcon extends StableSelectorMixin(BXLink) {
   }
 
   updated() {
-    const { iconPlacement, _linkNode: linkNode } = this;
+    const { iconInline, iconPlacement, _linkNode: linkNode } = this;
     if (linkNode) {
       linkNode.classList.add(`${prefix}--link-with-icon`);
       linkNode.classList.toggle(`${prefix}--link-with-icon__icon-${ICON_PLACEMENT.LEFT}`, iconPlacement === ICON_PLACEMENT.LEFT);
       linkNode.classList.toggle(
         `${prefix}--link-with-icon__icon-${ICON_PLACEMENT.RIGHT}`,
         iconPlacement === ICON_PLACEMENT.RIGHT
       );
+
+      if (iconInline && iconPlacement === ICON_PLACEMENT.RIGHT) {
+        linkNode.classList.add(`${prefix}--link-with-icon--inline-icon`);
+      }
     }
   }
 

packages/web-components/tests/snapshots/dds-card-cta-footer.md

@@ -7,7 +7,7 @@
 ```
 <a
   aria-label=""
-  class="bx--card__footer bx--link bx--link-with-icon bx--link-with-icon__icon-right dds-ce--card__footer"
+  class="bx--card__footer bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link-with-icon__icon-right dds-ce--card__footer"
   id="link"
   part="link"
 >
@@ -29,7 +29,7 @@
 ```
 <a
   aria-label=" - This link plays a video"
-  class="bx--card__footer bx--link bx--link-with-icon bx--link-with-icon__icon-right dds-ce--card__footer"
+  class="bx--card__footer bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link-with-icon__icon-right dds-ce--card__footer"
   href="#"
   id="link"
   part="link"

packages/web-components/tests/snapshots/dds-card-cta.md

@@ -84,7 +84,7 @@
 ```
 <a
   aria-label="video-name-foo - This link plays a video"
-  class="bx--card__footer bx--link bx--link-with-icon bx--link-with-icon__icon-right dds-ce--card__footer"
+  class="bx--card__footer bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link-with-icon__icon-right dds-ce--card__footer"
   href="#"
   id="link"
   part="link"

packages/web-components/tests/snapshots/dds-text-cta.md

@@ -6,7 +6,7 @@
 
 ```
 <a
-  class="bx--link bx--link-with-icon bx--link-with-icon__icon-right"
+  class="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link-with-icon__icon-right"
   id="link"
   part="link"
 >
@@ -24,7 +24,7 @@
 
 ```
 <a
-  class="bx--link bx--link-with-icon bx--link-with-icon__icon-right"
+  class="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link-with-icon__icon-right"
   href="#"
   id="link"
   part="link"