From 747f948b3ef7910d9d69f30d03a7f5ef0283e024 Mon Sep 17 00:00:00 2001 From: Akira Sudoh Date: Wed, 3 Feb 2021 03:15:17 +0900 Subject: [PATCH] refactor(content-group-simple): use CSS grid for layout (#5038) ### Related Ticket(s) Refs #4967. ### Description Use CSS grid for layout for `` to ensure correct Carbon grid alignment and simplify the markup. ### Changelog **Changed** - Change to use CSS grid for layout for ``. --- .../content-block/_content-block.scss | 48 +++++++++++ .../content-group-simple/index.html | 2 +- .../content-block-media-content.ts | 4 +- .../content-block/content-block.scss | 56 ------------- .../content-group-simple.stories.ts | 8 +- .../content-group-simple.scss | 9 ++- .../content-group-simple.ts | 42 +++++++++- .../snapshots/dds-content-group-simple.md | 79 +++++++++---------- 8 files changed, 138 insertions(+), 110 deletions(-) diff --git a/packages/styles/scss/internal/content-block/_content-block.scss b/packages/styles/scss/internal/content-block/_content-block.scss index e23ae1ca742..cb2ed401b1d 100644 --- a/packages/styles/scss/internal/content-block/_content-block.scss +++ b/packages/styles/scss/internal/content-block/_content-block.scss @@ -63,6 +63,54 @@ 'body body' auto 'footer .' auto / 1fr 1fr; } + + // Most slotted contents have margins aligning to Carbon grid gutters. + // Note: Child contents define their margin by their own + ::slotted([slot]) { + margin-left: $carbon--spacing-05; + margin-right: $carbon--spacing-05; + } + + // Cards and link lists are the exceptions of above + // TODO: Remove negative margin adjustment from `` and add `` here + ::slotted(#{$dds-prefix}-card[slot]), + ::slotted(#{$dds-prefix}-card-cta[slot]) { + margin-left: 0; + margin-right: 0; + } + + ::slotted([slot='complementary']) { + grid-area: complementary; + margin-top: $layout-05; + margin-bottom: $layout-05; + + @include carbon--breakpoint('lg') { + margin-top: 0; + margin-bottom: 0; + } + } + + ::slotted([slot='footer']) { + margin-top: $carbon--layout-04; + + @include carbon--breakpoint('md') { + width: 50%; + margin-top: $carbon--layout-05; + } + } + + ::slotted([slot='heading']) { + grid-area: heading; + } + + ::slotted([slot='media']) { + margin-top: $carbon--spacing-07; + } + + ::slotted(#{$dds-prefix}-video-player-container) { + // Ensures the margin gets effective + display: block; + } } .#{$prefix}--content-layout--with-complementary { diff --git a/packages/web-components/examples/codesandbox/components/content-group-simple/index.html b/packages/web-components/examples/codesandbox/components/content-group-simple/index.html index 80d8a4c2305..5ddc2e8dd02 100644 --- a/packages/web-components/examples/codesandbox/components/content-group-simple/index.html +++ b/packages/web-components/examples/codesandbox/components/content-group-simple/index.html @@ -20,7 +20,7 @@
-
+
Curabitur malesuada varius mi eu posuere Lorem ipsum *dolor* sit amet diff --git a/packages/web-components/src/components/content-block-media/content-block-media-content.ts b/packages/web-components/src/components/content-block-media/content-block-media-content.ts index 81288ed2ac1..3c61f6499b6 100644 --- a/packages/web-components/src/components/content-block-media/content-block-media-content.ts +++ b/packages/web-components/src/components/content-block-media/content-block-media-content.ts @@ -12,7 +12,7 @@ import settings from 'carbon-components/es/globals/js/settings.js'; import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js'; import StableSelectorMixin from '../../globals/mixins/stable-selector'; import styles from './content-block-media.scss'; -import DDSContentGroupSimple from '../content-group-simple/content-group-simple'; +import DDSContentGroup from '../content-group/content-group'; const { prefix } = settings; const { stablePrefix: ddsPrefix } = ddsSettings; @@ -23,7 +23,7 @@ const { stablePrefix: ddsPrefix } = ddsSettings; * @element dds-content-block-media-content */ @customElement(`${ddsPrefix}-content-block-media-content`) -class DDSContentBlockMediaContent extends StableSelectorMixin(DDSContentGroupSimple) { +class DDSContentBlockMediaContent extends StableSelectorMixin(DDSContentGroup) { protected _renderInnerBody(): TemplateResult | string | void { const { _hasContent: hasContent, _hasMedia: hasMedia } = this; // Moves media content out of `
` diff --git a/packages/web-components/src/components/content-block/content-block.scss b/packages/web-components/src/components/content-block/content-block.scss index 4d44b7f7aa8..bea16e22e6d 100644 --- a/packages/web-components/src/components/content-block/content-block.scss +++ b/packages/web-components/src/components/content-block/content-block.scss @@ -45,62 +45,6 @@ } } -.#{$prefix}--content-layout { - // Most slotted contents have margins aligning to Carbon grid gutters. - // Note: Child contents define their margin by their own - ::slotted([slot]) { - margin-left: $carbon--spacing-05; - margin-right: $carbon--spacing-05; - } - - // Cards and link lists are the exceptions of above - // TODO: Remove negative margin adjustment from `` and add `` here - ::slotted(#{$dds-prefix}-card[slot]), - ::slotted(#{$dds-prefix}-card-cta[slot]) { - margin-left: 0; - margin-right: 0; - } - - ::slotted([slot='complementary']) { - grid-area: complementary; - margin-top: $layout-05; - margin-bottom: $layout-05; - - @include carbon--breakpoint('lg') { - margin-top: 0; - margin-bottom: 0; - } - } - - ::slotted([slot='footer']) { - margin-top: $carbon--layout-04; - - @include carbon--breakpoint('md') { - width: 50%; - margin-top: $carbon--layout-05; - } - } - - ::slotted([slot='heading']) { - grid-area: heading; - } - - ::slotted([slot='media']) { - margin-top: $carbon--spacing-07; - } - - ::slotted(#{$dds-prefix}-video-player-container) { - // Ensures the margin gets effective - display: block; - } -} - -.#{$prefix}--content-layout--card-group ::slotted([slot='footer']) { - @include carbon--breakpoint('lg') { - width: calc(100% / 3); - } -} - // TODO: Apply `dds--make-col(2, 3)` to React version, too, so we can merge the style to React version .#{$dds-prefix}-ce--content-block__col { @include dds--make-col(2, 3); diff --git a/packages/web-components/src/components/content-group-simple/__stories__/content-group-simple.stories.ts b/packages/web-components/src/components/content-group-simple/__stories__/content-group-simple.stories.ts index a3bef0a88c2..7c073aca9f1 100644 --- a/packages/web-components/src/components/content-group-simple/__stories__/content-group-simple.stories.ts +++ b/packages/web-components/src/components/content-group-simple/__stories__/content-group-simple.stories.ts @@ -179,12 +179,8 @@ export default { title: 'Components/Content group simple', decorators: [ story => html` - -
-
- ${story()} -
-
+ + ${story()} `, ], diff --git a/packages/web-components/src/components/content-group-simple/content-group-simple.scss b/packages/web-components/src/components/content-group-simple/content-group-simple.scss index 523ece75ef2..a2e0f31c436 100644 --- a/packages/web-components/src/components/content-group-simple/content-group-simple.scss +++ b/packages/web-components/src/components/content-group-simple/content-group-simple.scss @@ -1,5 +1,5 @@ // -// Copyright IBM Corp. 2020 +// Copyright IBM Corp. 2020, 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. @@ -8,8 +8,15 @@ @import 'carbon-components/scss/globals/scss/vars'; @import '@carbon/ibmdotcom-styles/scss/globals/vars'; @import '../../globals/scss/box-sizing'; +@import '@carbon/ibmdotcom-styles/scss/internal/content-block/content-block'; @import '@carbon/ibmdotcom-styles/scss/components/content-group-simple/content-group-simple'; :host(#{$dds-prefix}-content-group-simple) { display: block; + + // TODO: Define the padding on `` by default + ::slotted(#{$dds-prefix}-content-item) { + margin-left: $spacing-05; + margin-right: $spacing-05; + } } diff --git a/packages/web-components/src/components/content-group-simple/content-group-simple.ts b/packages/web-components/src/components/content-group-simple/content-group-simple.ts index 1f2dccb85fb..4a7234cefec 100644 --- a/packages/web-components/src/components/content-group-simple/content-group-simple.ts +++ b/packages/web-components/src/components/content-group-simple/content-group-simple.ts @@ -7,6 +7,7 @@ * LICENSE file in the root directory of this source tree. */ +import { Part } from 'lit-html'; import { html, css, customElement, TemplateResult } from 'lit-element'; import settings from 'carbon-components/es/globals/js/settings.js'; import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js'; @@ -24,11 +25,46 @@ const { stablePrefix: ddsPrefix } = ddsSettings; */ @customElement(`${ddsPrefix}-content-group-simple`) class DDSContentGroupSimple extends StableSelectorMixin(DDSContentGroup) { + /** + * The CSS class list for the container (grid) node. + */ + // eslint-disable-next-line class-methods-use-this + protected _getContainerClasses(): string | ((part: Part) => void) { + return `${prefix}--content-layout`; + } + + /** + * @returns The non-header, non-complementary contents. + */ + protected _renderBody(): TemplateResult | string | void { + const { _hasContent: hasContent, _hasCopy: hasCopy, _hasMedia: hasMedia } = this; + return html` +
+ ${super._renderBody()} +
+ `; + } + protected _renderInnerBody(): TemplateResult | string | void { - const { _hasContent: hasContent, _hasMedia: hasMedia } = this; return html` -
- ${this._renderMedia()}${this._renderContent()} + ${this._renderMedia()}${this._renderContent()} + `; + } + + protected _renderFooter(): TemplateResult | string | void { + const { _hasFooter: hasFooter, _handleSlotChange: handleSlotChange } = this; + // TODO: See if we can remove the surrounding `
` + return html` +
+ +
+ `; + } + + render() { + return html` +
+ ${this._renderHeading()}${this._renderBody()}${this._renderComplementary()}
`; } diff --git a/packages/web-components/tests/snapshots/dds-content-group-simple.md b/packages/web-components/tests/snapshots/dds-content-group-simple.md index e27e4971546..a0e8cf2ba1a 100644 --- a/packages/web-components/tests/snapshots/dds-content-group-simple.md +++ b/packages/web-components/tests/snapshots/dds-content-group-simple.md @@ -5,61 +5,58 @@ #### `should render with minimum attributes` ``` - - - - -