From ef51d6f373af0019dedf786883ef4efb878882d0 Mon Sep 17 00:00:00 2001 From: Bruno Amorim Date: Wed, 4 Oct 2023 11:25:52 -0300 Subject: [PATCH 1/7] fix(pricing-table): cell items were being horizontally squished into the cell --- .../styles/scss/components/pricing-table/_pricing-table.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/styles/scss/components/pricing-table/_pricing-table.scss b/packages/styles/scss/components/pricing-table/_pricing-table.scss index c6f743d80e2..81349cd4245 100644 --- a/packages/styles/scss/components/pricing-table/_pricing-table.scss +++ b/packages/styles/scss/components/pricing-table/_pricing-table.scss @@ -155,6 +155,7 @@ .#{$prefix}--pricing-table-cell-content { display: flex; + flex-direction: column; align-items: start; line-height: 1.25rem; From c6bf2e360b0dd2c0963d30538313acdeae345293 Mon Sep 17 00:00:00 2001 From: Bruno Amorim Date: Wed, 4 Oct 2023 16:32:21 -0300 Subject: [PATCH 2/7] fix(pricing-table): replicanting the test that generated the issue in the stories --- .../pricing-table/__stories__/pricing-table.stories.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/web-components/src/components/pricing-table/__stories__/pricing-table.stories.ts b/packages/web-components/src/components/pricing-table/__stories__/pricing-table.stories.ts index b763437b807..06e0eb64bfa 100644 --- a/packages/web-components/src/components/pricing-table/__stories__/pricing-table.stories.ts +++ b/packages/web-components/src/components/pricing-table/__stories__/pricing-table.stories.ts @@ -151,6 +151,16 @@ const renderBodyCell = ( Sed quis neque ultrices, convallis augue non, scelerisque massa. + + This is a tag + This is a tag + + + Lorem Ipsum + `; case CELL_TYPES.ICON: From bbe4d04ff4cfb18c8968e3b4883d09406517a092 Mon Sep 17 00:00:00 2001 From: Bruno Amorim Date: Tue, 10 Oct 2023 16:16:44 -0300 Subject: [PATCH 3/7] fix(pricing-table): fixing the items alignment when the cell type is icon --- .../components/structured-list/_structured-list.scss | 4 ++++ .../pricing-table/__stories__/pricing-table.stories.ts | 4 ++++ .../components/structured-list/structured-list-cell.ts | 10 +++++++--- 3 files changed, 15 insertions(+), 3 deletions(-) diff --git a/packages/styles/scss/components/structured-list/_structured-list.scss b/packages/styles/scss/components/structured-list/_structured-list.scss index 21960336853..74508bffb59 100644 --- a/packages/styles/scss/components/structured-list/_structured-list.scss +++ b/packages/styles/scss/components/structured-list/_structured-list.scss @@ -251,6 +251,10 @@ } } + .#{$prefix}--structured-list-cell-icon-text-container { + display: flex; + } + .#{$prefix}--structured-list-cell-icon-text, :host(#{$dds-prefix}-structured-list-cell) .#{$prefix}--structured-list-cell-icon-text { diff --git a/packages/web-components/src/components/pricing-table/__stories__/pricing-table.stories.ts b/packages/web-components/src/components/pricing-table/__stories__/pricing-table.stories.ts index 06e0eb64bfa..51af4cc484a 100644 --- a/packages/web-components/src/components/pricing-table/__stories__/pricing-table.stories.ts +++ b/packages/web-components/src/components/pricing-table/__stories__/pricing-table.stories.ts @@ -170,6 +170,10 @@ const renderBodyCell = ( Sed quis neque ultrices, convallis augue non, scelerisque massa. + + This is a tag + This is a tag + `; default: diff --git a/packages/web-components/src/components/structured-list/structured-list-cell.ts b/packages/web-components/src/components/structured-list/structured-list-cell.ts index 9ab1e65ac17..891a88ef48c 100644 --- a/packages/web-components/src/components/structured-list/structured-list-cell.ts +++ b/packages/web-components/src/components/structured-list/structured-list-cell.ts @@ -17,6 +17,7 @@ import DDSStructuredListGroup from './structured-list-group'; import styles from './structured-list.scss'; import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js'; import settings from 'carbon-components/es/globals/js/settings'; +import { ifDefined } from 'lit-html/directives/if-defined.js'; const { prefix } = settings; const { stablePrefix: ddsPrefix } = ddsSettings; @@ -57,10 +58,13 @@ class DDSStructuredListCell extends BXStructuredListCell { private _renderIcon() { const { icon, _iconsAllowed: iconMap } = this; - return html`${iconMap[icon!.toLowerCase()].call()} + return html`
+ ${iconMap[icon!.toLowerCase()].call()} - `; + +
`; } private _renderTags() { @@ -81,7 +85,7 @@ class DDSStructuredListCell extends BXStructuredListCell { return html` ${Info16()} From ca628ff2bd64513b5b3ead0016961475178f1a71 Mon Sep 17 00:00:00 2001 From: Bruno Amorim Date: Fri, 13 Oct 2023 15:35:45 -0300 Subject: [PATCH 4/7] fix(pricing-table): removing unecessary css properties --- .../styles/scss/components/pricing-table/_pricing-table.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/styles/scss/components/pricing-table/_pricing-table.scss b/packages/styles/scss/components/pricing-table/_pricing-table.scss index 81349cd4245..e597a054a8c 100644 --- a/packages/styles/scss/components/pricing-table/_pricing-table.scss +++ b/packages/styles/scss/components/pricing-table/_pricing-table.scss @@ -154,9 +154,6 @@ } .#{$prefix}--pricing-table-cell-content { - display: flex; - flex-direction: column; - align-items: start; line-height: 1.25rem; svg { From 2cfe59bfe87f5965f1e2c0ea456a01225807e3e4 Mon Sep 17 00:00:00 2001 From: Bruno Amorim Date: Thu, 19 Oct 2023 14:46:41 -0300 Subject: [PATCH 5/7] fix(pricing-table): adding more space between the items the row 3 example from the stories --- .../__stories__/pricing-table.stories.scss | 5 ++++ .../__stories__/pricing-table.stories.ts | 24 +++++++++++-------- 2 files changed, 19 insertions(+), 10 deletions(-) diff --git a/packages/web-components/src/components/pricing-table/__stories__/pricing-table.stories.scss b/packages/web-components/src/components/pricing-table/__stories__/pricing-table.stories.scss index ce6e55032bf..1097136cf63 100644 --- a/packages/web-components/src/components/pricing-table/__stories__/pricing-table.stories.scss +++ b/packages/web-components/src/components/pricing-table/__stories__/pricing-table.stories.scss @@ -6,3 +6,8 @@ // @import '@carbon/ibmdotcom-styles/scss/globals/vars'; + +span { + margin-top: 1rem; + display: block; +} diff --git a/packages/web-components/src/components/pricing-table/__stories__/pricing-table.stories.ts b/packages/web-components/src/components/pricing-table/__stories__/pricing-table.stories.ts index ba7af48d249..dad8c8feba3 100644 --- a/packages/web-components/src/components/pricing-table/__stories__/pricing-table.stories.ts +++ b/packages/web-components/src/components/pricing-table/__stories__/pricing-table.stories.ts @@ -151,16 +151,20 @@ const renderBodyCell = ( Sed quis neque ultrices, convallis augue non, scelerisque massa. - - This is a tag - This is a tag - - - Lorem Ipsum - + + + This is a tag + This is a tag + + + + + Lorem Ipsum + + `; case CELL_TYPES.ICON: From 87dc6c1c0efa36885b4d7288603ad5aef47df4f4 Mon Sep 17 00:00:00 2001 From: Bruno Amorim Date: Mon, 23 Oct 2023 10:20:15 -0300 Subject: [PATCH 6/7] fix(pricing-table): changing and fixing the dummy content for stories --- .../__stories__/pricing-table.stories.scss | 5 ++- .../__stories__/pricing-table.stories.ts | 41 +++++++++---------- 2 files changed, 23 insertions(+), 23 deletions(-) diff --git a/packages/web-components/src/components/pricing-table/__stories__/pricing-table.stories.scss b/packages/web-components/src/components/pricing-table/__stories__/pricing-table.stories.scss index 1097136cf63..3e3d43fafd0 100644 --- a/packages/web-components/src/components/pricing-table/__stories__/pricing-table.stories.scss +++ b/packages/web-components/src/components/pricing-table/__stories__/pricing-table.stories.scss @@ -6,8 +6,9 @@ // @import '@carbon/ibmdotcom-styles/scss/globals/vars'; +@import '@carbon/ibmdotcom-styles/scss/globals/imports'; -span { - margin-top: 1rem; +.example-text + .example-text { + margin-top: $spacing-05; display: block; } diff --git a/packages/web-components/src/components/pricing-table/__stories__/pricing-table.stories.ts b/packages/web-components/src/components/pricing-table/__stories__/pricing-table.stories.ts index dad8c8feba3..b50a1e91bb1 100644 --- a/packages/web-components/src/components/pricing-table/__stories__/pricing-table.stories.ts +++ b/packages/web-components/src/components/pricing-table/__stories__/pricing-table.stories.ts @@ -145,26 +145,19 @@ const renderBodyCell = ( case CELL_TYPES.TEXT: return html` - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui - magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere - sem vel euismod dignissim. + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui + magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere + sem vel euismod dignissim. + + + Donec metus dui, pharetra sit amet dui eu, posuere imperdiet leo. + Mauris vel quam vitae sem tincidunt pharetra. Etiam luctus placerat + orci, non ultricies augue. + Sed quis neque ultrices, convallis augue non, scelerisque massa. - - - This is a tag - This is a tag - - - - - Lorem Ipsum - - `; case CELL_TYPES.ICON: @@ -174,10 +167,16 @@ const renderBodyCell = ( Sed quis neque ultrices, convallis augue non, scelerisque massa. - - This is a tag - This is a tag - + + Donec metus dui, pharetra sit amet dui eu, posuere imperdiet leo. + Mauris vel quam vitae sem tincidunt pharetra. Etiam luctus placerat + orci, non ultricies augue. + + + Donec metus dui, pharetra sit amet dui eu, posuere imperdiet leo. + Mauris vel quam vitae sem tincidunt pharetra. Etiam luctus placerat + orci, non ultricies augue + `; default: From 6e424fc093b5b45164e2c5382652a87590d47b4d Mon Sep 17 00:00:00 2001 From: Bruno Amorim Date: Mon, 13 Nov 2023 11:52:25 -0300 Subject: [PATCH 7/7] removing text from row with icon for stories --- .../pricing-table/__stories__/pricing-table.stories.ts | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/packages/web-components/src/components/pricing-table/__stories__/pricing-table.stories.ts b/packages/web-components/src/components/pricing-table/__stories__/pricing-table.stories.ts index b50a1e91bb1..4beb899982d 100644 --- a/packages/web-components/src/components/pricing-table/__stories__/pricing-table.stories.ts +++ b/packages/web-components/src/components/pricing-table/__stories__/pricing-table.stories.ts @@ -167,16 +167,6 @@ const renderBodyCell = ( Sed quis neque ultrices, convallis augue non, scelerisque massa. - - Donec metus dui, pharetra sit amet dui eu, posuere imperdiet leo. - Mauris vel quam vitae sem tincidunt pharetra. Etiam luctus placerat - orci, non ultricies augue. - - - Donec metus dui, pharetra sit amet dui eu, posuere imperdiet leo. - Mauris vel quam vitae sem tincidunt pharetra. Etiam luctus placerat - orci, non ultricies augue - `; default: