feat(content-item-row): v2 (#11004)

* feat(content-item-row): v2 * fix(content-item-row): styles cleanup * fix(content-item-row): styles format * fix(content-item-row): adjust spacing * fix(content-item-horizontal): documentation * fix(thumbnail): copy spacing
carbon-design-system · Oct 6, 2023 · 010c8eb · 010c8eb
1 parent e95e192
commit 010c8eb
Show file tree

Hide file tree

Showing 86 changed files with 774 additions and 1,028 deletions.
diff --git a/docs/dotcom-v2-migration.md b/docs/dotcom-v2-migration.md
@@ -38,6 +38,7 @@ For Carbon v11 migration guidance, see their
 | content-group-cards       | This component is deprecated in v2 in favor for content-section/block & card-group components                                                  |
 | content-group-pictograms  | This component is deprecated in v2 in favor for content-section/block content-item (pictogram variant) components                              |
 | content-group-simple      | This component is deprecated in v2 in favor for content-group, image, & content-item components                                                |
+| content-item-horizontal   | View changes [here](#content-item-horizontal)                                                                                           |
 | cta                       | View changes [here](#cta)                                                                                                                      |
 | cta-block                 | This component is deprecated in v2 in favor for content-section/block & content-item components                                                |
 | cta-section               | This component is deprecated in v2 in favor for content-section/block & content-item components                                                |
@@ -79,6 +80,11 @@ For Carbon v11 migration guidance, see their
   options
 - New `link` property which takes the place of the deprecated `card-link`
 
+### Content item horizontal
+
+- `content-item-horizontal` changed names to `content-item-row`
+- All components with `content-item-horizontal-*` also changed to `content-item-row-*`
+
 ### CTA
 
 In Carbon for IBM.com v2, the CTA component (and all of its subcomponents) have

diff --git a/packages/styles/carbon.yml b/packages/styles/carbon.yml
@@ -371,17 +371,17 @@ assets:
     thumbnailPath: ../../thumbnails/content-item.svg
     tags:
       - content-element
-  content-item-horizontal:
-    name: Content item horizontal
+  content-item-row:
+    name: Content item row
     description:
-      Content item horizontal component displays information in a horizontal
+      Content item row component displays information in a horizontal
       orientation.
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/content-item-horizontal
+    externalDocsUrl: https://www.ibm.com/standards/carbon/components/content-item-row
     status: stable
     type: component
     platform: web
     noIndex: true
-    thumbnailPath: ../../thumbnails/content-item-horizontal.svg
+    thumbnailPath: ../../thumbnails/content-item-row.svg
     tags:
       - content-block
       - content-element

diff --git a/packages/styles/scss/components/content-block-horizontal/_content-block-horizontal.scss b/packages/styles/scss/components/content-block-horizontal/_content-block-horizontal.scss
@@ -9,7 +9,7 @@
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '../../internal/content-block';
-@use '../content-item-horizontal';
+@use '../content-item-row';
 @use '../../globals/vars' as *;
 
 @mixin content-block-horizontal {
@@ -44,9 +44,7 @@
     margin-bottom: $spacing-07;
   }
 
-  :host(#{$c4d-prefix}-content-item-horizontal):last-child,
-  .#{$prefix}--content-block-horizontal
-    .#{$prefix}--content-item-horizontal__item:last-child {
+  :host(#{$c4d-prefix}-content-item-row):last-child {
     @include breakpoint(max) {
       padding-bottom: $spacing-13;
     }

diff --git a/...media/_content-item-horizontal-media.scss → ...em-row-media/_content-item-row-media.scss b/...media/_content-item-horizontal-media.scss → ...em-row-media/_content-item-row-media.scss
@@ -10,12 +10,13 @@
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/utilities' as *;
 @use '../../globals/vars' as *;
 @use '../link-list';
 
-@mixin content-item-horizontal-media {
-  :host(#{$c4d-prefix}-content-item-horizontal-media) {
-    padding: $spacing-07 $spacing-05 $spacing-10;
+@mixin content-item-row-media {
+  :host(#{$c4d-prefix}-content-item-row-media) {
+    padding: $spacing-07 0 $spacing-10;
     display: block;
 
     @include breakpoint(md) {
@@ -26,61 +27,61 @@
       padding-top: $spacing-07;
       padding-bottom: $spacing-10;
     }
+
+    ::slotted([slot='media']) {
+      margin-top: $spacing-07;
+
+      @include breakpoint(md) {
+        margin-top: $spacing-09;
+      }
+
+      @include breakpoint(lg) {
+        margin-top: 0;
+      }
+    }
   }
 
-  :host(#{$c4d-prefix}-content-item-horizontal-media),
-  :host(#{$c4d-prefix}-content-item-horizontal-media-featured)
+  :host(#{$c4d-prefix}-content-item-row-media),
+  :host(#{$c4d-prefix}-content-item-row-media-featured)
     ::slotted([slot='heading']),
-  :host(#{$c4d-prefix}-content-item-horizontal-media-copy)
-    ::slotted(:not([slot])),
-  :host(#{$c4d-prefix}-content-item-horizontal-eyebrow),
-  .#{$prefix}--content-item-horizontal__item--eyebrow,
-  .#{$prefix}--content-item-horizontal__item--heading,
-  .#{$prefix}--content-item-horizontal__item--copy {
+  :host(#{$c4d-prefix}-content-item-row-media-copy) ::slotted(:not([slot])),
+  :host(#{$c4d-prefix}-content-item-row-eyebrow) {
     width: 100%;
     max-width: 100%;
     min-width: 0;
   }
 
-  :host(#{$c4d-prefix}-content-item-horizontal-eyebrow),
-  .#{$prefix}--content-item-horizontal__item--eyebrow {
+  :host(#{$c4d-prefix}-content-item-row-eyebrow) {
     color: $text-helper;
     padding-bottom: $spacing-03;
     @include type-style('label-01');
   }
 
-  :host(#{$c4d-prefix}-content-item-horizontal-media)
-    ::slotted([slot='heading']),
-  :host(#{$c4d-prefix}-content-item-horizontal-media-featured)
-    ::slotted([slot='heading']),
-  .#{$prefix}--content-item-horizontal__item--heading {
+  :host(#{$c4d-prefix}-content-item-row-media) ::slotted([slot='heading']),
+  :host(#{$c4d-prefix}-content-item-row-media-featured)
+    ::slotted([slot='heading']) {
     display: block;
     color: $text-primary;
     margin-bottom: $spacing-07;
     @include type-style('fluid-heading-03', true);
   }
 
-  :host(#{$c4d-prefix}-content-item-horizontal-media-copy)
-    ::slotted(:not([slot])) {
-    margin-bottom: $spacing-07;
+  :host(#{$c4d-prefix}-content-item-row-media-copy) ::slotted(:not([slot])) {
     max-width: rem(640px);
     p {
       color: $text-primary;
     }
   }
 
-  :host(#{$c4d-prefix}-content-item-horizontal-media-video) {
+  :host(#{$c4d-prefix}-content-item-row-media-video) {
     position: relative;
     text-align: left;
   }
 
-  :host(#{$c4d-prefix}-content-item-horizontal-media)
-    .#{$prefix}--content-item__cta,
-  :host(#{$c4d-prefix}-content-item-horizontal-media-featured)
-    .#{$prefix}--content-item__cta,
-  .#{$prefix}--content-item-horizontal__item--cta {
+  :host(#{$c4d-prefix}-content-item-row-media) .#{$prefix}--content-item__cta,
+  :host(#{$c4d-prefix}-content-item-row-media-featured)
+    .#{$prefix}--content-item__cta {
     margin-top: auto;
-    margin-bottom: $spacing-07;
 
     .#{$prefix}--link-list {
       padding: 0;
@@ -96,7 +97,7 @@
     }
   }
 
-  .#{$prefix}--content-item-horizontal__row {
+  .#{$prefix}--content-item-row__row {
     width: 100%;
     display: grid;
     grid-auto-flow: dense;
@@ -107,7 +108,7 @@
       grid-template-columns: repeat(12, 1fr);
     }
 
-    .#{$prefix}--content-item-horizontal__col {
+    .#{$prefix}--content-item-row__col {
       text-align: left;
       grid-column: 1 / span 4;
 
@@ -123,8 +124,8 @@
       }
     }
 
-    &.#{$prefix}--content-item-horizontal-media__align-left {
-      .#{$prefix}--content-item-horizontal__col {
+    &.#{$prefix}--content-item-row-media__align-left {
+      .#{$prefix}--content-item-row__col {
         &:first-of-type {
           @include breakpoint(lg) {
             margin-inline-end: 0;
@@ -142,7 +143,7 @@
     }
   }
 
-  :host(#{$c4d-prefix}-content-item-horizontal-media-featured) {
+  :host(#{$c4d-prefix}-content-item-row-media-featured) {
     display: block;
     position: relative;
     padding-block-start: $spacing-07;
@@ -158,8 +159,8 @@
       background-color: $layer-accent-01;
     }
 
-    .#{$prefix}--content-item-horizontal__row {
-      .#{$prefix}--content-item-horizontal__col {
+    .#{$prefix}--content-item-row__row {
+      .#{$prefix}--content-item-row__col {
         &:last-of-type {
           @include breakpoint-down(md) {
             margin-block-start: 0;
@@ -170,10 +171,17 @@
 
     ::slotted([slot='media']) {
       grid-column: 1 / span 4;
+      margin-top: $spacing-07;
+
+      @include breakpoint(md) {
+        margin-top: $spacing-09;
+      }
+
       @include breakpoint(lg) {
         grid-column: 1 / span 12;
       }
     }
+
     ::slotted(#{$c4d-prefix}-image) {
       max-width: none;
       margin-top: 0;

diff --git a/...nents/content-item-horizontal/_index.scss → ...onents/content-item-row-media/_index.scss b/...nents/content-item-horizontal/_index.scss → ...onents/content-item-row-media/_index.scss
@@ -5,7 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@forward 'content-item-horizontal';
-@use 'content-item-horizontal';
+@forward 'content-item-row-media';
+@use 'content-item-row-media';
 
-@include content-item-horizontal.content-item-horizontal;
+@include content-item-row-media.content-item-row-media;