From 06f67ea130a6e8f50cde416d3416ad85301b7a3c Mon Sep 17 00:00:00 2001 From: guidari Date: Wed, 27 Sep 2023 15:02:15 -0300 Subject: [PATCH 1/7] feat: added layer toke in the background color --- .../StructuredList/StructuredList-test.e2e.js | 8 ++ .../StructuredList/StructuredList.stories.js | 74 ++++++++++++------- .../StructuredList/structuredList.scss | 5 ++ .../structured-list/_structured-list.scss | 6 +- 4 files changed, 64 insertions(+), 29 deletions(-) create mode 100644 packages/react/src/components/StructuredList/structuredList.scss diff --git a/e2e/components/StructuredList/StructuredList-test.e2e.js b/e2e/components/StructuredList/StructuredList-test.e2e.js index 9436a5c9655c..635cbc50a91b 100644 --- a/e2e/components/StructuredList/StructuredList-test.e2e.js +++ b/e2e/components/StructuredList/StructuredList-test.e2e.js @@ -22,6 +22,14 @@ test.describe('StructuredList', () => { }); }); + test('with layer @vrt', async ({ page }) => { + await snapshotStory(page, { + component: 'StructuredList', + id: 'components-structuredlist--with-layer', + theme, + }); + }); + test('selection @vrt', async ({ page }) => { await snapshotStory(page, { component: 'StructuredList', diff --git a/packages/react/src/components/StructuredList/StructuredList.stories.js b/packages/react/src/components/StructuredList/StructuredList.stories.js index 1f8ccaa5e2a7..f017ccbceee3 100644 --- a/packages/react/src/components/StructuredList/StructuredList.stories.js +++ b/packages/react/src/components/StructuredList/StructuredList.stories.js @@ -8,6 +8,7 @@ import React from 'react'; import { CheckmarkFilled } from '@carbon/icons-react'; import mdx from './StructuredList.mdx'; +import './structuredList.scss'; import { StructuredListWrapper, @@ -102,35 +103,36 @@ Default.argTypes = { }, }; +const structuredListBodyRowGenerator = (numRows) => { + return Array.apply(null, Array(numRows)).map((n, i) => ( + + Row {i} + Row {i} + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, + finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel + euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a + porttitor interdum. + + + + + select an option + + + + )); +}; + export const Selection = (args) => { - const structuredListBodyRowGenerator = (numRows) => { - return Array.apply(null, Array(numRows)).map((n, i) => ( - - Row {i} - Row {i} - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui - magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere - sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque - vulputate nisl a porttitor interdum. - - - - - select an option - - - - )); - }; return ( @@ -160,6 +162,22 @@ Selection.argTypes = { }, }; +export const WithBackgroundLayer = (args) => ( + + + + ColumnA + ColumnB + ColumnC + + + {structuredListBodyRowGenerator(4)} + +); + export const Skeleton = (args) => (
diff --git a/packages/react/src/components/StructuredList/structuredList.scss b/packages/react/src/components/StructuredList/structuredList.scss new file mode 100644 index 000000000000..cf7efed0d527 --- /dev/null +++ b/packages/react/src/components/StructuredList/structuredList.scss @@ -0,0 +1,5 @@ +@use '@carbon/react/scss/theme' with ( + $theme: ( + layer: red, + ) +); diff --git a/packages/styles/scss/components/structured-list/_structured-list.scss b/packages/styles/scss/components/structured-list/_structured-list.scss index 6ed22b18bf39..f31dcc964755 100644 --- a/packages/styles/scss/components/structured-list/_structured-list.scss +++ b/packages/styles/scss/components/structured-list/_structured-list.scss @@ -32,7 +32,7 @@ display: table; - background-color: transparent; + background-color: $layer transparent; border-collapse: collapse; border-spacing: 0; inline-size: 100%; @@ -72,6 +72,10 @@ } } + .#{$prefix}--with-layer { + background-color: $layer; + } + .#{$prefix}--structured-list-row { display: table-row; border-block-start: 1px solid $border-subtle; From 28db6c4963a498875c1c3adef947ac16feeb568e Mon Sep 17 00:00:00 2001 From: guidari Date: Wed, 27 Sep 2023 15:10:47 -0300 Subject: [PATCH 2/7] fix: remove scss --- .../src/components/StructuredList/StructuredList.stories.js | 3 +-- .../react/src/components/StructuredList/structuredList.scss | 5 ----- .../scss/components/structured-list/_structured-list.scss | 4 ---- 3 files changed, 1 insertion(+), 11 deletions(-) delete mode 100644 packages/react/src/components/StructuredList/structuredList.scss diff --git a/packages/react/src/components/StructuredList/StructuredList.stories.js b/packages/react/src/components/StructuredList/StructuredList.stories.js index f017ccbceee3..c2cc34ad78d8 100644 --- a/packages/react/src/components/StructuredList/StructuredList.stories.js +++ b/packages/react/src/components/StructuredList/StructuredList.stories.js @@ -8,7 +8,6 @@ import React from 'react'; import { CheckmarkFilled } from '@carbon/icons-react'; import mdx from './StructuredList.mdx'; -import './structuredList.scss'; import { StructuredListWrapper, @@ -166,7 +165,7 @@ export const WithBackgroundLayer = (args) => ( + className={`${prefix}--with-background-layer`}> ColumnA diff --git a/packages/react/src/components/StructuredList/structuredList.scss b/packages/react/src/components/StructuredList/structuredList.scss deleted file mode 100644 index cf7efed0d527..000000000000 --- a/packages/react/src/components/StructuredList/structuredList.scss +++ /dev/null @@ -1,5 +0,0 @@ -@use '@carbon/react/scss/theme' with ( - $theme: ( - layer: red, - ) -); diff --git a/packages/styles/scss/components/structured-list/_structured-list.scss b/packages/styles/scss/components/structured-list/_structured-list.scss index f31dcc964755..3618aaa07f34 100644 --- a/packages/styles/scss/components/structured-list/_structured-list.scss +++ b/packages/styles/scss/components/structured-list/_structured-list.scss @@ -72,10 +72,6 @@ } } - .#{$prefix}--with-layer { - background-color: $layer; - } - .#{$prefix}--structured-list-row { display: table-row; border-block-start: 1px solid $border-subtle; From 59f0c5e3122f8d4ea0fb860ee1475bb43c3e4c70 Mon Sep 17 00:00:00 2001 From: guidari Date: Wed, 27 Sep 2023 15:12:58 -0300 Subject: [PATCH 3/7] fix: fixed vrt test name --- e2e/components/StructuredList/StructuredList-test.e2e.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/e2e/components/StructuredList/StructuredList-test.e2e.js b/e2e/components/StructuredList/StructuredList-test.e2e.js index 635cbc50a91b..df52b97a8241 100644 --- a/e2e/components/StructuredList/StructuredList-test.e2e.js +++ b/e2e/components/StructuredList/StructuredList-test.e2e.js @@ -25,7 +25,7 @@ test.describe('StructuredList', () => { test('with layer @vrt', async ({ page }) => { await snapshotStory(page, { component: 'StructuredList', - id: 'components-structuredlist--with-layer', + id: 'components-structuredlist--with-background-layer', theme, }); }); From 6c11d698980286b452670e6caffe18169bde4456 Mon Sep 17 00:00:00 2001 From: guidari Date: Wed, 27 Sep 2023 15:37:20 -0300 Subject: [PATCH 4/7] fix: added background style --- .../scss/components/structured-list/_structured-list.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/styles/scss/components/structured-list/_structured-list.scss b/packages/styles/scss/components/structured-list/_structured-list.scss index 3618aaa07f34..ab7636d18d89 100644 --- a/packages/styles/scss/components/structured-list/_structured-list.scss +++ b/packages/styles/scss/components/structured-list/_structured-list.scss @@ -72,6 +72,10 @@ } } + .#{$prefix}--with-background-layer { + background-color: $layer; + } + .#{$prefix}--structured-list-row { display: table-row; border-block-start: 1px solid $border-subtle; From e1baab3c58f031fd432652921f5c1a279df76991 Mon Sep 17 00:00:00 2001 From: guidari Date: Tue, 14 Nov 2023 12:52:36 -0300 Subject: [PATCH 5/7] fix: removed storybook and vrt testing --- config/typescript-config-carbon/index.d.ts | 4 ++ config/typescript-config-carbon/index.js | 56 +++++++++++++++++++ .../StructuredList/StructuredList-test.e2e.js | 8 --- packages/react/icons/index.d.ts | 7 +++ .../StructuredList/StructuredList.stories.js | 16 ------ .../structured-list/_structured-list.scss | 4 -- 6 files changed, 67 insertions(+), 28 deletions(-) create mode 100644 config/typescript-config-carbon/index.d.ts create mode 100644 config/typescript-config-carbon/index.js create mode 100644 packages/react/icons/index.d.ts diff --git a/config/typescript-config-carbon/index.d.ts b/config/typescript-config-carbon/index.d.ts new file mode 100644 index 000000000000..c21516c4dfa1 --- /dev/null +++ b/config/typescript-config-carbon/index.d.ts @@ -0,0 +1,4 @@ +import ts from 'typescript'; +export declare const diagnosticToMessage: (diagnostic: ts.Diagnostic) => string; +export declare const loadTsCompilerOpts: (path: string) => ts.CompilerOptions; +export declare const loadBaseTsCompilerOpts: () => ts.CompilerOptions; diff --git a/config/typescript-config-carbon/index.js b/config/typescript-config-carbon/index.js new file mode 100644 index 000000000000..c760a443f0e5 --- /dev/null +++ b/config/typescript-config-carbon/index.js @@ -0,0 +1,56 @@ +'use strict'; +var __importDefault = + (this && this.__importDefault) || + function (mod) { + return mod && mod.__esModule ? mod : { default: mod }; + }; +Object.defineProperty(exports, '__esModule', { value: true }); +exports.loadBaseTsCompilerOpts = + exports.loadTsCompilerOpts = + exports.diagnosticToMessage = + void 0; +/** + * Copyright IBM Corp. 2023 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ +const path_1 = __importDefault(require('path')); +const typescript_1 = __importDefault(require('typescript')); +const tsConfigFile = path_1.default.join(__dirname, 'tsconfig.base.json'); +const diagnosticToMessage = (diagnostic) => { + const { file, messageText } = diagnostic; + const filePrefix = file ? `${file.fileName}: ` : ''; + const text = typescript_1.default.flattenDiagnosticMessageText( + messageText, + '\n' + ); + return `${filePrefix}${text}`; +}; +exports.diagnosticToMessage = diagnosticToMessage; +const loadTsCompilerOpts = (path) => { + const { config, error } = typescript_1.default.readConfigFile( + path, + typescript_1.default.sys.readFile + ); + if (error) { + throw new Error((0, exports.diagnosticToMessage)(error)); + } + const opts = typescript_1.default.convertCompilerOptionsFromJson( + config.compilerOptions, + '' + ); + const { errors } = opts; + if (errors.length > 0) { + errors.forEach((diagnostic) => { + console.log((0, exports.diagnosticToMessage)(diagnostic)); + }); + throw new Error('Base TypeScript config file errors found'); + } + return opts.options; +}; +exports.loadTsCompilerOpts = loadTsCompilerOpts; +const loadBaseTsCompilerOpts = () => { + return (0, exports.loadTsCompilerOpts)(tsConfigFile); +}; +exports.loadBaseTsCompilerOpts = loadBaseTsCompilerOpts; diff --git a/e2e/components/StructuredList/StructuredList-test.e2e.js b/e2e/components/StructuredList/StructuredList-test.e2e.js index df52b97a8241..9436a5c9655c 100644 --- a/e2e/components/StructuredList/StructuredList-test.e2e.js +++ b/e2e/components/StructuredList/StructuredList-test.e2e.js @@ -22,14 +22,6 @@ test.describe('StructuredList', () => { }); }); - test('with layer @vrt', async ({ page }) => { - await snapshotStory(page, { - component: 'StructuredList', - id: 'components-structuredlist--with-background-layer', - theme, - }); - }); - test('selection @vrt', async ({ page }) => { await snapshotStory(page, { component: 'StructuredList', diff --git a/packages/react/icons/index.d.ts b/packages/react/icons/index.d.ts new file mode 100644 index 000000000000..9325d7da76fe --- /dev/null +++ b/packages/react/icons/index.d.ts @@ -0,0 +1,7 @@ +/** + * Copyright IBM Corp. 2016, 2023 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ +export * from '@carbon/icons-react'; diff --git a/packages/react/src/components/StructuredList/StructuredList.stories.js b/packages/react/src/components/StructuredList/StructuredList.stories.js index c2cc34ad78d8..13dd98aa72c9 100644 --- a/packages/react/src/components/StructuredList/StructuredList.stories.js +++ b/packages/react/src/components/StructuredList/StructuredList.stories.js @@ -161,22 +161,6 @@ Selection.argTypes = { }, }; -export const WithBackgroundLayer = (args) => ( - - - - ColumnA - ColumnB - ColumnC - - - {structuredListBodyRowGenerator(4)} - -); - export const Skeleton = (args) => (
diff --git a/packages/styles/scss/components/structured-list/_structured-list.scss b/packages/styles/scss/components/structured-list/_structured-list.scss index ab7636d18d89..3618aaa07f34 100644 --- a/packages/styles/scss/components/structured-list/_structured-list.scss +++ b/packages/styles/scss/components/structured-list/_structured-list.scss @@ -72,10 +72,6 @@ } } - .#{$prefix}--with-background-layer { - background-color: $layer; - } - .#{$prefix}--structured-list-row { display: table-row; border-block-start: 1px solid $border-subtle; From 462e33a059bb67ade04c156084a7623474477c3e Mon Sep 17 00:00:00 2001 From: guidari Date: Tue, 14 Nov 2023 13:10:43 -0300 Subject: [PATCH 6/7] fix: added layer stories --- .../StructuredList/StructuredList-test.e2e.js | 8 ++++++++ .../StructuredList/StructuredList.stories.js | 18 ++++++++++++++++++ 2 files changed, 26 insertions(+) diff --git a/e2e/components/StructuredList/StructuredList-test.e2e.js b/e2e/components/StructuredList/StructuredList-test.e2e.js index 9436a5c9655c..df52b97a8241 100644 --- a/e2e/components/StructuredList/StructuredList-test.e2e.js +++ b/e2e/components/StructuredList/StructuredList-test.e2e.js @@ -22,6 +22,14 @@ test.describe('StructuredList', () => { }); }); + test('with layer @vrt', async ({ page }) => { + await snapshotStory(page, { + component: 'StructuredList', + id: 'components-structuredlist--with-background-layer', + theme, + }); + }); + test('selection @vrt', async ({ page }) => { await snapshotStory(page, { component: 'StructuredList', diff --git a/packages/react/src/components/StructuredList/StructuredList.stories.js b/packages/react/src/components/StructuredList/StructuredList.stories.js index 13dd98aa72c9..77fcbbee84ad 100644 --- a/packages/react/src/components/StructuredList/StructuredList.stories.js +++ b/packages/react/src/components/StructuredList/StructuredList.stories.js @@ -8,6 +8,7 @@ import React from 'react'; import { CheckmarkFilled } from '@carbon/icons-react'; import mdx from './StructuredList.mdx'; +import { WithLayer } from '../../../.storybook/templates/WithLayer'; import { StructuredListWrapper, @@ -161,6 +162,23 @@ Selection.argTypes = { }, }; +export const WithBackgroundLayer = () => ( + + + + + ColumnA + ColumnB + ColumnC + + + + {structuredListBodyRowGenerator(4)} + + + +); + export const Skeleton = (args) => (
From 4683609cd25c18e525a364429ae84f9fe819e282 Mon Sep 17 00:00:00 2001 From: guidari Date: Tue, 14 Nov 2023 16:28:27 -0300 Subject: [PATCH 7/7] fix: removed wrong files --- config/typescript-config-carbon/index.d.ts | 4 -- config/typescript-config-carbon/index.js | 56 ---------------------- packages/react/icons/index.d.ts | 7 --- 3 files changed, 67 deletions(-) delete mode 100644 config/typescript-config-carbon/index.d.ts delete mode 100644 config/typescript-config-carbon/index.js delete mode 100644 packages/react/icons/index.d.ts diff --git a/config/typescript-config-carbon/index.d.ts b/config/typescript-config-carbon/index.d.ts deleted file mode 100644 index c21516c4dfa1..000000000000 --- a/config/typescript-config-carbon/index.d.ts +++ /dev/null @@ -1,4 +0,0 @@ -import ts from 'typescript'; -export declare const diagnosticToMessage: (diagnostic: ts.Diagnostic) => string; -export declare const loadTsCompilerOpts: (path: string) => ts.CompilerOptions; -export declare const loadBaseTsCompilerOpts: () => ts.CompilerOptions; diff --git a/config/typescript-config-carbon/index.js b/config/typescript-config-carbon/index.js deleted file mode 100644 index c760a443f0e5..000000000000 --- a/config/typescript-config-carbon/index.js +++ /dev/null @@ -1,56 +0,0 @@ -'use strict'; -var __importDefault = - (this && this.__importDefault) || - function (mod) { - return mod && mod.__esModule ? mod : { default: mod }; - }; -Object.defineProperty(exports, '__esModule', { value: true }); -exports.loadBaseTsCompilerOpts = - exports.loadTsCompilerOpts = - exports.diagnosticToMessage = - void 0; -/** - * Copyright IBM Corp. 2023 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ -const path_1 = __importDefault(require('path')); -const typescript_1 = __importDefault(require('typescript')); -const tsConfigFile = path_1.default.join(__dirname, 'tsconfig.base.json'); -const diagnosticToMessage = (diagnostic) => { - const { file, messageText } = diagnostic; - const filePrefix = file ? `${file.fileName}: ` : ''; - const text = typescript_1.default.flattenDiagnosticMessageText( - messageText, - '\n' - ); - return `${filePrefix}${text}`; -}; -exports.diagnosticToMessage = diagnosticToMessage; -const loadTsCompilerOpts = (path) => { - const { config, error } = typescript_1.default.readConfigFile( - path, - typescript_1.default.sys.readFile - ); - if (error) { - throw new Error((0, exports.diagnosticToMessage)(error)); - } - const opts = typescript_1.default.convertCompilerOptionsFromJson( - config.compilerOptions, - '' - ); - const { errors } = opts; - if (errors.length > 0) { - errors.forEach((diagnostic) => { - console.log((0, exports.diagnosticToMessage)(diagnostic)); - }); - throw new Error('Base TypeScript config file errors found'); - } - return opts.options; -}; -exports.loadTsCompilerOpts = loadTsCompilerOpts; -const loadBaseTsCompilerOpts = () => { - return (0, exports.loadTsCompilerOpts)(tsConfigFile); -}; -exports.loadBaseTsCompilerOpts = loadBaseTsCompilerOpts; diff --git a/packages/react/icons/index.d.ts b/packages/react/icons/index.d.ts deleted file mode 100644 index 9325d7da76fe..000000000000 --- a/packages/react/icons/index.d.ts +++ /dev/null @@ -1,7 +0,0 @@ -/** - * Copyright IBM Corp. 2016, 2023 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ -export * from '@carbon/icons-react';