fix(feature-card): remove redundant flex-wrap (#4176)

### Related Ticket(s) Refs #4171. ### Description Fixes a bug that is observed where `<dds-feature-card>` is placed in a grid whose width is notably smaller than browser viewport. Also made changes to our stories using grid to unify similar other stories, using common story parameter and CSS classes. ### Changelog **Changed** - Fixes a bug that is observed where `<dds-feature-card>` is placed in a grid whose width is notably smaller than browser viewport. - Changes to our stories using grid to unify similar other stories.
carbon-design-system · Oct 15, 2020 · 9988866 · 9988866
1 parent ee1ece5
commit 9988866
Show file tree

Hide file tree

Showing 20 changed files with 113 additions and 149 deletions.
diff --git a/packages/styles/scss/components/feature-card/_feature-card.scss b/packages/styles/scss/components/feature-card/_feature-card.scss
@@ -52,6 +52,22 @@
       .#{$prefix}--card,
       .#{$prefix}--feature-card__card {
         @include carbon--make-row;
+
+        // `flex-wrap: wrap` comes from `@include carbon--make-row`,
+        // which may change the layout between the media and the card body from vertical to horizontal.
+        //
+        // It makes the card body invisible by being visually pushed out from the feature card UI.
+        //
+        // Such symptom is observed if the space for feature card is smaller than the width of browser viewport,
+        // e.g. when there is a notable margin/padding
+        // between the browser viewport and the Carbon grid surrounding the feature card.
+        //
+        // OTOH feature card does not seem to get any benefit from `flex-wrap: wrap` given the card body has flexible size
+        // and feature card itself explicitly changes the layout between the media and the card body from vertical to horizontal
+        // for larger breakpoint by changing `flex-direction`.
+        //
+        // Refs https://github.com/carbon-design-system/ibm-dotcom-library/issues/4171.
+        flex-wrap: nowrap;
       }
     }
 
@@ -84,6 +100,13 @@
     .#{$prefix}--image {
       width: 100%;
       height: aspect-ratio(2, 1);
+
+      // `.bx--card-wrapper` defines its `min-height`,
+      // but the height `.bx--card-wrapper` in feature card is relative to the entire size of feature card
+      // and setting `min-height` here may cause an adverse effect
+      // where some portion of card body in feature card goes outside the box of the feature card.
+      min-height: auto;
+
       @include carbon--breakpoint('md') {
         width: 50%;
         height: aspect-ratio(1, 1);

diff --git a/packages/web-components/.storybook/container.scss b/packages/web-components/.storybook/container.scss
@@ -67,6 +67,7 @@ body {
 }
 
 .dds-ce-demo-devenv--container--has-grid {
+  padding: 2rem 5%;
   align-items: stretch;
 }
 
@@ -75,7 +76,7 @@ body {
 // `margin-left: auto`/`margin-right: auto` in `.bx--grid`
 // (as well as `flex-direction: column; align-items: center` in `.dds-ce-demo-devenv--container`)
 // seems to be hostile to such styling strategy
-.dds-ce-demo-devenv--grid--card {
+.dds-ce-demo-devenv--grid--stretch {
   margin-left: 0;
   margin-right: 0;
 }

diff --git a/packages/web-components/src/components/callout-data/__stories__/callout-data.stories.ts b/packages/web-components/src/components/callout-data/__stories__/callout-data.stories.ts
@@ -58,8 +58,8 @@ export default !DDS_CALLOUT_DATA
         },
         decorators: [
           story => html`
-            <div class="bx--grid" style="width: 100%">
-              <div class="bx--row">
+            <div class="bx--grid dds-ce-demo-devenv--grid--stretch">
+              <div class="bx--row dds-ce-demo-devenv--grid-row">
                 <div class="bx--offset-lg-3 bx--col-lg-9">
                   ${story()}
                 </div>

diff --git a/packages/web-components/src/components/card-group/__stories__/card-group.stories.ts b/packages/web-components/src/components/card-group/__stories__/card-group.stories.ts
@@ -11,10 +11,34 @@ import { html } from 'lit-element';
 import ArrowRight20 from 'carbon-web-components/es/icons/arrow--right/20';
 import { number } from '@storybook/addon-knobs';
 import readme from './README.stories.mdx';
-import styles from './card-group.stories.scss';
 import '../card-group';
 import '../card-group-item';
 
+const defaultCardGroupItem = html`
+  <dds-card-group-item href="https://example.com">
+    <div slot="heading">Nunc convallis lobortis</div>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
+      Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
+    </p>
+    <dds-card-footer slot="footer">
+      ${ArrowRight20({ slot: 'icon' })}
+    </dds-card-footer>
+  </dds-card-group-item>
+`;
+
+const cardGroupItemWithImages = html`
+  <dds-card-group-item href="https://example.com">
+    <dds-image slot="image" alt="Image alt text" default-src="https://dummyimage.com/1056x792/ee5396/161616&amp;text=4:3">
+    </dds-image>
+    <div slot="eyebrow">Topic</div>
+    <div slot="heading">Natural Language Processing.</div>
+    <dds-card-footer slot="footer">
+      ${ArrowRight20({ slot: 'icon' })}
+    </dds-card-footer>
+  </dds-card-group-item>
+`;
+
 export const Default = ({ parameters }) => {
   const { cards } = parameters?.props?.CardGroup ?? {};
   return html`
@@ -44,6 +68,19 @@ export const withImages = ({ parameters }) => {
   `;
 };
 
+withImages.story = {
+  parameters: {
+    ...readme.parameters,
+    knobs: {
+      CardGroup: ({ groupId }) => ({
+        cards: Array.from({
+          length: number('Number of cards', 5, {}, groupId),
+        }).map(() => cardGroupItemWithImages),
+      }),
+    },
+  },
+};
+
 export const withImagesAndCTA = ({ parameters }) => {
   const { cards } = parameters?.props?.CardGroup ?? {};
   return html`
@@ -59,40 +96,25 @@ export const withImagesAndCTA = ({ parameters }) => {
   `;
 };
 
-const defaultCardGroupItem = html`
-  <dds-card-group-item href="https://example.com">
-    <div slot="heading">Nunc convallis lobortis</div>
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
-      Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
-    </p>
-    <dds-card-footer slot="footer">
-      ${ArrowRight20({ slot: 'icon' })}
-    </dds-card-footer>
-  </dds-card-group-item>
-`;
-
-const cardGroupItemWithImages = html`
-  <dds-card-group-item href="https://example.com">
-    <dds-image slot="image" alt="Image alt text" default-src="https://dummyimage.com/1056x792/ee5396/161616&amp;text=4:3">
-    </dds-image>
-    <div slot="eyebrow">Topic</div>
-    <div slot="heading">Natural Language Processing.</div>
-    <dds-card-footer slot="footer">
-      ${ArrowRight20({ slot: 'icon' })}
-    </dds-card-footer>
-  </dds-card-group-item>
-`;
+withImagesAndCTA.story = {
+  parameters: {
+    ...readme.parameters,
+    knobs: {
+      CardGroup: ({ groupId }) => ({
+        cards: Array.from({
+          length: number('Number of cards', 5, {}, groupId),
+        }).map(() => cardGroupItemWithImages),
+      }),
+    },
+  },
+};
 
 export default {
   title: 'Components/Card Group',
   decorators: [
     story => html`
-      <style>
-        ${styles}
-      </style>
-      <div class="bx--grid bx--content-group-story">
-        <div class="bx--row">
+      <div class="bx--grid bx--content-group-story dds-ce-demo-devenv--grid--stretch">
+        <div class="bx--row dds-ce-demo-devenv--grid-row">
           <div class="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-2">
             ${story()}
           </div>
@@ -102,6 +124,7 @@ export default {
   ],
   parameters: {
     ...readme.parameters,
+    hasGrid: true,
     knobs: {
       CardGroup: ({ groupId }) => ({
         cards: Array.from({
@@ -111,29 +134,3 @@ export default {
     },
   },
 };
-
-withImages.story = {
-  parameters: {
-    ...readme.parameters,
-    knobs: {
-      CardGroup: ({ groupId }) => ({
-        cards: Array.from({
-          length: number('Number of cards', 5, {}, groupId),
-        }).map(() => cardGroupItemWithImages),
-      }),
-    },
-  },
-};
-
-withImagesAndCTA.story = {
-  parameters: {
-    ...readme.parameters,
-    knobs: {
-      CardGroup: ({ groupId }) => ({
-        cards: Array.from({
-          length: number('Number of cards', 5, {}, groupId),
-        }).map(() => cardGroupItemWithImages),
-      }),
-    },
-  },
-};
diff --git a/packages/web-components/src/components/card-link/__stories__/card-link.stories.scss b/packages/web-components/src/components/card-link/__stories__/card-link.stories.scss
diff --git a/packages/web-components/src/components/card-link/__stories__/card-link.stories.ts b/packages/web-components/src/components/card-link/__stories__/card-link.stories.ts
@@ -13,7 +13,6 @@ import ArrowRight20 from 'carbon-web-components/es/icons/arrow--right/20.js';
 import Error20 from 'carbon-web-components/es/icons/error/20.js';
 import ifNonNull from 'carbon-web-components/es/globals/directives/if-non-null.js';
 import readme from './README.stories.mdx';
-import styles from './card-link.stories.scss';
 import textNullable from '../../../../.storybook/knob-text-nullable';
 import '../card-link';
 
@@ -33,11 +32,8 @@ export default {
   title: 'Components/Card Link',
   decorators: [
     story => html`
-      <style>
-        ${styles}
-      </style>
-      <div class="bx--grid bx--grid--condensed" style="width: 100%">
-        <div class="bx--row">
+      <div class="bx--grid dds-ce-demo-devenv--grid--stretch">
+        <div class="bx--row dds-ce-demo-devenv--grid-row">
           <div class="bx--col-sm-4 bx--col-md-4 bx--col-lg-3 bx--offset-lg-4">
             ${story()}
           </div>
@@ -47,6 +43,7 @@ export default {
   ],
   parameters: {
     ...readme.parameters,
+    hasGrid: true,
     knobs: {
       CardLink: ({ groupId }) => ({
         disabled: boolean('Disabled (disabled):', false, groupId),

diff --git a/packages/web-components/src/components/card/__stories__/card.stories.scss b/packages/web-components/src/components/card/__stories__/card.stories.scss
diff --git a/packages/web-components/src/components/card/__stories__/card.stories.ts b/packages/web-components/src/components/card/__stories__/card.stories.ts
@@ -14,7 +14,6 @@ import '../card-footer';
 import '../../image/image';
 import ifNonNull from 'carbon-web-components/es/globals/directives/if-non-null';
 import readme from './README.stories.mdx';
-import styles from './card.stories.scss';
 import textNullable from '../../../../.storybook/knob-text-nullable';
 import '../card';
 
@@ -50,11 +49,8 @@ export default {
   title: 'Components/Card',
   decorators: [
     story => html`
-      <style>
-        ${styles}
-      </style>
-      <div class="bx--grid" style="width: 100%">
-        <div class="bx--row">
+      <div class="bx--grid dds-ce-demo-devenv--grid--stretch">
+        <div class="bx--row dds-ce-demo-devenv--grid-row">
           <div class="bx--col-sm-4 bx--col-md-3 bx--no-gutter">
             ${story()}
           </div>
@@ -64,6 +60,7 @@ export default {
   ],
   parameters: {
     ...readme.parameters,
+    hasGrid: true,
     knobs: {
       Card: ({ groupId }) => ({
         alt: 'Image alt text',

diff --git a/...omponents/src/components/content-block-simple/__stories__/content-block-simple.stories.ts b/...omponents/src/components/content-block-simple/__stories__/content-block-simple.stories.ts
@@ -134,8 +134,8 @@ export default {
   title: 'Components/Content block simple',
   decorators: [
     (story, { parameters }) => html`
-      <div class="bx--grid">
-        <div class="bx--row">
+      <div class="bx--grid dds-ce-demo-devenv--grid--stretch">
+        <div class="bx--row dds-ce-demo-devenv--grid-row">
           <div class="bx--col-sm-4 ${parameters.gridLargeColumnClass} bx--offset-lg-4">
             ${story()}
           </div>
@@ -145,6 +145,7 @@ export default {
   ],
   parameters: {
     ...readme.parameters,
+    hasGrid: true,
     gridLargeColumnClass: 'bx--col-lg-8',
     knobs: {
       ContentBlockSimple: ({ groupId }) => ({

diff --git a/packages/web-components/src/components/cta/__stories__/cta.stories.ts b/packages/web-components/src/components/cta/__stories__/cta.stories.ts
@@ -106,6 +106,7 @@ export const Card = ({ parameters }) => {
 
 Card.story = {
   parameters: {
+    colExtraClasses: 'bx--col-md-4 bx--col-lg-4',
     useGridForCard: true,
     knobs: {
       CardCTA: ({ groupId }) => Text.story.parameters.knobs.TextCTA({ groupId }),
@@ -149,6 +150,7 @@ export const Feature = ({ parameters }) => {
 
 Feature.story = {
   parameters: {
+    colExtraClasses: 'bx--col-lg-8 bx--offset-lg-4',
     useGridForCard: true,
     knobs: {
       FeatureCTA: ({ groupId }) => Card.story.parameters.knobs.CardCTA({ groupId }),
@@ -161,11 +163,10 @@ export default {
   title: 'Components/CTA',
   decorators: [
     (story, { parameters }) => {
-      const { useGridForCard } = parameters ?? {};
-      const colExtraClasses = useGridForCard ? 'bx--col-md-4 bx--col-lg-4' : 'bx--col-lg-8';
+      const { colExtraClasses = 'bx--col-lg-8', useGridForCard } = parameters ?? {};
       const classes = classMap({
         'bx--grid': true,
-        'dds-ce-demo-devenv--grid--card': useGridForCard,
+        'dds-ce-demo-devenv--grid--stretch': useGridForCard,
       });
       return html`
         <dds-video-cta-container class="${classes}">

diff --git a/...group/__stories__/card-group.stories.scss → ...c/components/cta/video-cta-composite.scss b/...group/__stories__/card-group.stories.scss → ...c/components/cta/video-cta-composite.scss
@@ -5,6 +5,9 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-.dds-ce-demo-devenv--container {
-  padding: 0;
+@import '../../globals/scss/vars';
+
+:host(#{$dds-prefix}-video-cta-composite),
+:host(#{$dds-prefix}-video-cta-container) {
+  display: contents;
 }
diff --git a/packages/web-components/src/components/cta/video-cta-composite.ts b/packages/web-components/src/components/cta/video-cta-composite.ts
@@ -24,6 +24,7 @@ import '../lightbox-media-viewer/lightbox-video-player-composite';
 /* eslint-enable import/no-duplicates */
 import { CTA_TYPE } from './shared-enums';
 import { CTAMixinImpl } from './mixins/cta';
+import styles from './video-cta-composite.scss';
 
 const { stablePrefix: ddsPrefix } = ddsSettings;
 
@@ -203,6 +204,8 @@ class DDSVideoCTAComposite extends ModalRenderMixin(HostListenerMixin(LitElement
   static get eventRunAction() {
     return `${ddsPrefix}-cta-run-action`;
   }
+
+  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
 export default DDSVideoCTAComposite;
diff --git a/...src/components/feature-card-block-large/__stories__/feature-card-block-large.stories.scss b/...src/components/feature-card-block-large/__stories__/feature-card-block-large.stories.scss