From 895be5bcb453ded0fce094e010d26a00ae417ca0 Mon Sep 17 00:00:00 2001 From: Marlene Wanberg Date: Mon, 14 Mar 2022 16:09:55 -0700 Subject: [PATCH] fix(Tabs & Tabs extended with media): adjust the layout to align with the defined grid (#8394) ### Related Ticket(s) [[Tabs & Tabs extended with media]: Not on grid](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7815) ### Description 1. Tabs extended media: Contents of the component are not aligned to Carbon grid. **Current Canary web components:** ![image](https://user-images.githubusercontent.com/15144993/144798385-d6124585-b78e-41e9-bffd-59e5fb3c9ca7.png) **Expecting:** ![image](https://user-images.githubusercontent.com/15144993/144798590-8d961cc2-1831-4fbf-a085-4e13a63182d4.png) **Updated:** Screen Shot 2022-03-02 at 9 12 59 PM 2. For Tabs extended, the individual tabs should be 2 columns wide. **Current:** ![image.png](https://images.zenhubusercontent.com/5be09c3a6102900c6d16d991/52368160-9d5e-49cf-bd6d-0c490eb83840) **Expecting:** ![image.png](https://images.zenhubusercontent.com/5be09c3a6102900c6d16d991/6d77531e-9c89-455f-a572-634aaf66ed0b) **Updated:** Screen Shot 2022-03-02 at 9 12 29 PM ### Notes As of this first pass, there are still some differences between the specs and the results, notably: 1. Tabs Extended with Media - The tab contents' image and text are not aligned to the grid - Some of the vertical margins of the tab contents are different 2. Tabs Extended - The tabs' text is not bottom aligned when they have multiple lines - The tab contents' text and cta block have some left misalignment due to inherited styles from the component it's using, Content Block Media I am unsure if the scope of this ticket includes addressing the above. --- .../_tabs-extended-media.scss | 37 +++++++------------ .../tabs-extended/_tabs-extended.scss | 6 +-- .../tabs-extended-media.stories.ts | 2 +- 3 files changed, 17 insertions(+), 28 deletions(-) diff --git a/packages/styles/scss/components/tabs-extended-media/_tabs-extended-media.scss b/packages/styles/scss/components/tabs-extended-media/_tabs-extended-media.scss index 2eff45607c8..92cdb0cc8aa 100644 --- a/packages/styles/scss/components/tabs-extended-media/_tabs-extended-media.scss +++ b/packages/styles/scss/components/tabs-extended-media/_tabs-extended-media.scss @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2016, 2021 + * Copyright IBM Corp. 2016, 2022 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -15,8 +15,9 @@ @mixin tabs-extended-media { :host(#{$dds-prefix}-tabs-extended-media) { margin: 0; - grid-column: 1 / span 16; + display: flex; overflow-x: hidden; + @include carbon--breakpoint(sm) { padding-top: $carbon--spacing-07; padding-bottom: $carbon--spacing-12; @@ -27,50 +28,38 @@ } ::slotted([slot='heading']) { - grid-column: 1 / span 1; - grid-row: 1; margin-bottom: $carbon--spacing-09; - margin-left: $carbon--spacing-05; - margin-right: $carbon--spacing-05; + padding-left: $carbon--spacing-05; + padding-right: $carbon--spacing-05; + @include carbon--breakpoint(lg) { padding-top: var(--cds-spacing-04, 0.75rem); - margin-left: 0; - margin-right: 0; } } .#{$prefix}--tabs-extended-media { - display: grid; - column-gap: $carbon--spacing-07; - @include carbon--breakpoint(sm) { - grid-template-columns: repeat(1, 1fr); - } @include carbon--breakpoint(lg) { - grid-template-columns: repeat(4, 1fr); + display: flex; } } - .#{$prefix}--tabs-extended { - @include carbon--breakpoint(sm) { - grid-column: 1 / span 1; - grid-row: 2; - } + .#{$prefix}--heading { @include carbon--breakpoint(lg) { - grid-column: 2 / span 3; - grid-row: 1; + flex: 0 0 25%; } } .#{$prefix}--tab-content { - padding: 0; + padding-left: $carbon--spacing-05; + padding-right: $carbon--spacing-05; } .#{$prefix}--accordion__content { margin-top: -$carbon--spacing-07; margin-bottom: $carbon--spacing-05; padding-bottom: 0; - padding-left: 0; - padding-right: 0; + padding-left: $carbon--spacing-05; + padding-right: $carbon--spacing-05; @include carbon--breakpoint(md) { margin-bottom: -$carbon--spacing-05; diff --git a/packages/styles/scss/components/tabs-extended/_tabs-extended.scss b/packages/styles/scss/components/tabs-extended/_tabs-extended.scss index ab144ad9e63..6c144b8967f 100644 --- a/packages/styles/scss/components/tabs-extended/_tabs-extended.scss +++ b/packages/styles/scss/components/tabs-extended/_tabs-extended.scss @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2016, 2021 + * Copyright IBM Corp. 2016, 2022 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -26,7 +26,7 @@ .#{$prefix}--tabs__nav-item { min-height: $spacing-09; - width: $spacing-13; + width: calc(100% / (12 / 2) - (#{$spacing-01} / 2)); height: auto; p { @@ -68,7 +68,7 @@ border: initial; border-bottom: carbon--rem(2px) solid $ui-03; display: inline-flex; - width: $spacing-13; + width: 100%; text-align: left; &[hasTooltip] { diff --git a/packages/web-components/src/components/tabs-extended-media/__stories__/tabs-extended-media.stories.ts b/packages/web-components/src/components/tabs-extended-media/__stories__/tabs-extended-media.stories.ts index 184fd0094f6..fba62aff63c 100644 --- a/packages/web-components/src/components/tabs-extended-media/__stories__/tabs-extended-media.stories.ts +++ b/packages/web-components/src/components/tabs-extended-media/__stories__/tabs-extended-media.stories.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2021 + * Copyright IBM Corp. 2020, 2022 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree.