diff --git a/packages/components/src/components/Actions/Actions.jsx b/packages/components/src/components/Actions/Actions.jsx index 74c156e2d..b14bdaa9f 100644 --- a/packages/components/src/components/Actions/Actions.jsx +++ b/packages/components/src/components/Actions/Actions.jsx @@ -19,9 +19,12 @@ import { OverflowMenuItem } from 'carbon-components-react'; import { CaretDown16 } from '@carbon/icons-react'; +import { getCarbonPrefix } from '@tektoncd/dashboard-utils'; import Modal from '../Modal'; +const carbonPrefix = getCarbonPrefix(); + class Actions extends Component { state = { showDialog: false }; @@ -109,10 +112,10 @@ class Actions extends Component { ? iconProps => ( {title} - + ) : undefined diff --git a/packages/components/src/components/DataTableSkeleton/DataTableSkeleton.jsx b/packages/components/src/components/DataTableSkeleton/DataTableSkeleton.jsx index b62ccad7a..2fdceb86e 100644 --- a/packages/components/src/components/DataTableSkeleton/DataTableSkeleton.jsx +++ b/packages/components/src/components/DataTableSkeleton/DataTableSkeleton.jsx @@ -14,13 +14,16 @@ limitations under the License. import PropTypes from 'prop-types'; import React from 'react'; +import { getCarbonPrefix } from '@tektoncd/dashboard-utils'; + +const carbonPrefix = getCarbonPrefix(); const tableSizeClassNames = { - xs: 'bx--data-table--xs', - sm: 'bx--data-table--sm', - md: 'bx--data-table--md', - lg: 'bx--data-table--lg', - xl: 'bx--data-table--xl' + xs: `${carbonPrefix}--data-table--xs`, + sm: `${carbonPrefix}--data-table--sm`, + md: `${carbonPrefix}--data-table--md`, + lg: `${carbonPrefix}--data-table--lg`, + xl: `${carbonPrefix}--data-table--xl` }; const defaults = { @@ -51,7 +54,7 @@ const DataTableSkeleton = ({ return ( diff --git a/packages/components/src/components/DataTableSkeleton/DataTableSkeleton.scss b/packages/components/src/components/DataTableSkeleton/DataTableSkeleton.scss index 16b71d890..9cb4266f8 100644 --- a/packages/components/src/components/DataTableSkeleton/DataTableSkeleton.scss +++ b/packages/components/src/components/DataTableSkeleton/DataTableSkeleton.scss @@ -12,7 +12,7 @@ limitations under the License. */ @import 'carbon-components/scss/globals/scss/helper-mixins'; -.tkn--data-table-skeleton.bx--data-table.bx--skeleton { +.tkn--data-table-skeleton.#{$prefix}--data-table.#{$prefix}--skeleton { th { vertical-align: middle; diff --git a/packages/components/src/components/Header/Header.scss b/packages/components/src/components/Header/Header.scss index 56a68048a..6ef7b0bf3 100644 --- a/packages/components/src/components/Header/Header.scss +++ b/packages/components/src/components/Header/Header.scss @@ -1,5 +1,5 @@ /* -Copyright 2019-2022 The Tekton Authors +Copyright 2019-2023 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -11,8 +11,8 @@ See the License for the specific language governing permissions and limitations under the License. */ -header.bx--header.tkn--header { - .bx--list-box__wrapper { +header.#{$prefix}--header.tkn--header { + .#{$prefix}--list-box__wrapper { margin-top: 0.5rem; margin-right: 1rem; diff --git a/packages/components/src/components/KeyValueList/KeyValueList.scss b/packages/components/src/components/KeyValueList/KeyValueList.scss index 0af901e9f..84b06b00b 100644 --- a/packages/components/src/components/KeyValueList/KeyValueList.scss +++ b/packages/components/src/components/KeyValueList/KeyValueList.scss @@ -1,5 +1,5 @@ /* -Copyright 2019-2021 The Tekton Authors +Copyright 2019-2023 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -36,18 +36,18 @@ limitations under the License. align-items: center; margin-bottom: 5px; - .bx--form-item.bx--text-input-wrapper { + .#{$prefix}--form-item.#{$prefix}--text-input-wrapper { width: 48%; display: inline-flex; margin-bottom: 0; margin-right: $spacing-05; } - .bx--text-input-wrapper:first-child { + .#{$prefix}--text-input-wrapper:first-child { margin-right: $spacing-07; } - .bx--btn--ghost.bx--btn--icon-only { + .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only { &:focus, &:hover { svg, path { fill: $danger; diff --git a/packages/components/src/components/LabelFilter/LabelFilter.scss b/packages/components/src/components/LabelFilter/LabelFilter.scss index 0009fed9c..1f87f0aa5 100644 --- a/packages/components/src/components/LabelFilter/LabelFilter.scss +++ b/packages/components/src/components/LabelFilter/LabelFilter.scss @@ -1,5 +1,5 @@ /* -Copyright 2019-2021 The Tekton Authors +Copyright 2019-2023 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -25,12 +25,12 @@ limitations under the License. min-height: calc(#{$spacing-08} + #{$button-border-width} + 2px); margin-bottom: calc(#{$spacing-05} - #{$button-border-width}); - .bx--tag { + .#{$prefix}--tag { flex-shrink: 0; margin: $spacing-05 $spacing-03 0 0; } - .bx--btn { + .#{$prefix}--btn { margin-top: calc(#{$spacing-04} - 1px ); } } diff --git a/packages/components/src/components/Loading/Loading.jsx b/packages/components/src/components/Loading/Loading.jsx index d98a0e2d0..32ffc5ec6 100644 --- a/packages/components/src/components/Loading/Loading.jsx +++ b/packages/components/src/components/Loading/Loading.jsx @@ -15,6 +15,9 @@ limitations under the License. import React from 'react'; import { useIntl } from 'react-intl'; import { Loading as CarbonLoading } from 'carbon-components-react'; +import { getCarbonPrefix } from '@tektoncd/dashboard-utils'; + +const carbonPrefix = getCarbonPrefix(); export default function Loading({ message }) { const intl = useIntl(); @@ -27,7 +30,7 @@ export default function Loading({ message }) { }); } return ( -
+
{messageToDisplay}
diff --git a/packages/components/src/components/Loading/Loading.scss b/packages/components/src/components/Loading/Loading.scss index ff34f4c83..c0fc617ec 100644 --- a/packages/components/src/components/Loading/Loading.scss +++ b/packages/components/src/components/Loading/Loading.scss @@ -11,11 +11,11 @@ See the License for the specific language governing permissions and limitations under the License. */ -.bx--loading-overlay.tkn--loading-overlay { +.#{$prefix}--loading-overlay.tkn--loading-overlay { top: 3rem; flex-direction: column; - .bx--loading { + .#{$prefix}--loading { margin-top: -3rem; margin-bottom: $spacing-05; } diff --git a/packages/components/src/components/Log/Log.jsx b/packages/components/src/components/Log/Log.jsx index 42d038049..fd2671515 100644 --- a/packages/components/src/components/Log/Log.jsx +++ b/packages/components/src/components/Log/Log.jsx @@ -15,7 +15,11 @@ import React, { Component } from 'react'; import { Button, SkeletonText } from 'carbon-components-react'; import { FixedSizeList as List } from 'react-window'; import { injectIntl } from 'react-intl'; -import { getStepStatusReason, isRunning } from '@tektoncd/dashboard-utils'; +import { + getCarbonPrefix, + getStepStatusReason, + isRunning +} from '@tektoncd/dashboard-utils'; import { DownToBottom16, UpToTop16 } from '@carbon/icons-react'; import { @@ -27,6 +31,8 @@ import { import DotSpinner from '../DotSpinner'; import LogFormat from '../LogFormat'; +const carbonPrefix = getCarbonPrefix(); + const LogLine = ({ data, index, style }) => (
{`${data[index]}\n`} @@ -208,7 +214,7 @@ export class LogContainer extends Component {
{isLogTopUnseen ? ( ) : null} { - + {intl.formatMessage({ diff --git a/packages/components/src/components/Param/Param.scss b/packages/components/src/components/Param/Param.scss index 17c15b047..682764d41 100644 --- a/packages/components/src/components/Param/Param.scss +++ b/packages/components/src/components/Param/Param.scss @@ -1,5 +1,5 @@ /* -Copyright 2020 The Tekton Authors +Copyright 2020-2023 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -11,6 +11,6 @@ See the License for the specific language governing permissions and limitations under the License. */ -.tkn--param.bx--snippet--multi { +.tkn--param.#{$prefix}--snippet--multi { padding: 0; } diff --git a/packages/components/src/components/PipelineRuns/PipelineRuns.scss b/packages/components/src/components/PipelineRuns/PipelineRuns.scss index 75f7b643c..4bc45a674 100644 --- a/packages/components/src/components/PipelineRuns/PipelineRuns.scss +++ b/packages/components/src/components/PipelineRuns/PipelineRuns.scss @@ -27,10 +27,10 @@ limitations under the License. } } -.bx--modal .bx--tile-group { +.#{$prefix}--modal .#{$prefix}--tile-group { margin-top: 2rem; - .bx--tile { + .#{$prefix}--tile { &:not(:last-child) { margin-bottom: 0.5rem; } diff --git a/packages/components/src/components/StepDetails/StepDetails.scss b/packages/components/src/components/StepDetails/StepDetails.scss index 22867a9b9..8683f26e8 100644 --- a/packages/components/src/components/StepDetails/StepDetails.scss +++ b/packages/components/src/components/StepDetails/StepDetails.scss @@ -19,7 +19,7 @@ limitations under the License. align-items: stretch; overflow: hidden; - .bx--tab-content { + .#{$prefix}--tab-content { padding-left: 0; } } diff --git a/packages/components/src/components/Table/Table.scss b/packages/components/src/components/Table/Table.scss index 67d356f29..6db70eca7 100644 --- a/packages/components/src/components/Table/Table.scss +++ b/packages/components/src/components/Table/Table.scss @@ -1,5 +1,5 @@ /* -Copyright 2019-2022 The Tekton Authors +Copyright 2019-2023 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -17,26 +17,26 @@ limitations under the License. margin-top: $spacing-05; } - .bx--table-toolbar { + .#{$prefix}--table-toolbar { background: transparent; } - .bx--data-table.bx--data-table--short td.bx--table-expand { + .#{$prefix}--data-table.#{$prefix}--data-table--short td.#{$prefix}--table-expand { height: 2rem; } - .bx--data-table-header { + .#{$prefix}--data-table-header { padding-left: 0; padding-bottom: $spacing-03; } - .bx--data-table-container { + .#{$prefix}--data-table-container { margin-top: 0; width: 100%; } - .bx--data-table td { - &:not(.cell-actions):not(.bx--table-column-checkbox) { + .#{$prefix}--data-table td { + &:not(.cell-actions):not(.#{$prefix}--table-column-checkbox) { max-width: 10vw; vertical-align: middle; @@ -48,12 +48,12 @@ limitations under the License. } } - &.bx--table-column-checkbox { + &.#{$prefix}--table-column-checkbox { padding-top: 0; padding-bottom: 0; vertical-align: middle; - .bx--checkbox-label { + .#{$prefix}--checkbox-label { padding-left: $spacing-05; } } @@ -80,7 +80,7 @@ limitations under the License. } &.cell-actions { - .tkn--danger.bx--btn--ghost.bx--btn--icon-only { + .tkn--danger.#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only { &:focus, &:hover { svg, path { fill: $danger; @@ -98,7 +98,7 @@ limitations under the License. } &.tkn--table--inline-actions { - .bx--data-table td { + .#{$prefix}--data-table td { &.cell-actions { text-align: right; width: 8rem; @@ -107,27 +107,27 @@ limitations under the License. } &.tkn--table-with-filters { - .bx--data-table-container { + .#{$prefix}--data-table-container { overflow: visible; } - .bx--table-toolbar { + .#{$prefix}--table-toolbar { overflow: visible; flex-direction: row; - .bx--multi-select__wrapper { - .bx--combo-box { + .#{$prefix}--multi-select__wrapper { + .#{$prefix}--combo-box { border: none; } - .bx--text-input { + .#{$prefix}--text-input { background-color: $ui-01; border: none; } } - .bx--multi-select__wrapper, - .bx--dropdown__wrapper { + .#{$prefix}--multi-select__wrapper, + .#{$prefix}--dropdown__wrapper { background-color: $ui-01; display: flex; align-items: center; @@ -136,46 +136,46 @@ limitations under the License. padding-right: $spacing-03; white-space: nowrap; - .bx--label { + .#{$prefix}--label { padding-left: $spacing-05; } - .bx--text-input { + .#{$prefix}--text-input { padding: 0 $spacing-07 0 $spacing-03; } - .bx--list-box__menu-icon { + .#{$prefix}--list-box__menu-icon { right: $spacing-03; } - .bx--dropdown, - .bx--multi-select { + .#{$prefix}--dropdown, + .#{$prefix}--multi-select { width: 10rem; } - .bx--multi-select--inline, - .bx--list-box--inline { + .#{$prefix}--multi-select--inline, + .#{$prefix}--list-box--inline { background-color: $ui-01; height: 100%; max-height: 3rem; } - .bx--list-box__field { + .#{$prefix}--list-box__field { height: 100%; - input.bx--text-input { + input.#{$prefix}--text-input { &:placeholder-shown { text-overflow: ellipsis; } } } - &.bx--dropdown__wrapper--inline .bx--label { + &.#{$prefix}--dropdown__wrapper--inline .#{$prefix}--label { padding-left: 1rem; } @media (max-width: 672px) { - &.bx--list-box__wrapper--inline .bx--label { + &.#{$prefix}--list-box__wrapper--inline .#{$prefix}--label { display: none; } } @@ -187,7 +187,7 @@ limitations under the License. padding-top: 14px; padding-bottom: 14px; - &:not(.cell-actions):not(.bx--table-column-checkbox) > div { + &:not(.cell-actions):not(.#{$prefix}--table-column-checkbox) > div { display: flex; flex-direction: column; } @@ -196,7 +196,7 @@ limitations under the License. @include type-style('helper-text-01'); } - &.bx--table-column-checkbox { + &.#{$prefix}--table-column-checkbox { padding-top: 12px; vertical-align: baseline; } @@ -214,7 +214,7 @@ limitations under the License. } } - a.bx--link { + a.#{$prefix}--link { display: inline; } } diff --git a/packages/components/src/components/Task/Task.scss b/packages/components/src/components/Task/Task.scss index 9f224762d..ddc849d38 100644 --- a/packages/components/src/components/Task/Task.scss +++ b/packages/components/src/components/Task/Task.scss @@ -59,7 +59,7 @@ limitations under the License. flex-shrink: 0; } - > .bx--overflow-menu { + > .#{$prefix}--overflow-menu { flex-shrink: 0; margin-right: 10px; } @@ -79,7 +79,7 @@ limitations under the License. } } - .bx--dropdown__wrapper.bx--dropdown__wrapper--inline { + .#{$prefix}--dropdown__wrapper.#{$prefix}--dropdown__wrapper--inline { position: relative; left: -1.5rem; grid-gap: 0; @@ -106,7 +106,7 @@ limitations under the License. max-height: 350px; overflow: auto; - .bx--overflow-menu-options__option { + .#{$prefix}--overflow-menu-options__option { flex-shrink: 0; } } diff --git a/packages/components/src/components/TaskRunDetails/TaskRunDetails.scss b/packages/components/src/components/TaskRunDetails/TaskRunDetails.scss index e59f71148..cd0a61c79 100644 --- a/packages/components/src/components/TaskRunDetails/TaskRunDetails.scss +++ b/packages/components/src/components/TaskRunDetails/TaskRunDetails.scss @@ -18,15 +18,15 @@ limitations under the License. align-items: stretch; overflow: hidden; - .bx--content-switcher { + .#{$prefix}--content-switcher { margin-bottom: 1rem; } /* Allow columns in the params and results tables to grow to better fit their content */ - .bx--data-table td { - &:not(.cell-actions):not(.bx--table-column-checkbox) { + .#{$prefix}--data-table td { + &:not(.cell-actions):not(.#{$prefix}--table-column-checkbox) { max-width: none; } } diff --git a/packages/components/src/components/TaskRuns/TaskRuns.test.jsx b/packages/components/src/components/TaskRuns/TaskRuns.test.jsx index fd12ba33d..de6404be3 100644 --- a/packages/components/src/components/TaskRuns/TaskRuns.test.jsx +++ b/packages/components/src/components/TaskRuns/TaskRuns.test.jsx @@ -12,10 +12,13 @@ limitations under the License. */ import React from 'react'; +import { getCarbonPrefix } from '@tektoncd/dashboard-utils'; import { render, renderWithRouter } from '../../utils/test'; import TaskRuns from './TaskRuns'; +const carbonPrefix = getCarbonPrefix(); + it('TaskRuns renders empty state', () => { const { queryByText } = render(<TaskRuns taskRuns={[]} />); expect(queryByText(/no matching taskruns/i)).toBeTruthy(); @@ -27,7 +30,9 @@ it('TaskRuns renders headers state', () => { expect(queryByText('Run')).toBeTruthy(); expect(queryByText('Status')).toBeTruthy(); expect(queryByText('Task')).toBeTruthy(); - expect(document.getElementsByClassName('bx--overflow-menu')).toBeTruthy(); + expect( + document.getElementsByClassName(`${carbonPrefix}--overflow-menu`) + ).toBeTruthy(); }); it('TaskRuns renders correct data', async () => { diff --git a/packages/components/src/components/TooltipDropdown/TooltipDropdown.jsx b/packages/components/src/components/TooltipDropdown/TooltipDropdown.jsx index 13b3ba0dd..7752877b6 100644 --- a/packages/components/src/components/TooltipDropdown/TooltipDropdown.jsx +++ b/packages/components/src/components/TooltipDropdown/TooltipDropdown.jsx @@ -14,7 +14,9 @@ limitations under the License. import React from 'react'; import { useIntl } from 'react-intl'; import { ComboBox, DropdownSkeleton } from 'carbon-components-react'; -import { getTranslateWithId } from '@tektoncd/dashboard-utils'; +import { getCarbonPrefix, getTranslateWithId } from '@tektoncd/dashboard-utils'; + +const carbonPrefix = getCarbonPrefix(); const itemToString = item => (item ? item.text : ''); @@ -48,10 +50,12 @@ const TooltipDropdown = ({ const intl = useIntl(); if (loading) { return ( - <div className="bx--list-box__wrapper"> - {titleText && <span className="bx--label">{titleText}</span>} + <div className={`${carbonPrefix}--list-box__wrapper`}> + {titleText && ( + <span className={`${carbonPrefix}--label`}>{titleText}</span> + )} <DropdownSkeleton - className={`bx--combo-box ${className || ''}`} + className={`${carbonPrefix}--combo-box ${className || ''}`} id={id} inline={inline} /> diff --git a/packages/components/src/components/Trigger/Trigger.jsx b/packages/components/src/components/Trigger/Trigger.jsx index 1313410d9..4415a9acc 100644 --- a/packages/components/src/components/Trigger/Trigger.jsx +++ b/packages/components/src/components/Trigger/Trigger.jsx @@ -20,12 +20,14 @@ import { ListItem, UnorderedList } from 'carbon-components-react'; -import { urls } from '@tektoncd/dashboard-utils'; +import { getCarbonPrefix, urls } from '@tektoncd/dashboard-utils'; import CustomLink from '../Link'; import Table from '../Table'; import ViewYAML from '../ViewYAML'; +const carbonPrefix = getCarbonPrefix(); + const Trigger = ({ namespace, trigger }) => { const intl = useIntl(); const tableHeaders = [ @@ -289,7 +291,9 @@ const Trigger = ({ namespace, trigger }) => { defaultMessage: 'Filter:' })} </p> - <code className="bx--snippet--multi tkn--trigger-interceptor-cel-filter"> + <code + className={`${carbonPrefix}--snippet--multi tkn--trigger-interceptor-cel-filter`} + > {interceptor.cel.filter} </code> </> diff --git a/packages/components/src/components/ViewYAML/SyntaxHighlighter.jsx b/packages/components/src/components/ViewYAML/SyntaxHighlighter.jsx index d1170d782..d661c2fb0 100644 --- a/packages/components/src/components/ViewYAML/SyntaxHighlighter.jsx +++ b/packages/components/src/components/ViewYAML/SyntaxHighlighter.jsx @@ -14,6 +14,9 @@ limitations under the License. import React from 'react'; import jsYaml from 'js-yaml'; +import { getCarbonPrefix } from '@tektoncd/dashboard-utils'; + +const carbonPrefix = getCarbonPrefix(); function addLine({ addBullet, key, level, lines, path, rawString, value }) { let valueNode; @@ -193,7 +196,7 @@ export default function SyntaxHighlighter({ resource }) { return ( <pre - className="tkn--syntax-highlighter bx--snippet--multi hljs" + className={`tkn--syntax-highlighter ${carbonPrefix}--snippet--multi hljs`} style={{ '--tkn--line-number--min-width': minWidth }} > <code>{lines}</code> diff --git a/packages/components/src/components/ViewYAML/ViewYAML.jsx b/packages/components/src/components/ViewYAML/ViewYAML.jsx index 1d49276ec..1f74fe0cd 100644 --- a/packages/components/src/components/ViewYAML/ViewYAML.jsx +++ b/packages/components/src/components/ViewYAML/ViewYAML.jsx @@ -14,10 +14,12 @@ limitations under the License. import React from 'react'; import PropTypes from 'prop-types'; import jsYaml from 'js-yaml'; -import { classNames } from '@tektoncd/dashboard-utils'; +import { classNames, getCarbonPrefix } from '@tektoncd/dashboard-utils'; import SyntaxHighlighter from './SyntaxHighlighter'; +const carbonPrefix = getCarbonPrefix(); + function YAMLRaw({ children, className }) { return ( <div className={className}> @@ -39,7 +41,7 @@ function ViewYAML({ if (enableSyntaxHighlighting && typeof resource !== 'string') { yamlComponent = <SyntaxHighlighter resource={resource} />; } else { - const clz = classNames('bx--snippet--multi', className, { + const clz = classNames(`${carbonPrefix}--snippet--multi`, className, { 'tkn--view-yaml--dark': dark }); const yaml = jsYaml.dump(resource); diff --git a/packages/components/src/components/ViewYAML/ViewYAML.scss b/packages/components/src/components/ViewYAML/ViewYAML.scss index 6aff0d5b4..8b4c8d948 100644 --- a/packages/components/src/components/ViewYAML/ViewYAML.scss +++ b/packages/components/src/components/ViewYAML/ViewYAML.scss @@ -1,5 +1,5 @@ /* -Copyright 2020-2021 The Tekton Authors +Copyright 2020-2023 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -11,7 +11,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -.bx--snippet--multi.tkn--view-yaml--dark { +.#{$prefix}--snippet--multi.tkn--view-yaml--dark { background-color: $gray-90; // TODO: $inverse-02 - see Log.scss color: $gray-10; // $inverse-01 } @@ -49,7 +49,7 @@ pre.tkn--syntax-highlighter { flex-grow: 1; } -.bx--snippet--multi { +.#{$prefix}--snippet--multi { max-width: none; // Styles based on a11y-dark by @ericwbailey diff --git a/packages/components/src/scss/Run.scss b/packages/components/src/scss/Run.scss index a79a7e426..ee18b7787 100644 --- a/packages/components/src/scss/Run.scss +++ b/packages/components/src/scss/Run.scss @@ -1,5 +1,5 @@ /* -Copyright 2019-2021 The Tekton Authors +Copyright 2019-2023 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -27,7 +27,7 @@ limitations under the License. padding-left: 1rem; } - .bx--data-table { + .#{$prefix}--data-table { td { background-color: $ui-02; border-top-color: $ui-02; @@ -38,6 +38,6 @@ limitations under the License. } } -.bx--snippet--multi { +.#{$prefix}--snippet--multi { overflow-x: auto } diff --git a/packages/e2e/cypress.config.js b/packages/e2e/cypress.config.js index 816761242..52814d633 100644 --- a/packages/e2e/cypress.config.js +++ b/packages/e2e/cypress.config.js @@ -21,7 +21,9 @@ module.exports = defineConfig({ baseUrl: 'http://localhost:8000', experimentalRunAllSpecs: true, experimentalStudio: true, - setupNodeEvents(on, _config) { + setupNodeEvents(on, config) { + config.env.carbonPrefix = 'bx'; // eslint-disable-line no-param-reassign + on('after:spec', (spec, results) => { if (isCI && results && results.video && results.stats.failures === 0) { console.log('Deleting video for passing test'); // eslint-disable-line no-console @@ -30,6 +32,8 @@ module.exports = defineConfig({ return null; }); + + return config; } }, screenshotOnRunFailure: !isCI, diff --git a/packages/e2e/cypress/e2e/common/extensions.cy.js b/packages/e2e/cypress/e2e/common/extensions.cy.js index 518d80eb1..1058ab115 100644 --- a/packages/e2e/cypress/e2e/common/extensions.cy.js +++ b/packages/e2e/cypress/e2e/common/extensions.cy.js @@ -11,6 +11,8 @@ See the License for the specific language governing permissions and limitations under the License. */ +const carbonPrefix = Cypress.env('carbonPrefix'); + const namespace = 'tekton-dashboard-e2e-extensions'; describe('Extensions', () => { before(() => { @@ -38,7 +40,7 @@ spec: displayname: Namespaces `); - cy.contains('.bx--side-nav a', 'Namespaces').click(); + cy.contains(`.${carbonPrefix}--side-nav a`, 'Namespaces').click(); cy.hash().should('equal', '#/core/v1/namespaces'); cy.contains('h1', 'core/v1/namespaces'); cy.get('table'); diff --git a/packages/e2e/cypress/e2e/common/read-permissions.cy.js b/packages/e2e/cypress/e2e/common/read-permissions.cy.js index dc2f94515..15ad0516b 100644 --- a/packages/e2e/cypress/e2e/common/read-permissions.cy.js +++ b/packages/e2e/cypress/e2e/common/read-permissions.cy.js @@ -1,5 +1,5 @@ /* -Copyright 2022 The Tekton Authors +Copyright 2022-2023 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -13,6 +13,8 @@ limitations under the License. import kinds from '../../fixtures/kinds.json'; +const carbonPrefix = Cypress.env('carbonPrefix'); + describe('Read permissions', { testIsolation: false }, () => { before(() => { cy.visit('/'); @@ -22,7 +24,10 @@ describe('Read permissions', { testIsolation: false }, () => { kinds.forEach(kind => { it(`should display ${kind.label} page`, () => { - cy.contains('.bx--side-nav a', new RegExp(`^${kind.label}$`)).click(); + cy.contains( + `.${carbonPrefix}--side-nav a`, + new RegExp(`^${kind.label}$`) + ).click(); cy.hash().should('equal', `#${kind.path}`); cy.contains('h1', kind.label); cy.get('table'); diff --git a/packages/e2e/cypress/e2e/import/import-resources.cy.js b/packages/e2e/cypress/e2e/import/import-resources.cy.js index a5d0e9bf8..0b13502e2 100644 --- a/packages/e2e/cypress/e2e/import/import-resources.cy.js +++ b/packages/e2e/cypress/e2e/import/import-resources.cy.js @@ -11,6 +11,8 @@ See the License for the specific language governing permissions and limitations under the License. */ +const carbonPrefix = Cypress.env('carbonPrefix'); + const namespace = 'tekton-dashboard-e2e-import-resources'; describe('Import resources', () => { before(() => { @@ -65,7 +67,7 @@ subjects: cy.get('#import-namespaces-dropdown').click(); cy.contains(namespace).click(); - cy.contains('button.bx--btn--primary', 'Import').click(); + cy.contains(`button.${carbonPrefix}--btn--primary`, 'Import').click(); cy.contains('a', 'View status of this run').click(); cy.get('header[class="tkn--pipeline-run-header"]') diff --git a/packages/e2e/cypress/e2e/run/pipelinerun-edit.cy.js b/packages/e2e/cypress/e2e/run/pipelinerun-edit.cy.js index a3e8ea85f..8a90e0aaa 100644 --- a/packages/e2e/cypress/e2e/run/pipelinerun-edit.cy.js +++ b/packages/e2e/cypress/e2e/run/pipelinerun-edit.cy.js @@ -11,6 +11,8 @@ See the License for the specific language governing permissions and limitations under the License. */ +const carbonPrefix = Cypress.env('carbonPrefix'); + const namespace = 'tkn-dashboard-e2e-pipelinerun-edit'; describe('Edit and run PipelineRun', () => { before(() => { @@ -57,7 +59,7 @@ spec: cy.contains('h1', 'PipelineRuns'); cy.get( - `td:has(.bx--link[title*=${pipelineName}-run]) + td:has(.tkn--status[data-reason=Succeeded])`, + `td:has(.${carbonPrefix}--link[title*=${pipelineName}-run]) + td:has(.tkn--status[data-reason=Succeeded])`, { timeout: 15000 } ).should('have.length', 1); @@ -69,7 +71,7 @@ spec: cy.contains('h1', 'PipelineRuns'); cy.get( - `td:has(.bx--link[title*=${pipelineName}-run]) + td:has(.tkn--status[data-reason=Succeeded])`, + `td:has(.${carbonPrefix}--link[title*=${pipelineName}-run]) + td:has(.tkn--status[data-reason=Succeeded])`, { timeout: 15000 } ).should('have.length', 2); }); diff --git a/packages/e2e/cypress/e2e/run/taskrun-edit.cy.js b/packages/e2e/cypress/e2e/run/taskrun-edit.cy.js index 6d7e4b3ab..1b54bf5d5 100644 --- a/packages/e2e/cypress/e2e/run/taskrun-edit.cy.js +++ b/packages/e2e/cypress/e2e/run/taskrun-edit.cy.js @@ -11,6 +11,8 @@ See the License for the specific language governing permissions and limitations under the License. */ +const carbonPrefix = Cypress.env('carbonPrefix'); + const namespace = 'tkn-dashboard-e2e-taskrun-edit'; describe('Edit and run TaskRun', () => { before(() => { @@ -52,7 +54,7 @@ spec: cy.contains('h1', 'TaskRuns'); cy.get( - `td:has(.bx--link[title*=${taskName}-run]) + td:has(.tkn--status[data-reason=Succeeded])`, + `td:has(.${carbonPrefix}--link[title*=${taskName}-run]) + td:has(.tkn--status[data-reason=Succeeded])`, { timeout: 15000 } ).should('have.length', 1); @@ -64,7 +66,7 @@ spec: cy.contains('h1', 'TaskRuns'); cy.get( - `td:has(.bx--link[title*=${taskName}-run]) + td:has(.tkn--status[data-reason=Succeeded])`, + `td:has(.${carbonPrefix}--link[title*=${taskName}-run]) + td:has(.tkn--status[data-reason=Succeeded])`, { timeout: 15000 } ).should('have.length', 2); }); diff --git a/packages/graph/src/components/newGraph.scss b/packages/graph/src/components/newGraph.scss index 7ac4e69a8..d73b7c377 100644 --- a/packages/graph/src/components/newGraph.scss +++ b/packages/graph/src/components/newGraph.scss @@ -18,7 +18,7 @@ limitations under the License. @import '@carbon/charts/styles/styles.scss'; // } -.bx--cc--card-node { +.#{$prefix}--cc--card-node { &.card-status-success { border-color: $support-02; } @@ -33,22 +33,22 @@ limitations under the License. } } -.bx--cc--card-node__column { +.#{$prefix}--cc--card-node__column { overflow: hidden; } -.bx--cc--card-node__title { +.#{$prefix}--cc--card-node__title { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } -.bx--cc--shape-node__icon .bx--tooltip__label .bx--tooltip__trigger { +.#{$prefix}--cc--shape-node__icon .#{$prefix}--tooltip__label .#{$prefix}--tooltip__trigger { margin-left: 0; } .status-icon { - .bx--cc--shape-node__icon & { + .#{$prefix}--cc--shape-node__icon & { width: 24px; height: 24px; } diff --git a/packages/utils/src/utils/hooks.js b/packages/utils/src/utils/hooks.js index 5184297c9..ad07bbab3 100644 --- a/packages/utils/src/utils/hooks.js +++ b/packages/utils/src/utils/hooks.js @@ -1,5 +1,5 @@ /* -Copyright 2021 The Tekton Authors +Copyright 2021-2023 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at diff --git a/packages/utils/src/utils/index.js b/packages/utils/src/utils/index.js index b8d8071d7..6c72b02f4 100644 --- a/packages/utils/src/utils/index.js +++ b/packages/utils/src/utils/index.js @@ -11,6 +11,8 @@ See the License for the specific language governing permissions and limitations under the License. */ +import { settings } from 'carbon-components'; + import { labels as labelConstants } from './constants'; import { getStatus } from './status'; @@ -529,3 +531,7 @@ export function taskRunHasWarning(taskRun) { ); return !!onErrorContinueStep; } + +export function getCarbonPrefix() { + return settings.prefix; +} diff --git a/src/containers/About/About.jsx b/src/containers/About/About.jsx index 5f184cfc2..cbe2d1853 100644 --- a/src/containers/About/About.jsx +++ b/src/containers/About/About.jsx @@ -21,7 +21,11 @@ import { Tile } from 'carbon-components-react'; import { ArrowRight24 as ArrowIcon } from '@carbon/icons-react'; -import { getErrorMessage, useTitleSync } from '@tektoncd/dashboard-utils'; +import { + getCarbonPrefix, + getErrorMessage, + useTitleSync +} from '@tektoncd/dashboard-utils'; import { useProperties } from '../../api'; @@ -29,6 +33,8 @@ import tektonLogo from '../../images/tekton-dashboard-color.svg'; import { ReactComponent as DocsPictogram } from '../../images/assets.svg'; import { ReactComponent as HubPictogram } from '../../images/user--interface.svg'; +const carbonPrefix = getCarbonPrefix(); + function ClickableTile(props) { return ( <CarbonClickableTile @@ -107,7 +113,7 @@ export function About() { return ( displayValue && ( <Fragment key={property}> - <dt className="bx--label">{property}</dt> + <dt className={`${carbonPrefix}--label`}>{property}</dt> <dd>{displayValue}</dd> </Fragment> ) diff --git a/src/containers/About/About.scss b/src/containers/About/About.scss index 72b557646..2919d6bf3 100644 --- a/src/containers/About/About.scss +++ b/src/containers/About/About.scss @@ -1,5 +1,5 @@ /* -Copyright 2020-2022 The Tekton Authors +Copyright 2020-2023 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -99,7 +99,7 @@ limitations under the License. } } - .bx--tile { + .#{$prefix}--tile { display: flex; flex-direction: column; justify-content: space-between; diff --git a/src/containers/CustomRun/CustomRun.jsx b/src/containers/CustomRun/CustomRun.jsx index 123eeb60f..3ca83c74e 100644 --- a/src/containers/CustomRun/CustomRun.jsx +++ b/src/containers/CustomRun/CustomRun.jsx @@ -29,7 +29,12 @@ import { StatusIcon, Table } from '@tektoncd/dashboard-components'; -import { getStatus, urls, useTitleSync } from '@tektoncd/dashboard-utils'; +import { + getCarbonPrefix, + getStatus, + urls, + useTitleSync +} from '@tektoncd/dashboard-utils'; import { InlineNotification } from 'carbon-components-react'; import { @@ -41,6 +46,8 @@ import { import { getViewChangeHandler } from '../../utils'; import NotFound from '../NotFound'; +const carbonPrefix = getCarbonPrefix(); + function getRunDuration(run) { if (!run) { return null; @@ -290,7 +297,7 @@ function CustomRun() { actions={ showNotification.logsURL ? ( <Link - className="bx--inline-notification__text-wrapper" + className={`${carbonPrefix}--inline-notification__text-wrapper`} to={showNotification.logsURL} > {intl.formatMessage({ diff --git a/src/containers/ImportResources/ImportResources.scss b/src/containers/ImportResources/ImportResources.scss index 9bae134c5..53f8b413e 100644 --- a/src/containers/ImportResources/ImportResources.scss +++ b/src/containers/ImportResources/ImportResources.scss @@ -1,5 +1,5 @@ /* -Copyright 2019-2021 The Tekton Authors +Copyright 2019-2023 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -12,49 +12,49 @@ limitations under the License. */ .tkn--importresources { - .bx--form__helper-text, - .bx--label--disabled { + .#{$prefix}--form__helper-text, + .#{$prefix}--label--disabled { color: $text-05; // Since by default the contrast/colour choice is barely readable. } - .bx--label { + .#{$prefix}--label { display: flex; align-items: center; - .bx--tooltip__trigger { + .#{$prefix}--tooltip__trigger { margin-left: 0.5rem; } } - .bx--combo-box.bx--list-box, - .bx--dropdown.bx--list-box, - .bx--text-input__field-wrapper { + .#{$prefix}--combo-box.#{$prefix}--list-box, + .#{$prefix}--dropdown.#{$prefix}--list-box, + .#{$prefix}--text-input__field-wrapper { width: 50%; min-width: 300px; } - .bx--combo-box.bx--list-box { + .#{$prefix}--combo-box.#{$prefix}--list-box { max-width: 350px; } - .bx--toast-notification { + .#{$prefix}--toast-notification { margin: 2rem 0 1rem 0; } - .bx--form-item, - .bx--list-box__wrapper { + .#{$prefix}--form-item, + .#{$prefix}--list-box__wrapper { margin-bottom: 1.5rem; } - .bx--btn { + .#{$prefix}--btn { margin-top: 1rem; } - .bx--accordion { + .#{$prefix}--accordion { margin-bottom: 1rem; - .bx--accordion__content, - .bx--accordion__item--active .bx--accordion__content { + .#{$prefix}--accordion__content, + .#{$prefix}--accordion__item--active .#{$prefix}--accordion__content { padding: .5rem 0; margin-left: 0; } diff --git a/src/containers/ImportResources/ImportResources.test.jsx b/src/containers/ImportResources/ImportResources.test.jsx index a38fc43db..058df61ab 100644 --- a/src/containers/ImportResources/ImportResources.test.jsx +++ b/src/containers/ImportResources/ImportResources.test.jsx @@ -13,13 +13,19 @@ limitations under the License. import React from 'react'; import { fireEvent, waitFor } from '@testing-library/react'; -import { ALL_NAMESPACES, urls } from '@tektoncd/dashboard-utils'; +import { + ALL_NAMESPACES, + getCarbonPrefix, + urls +} from '@tektoncd/dashboard-utils'; import { render, renderWithRouter } from '../../utils/test'; import ImportResourcesContainer from './ImportResources'; import * as API from '../../api'; import * as APIUtils from '../../api/utils'; +const carbonPrefix = getCarbonPrefix(); + describe('ImportResources component', () => { beforeEach(() => { vi.spyOn(API, 'useNamespaces').mockImplementation(() => ({ @@ -129,8 +135,9 @@ describe('ImportResources component', () => { ); expect( - document.getElementsByClassName('bx--toast-notification__caption')[0] - .innerHTML + document.getElementsByClassName( + `${carbonPrefix}--toast-notification__caption` + )[0].innerHTML ).toContain( urls.pipelineRuns.byName({ namespace: 'tekton-dashboard', diff --git a/src/containers/LoadingShell/LoadingShell.scss b/src/containers/LoadingShell/LoadingShell.scss index a8c19e9c5..4896987ec 100644 --- a/src/containers/LoadingShell/LoadingShell.scss +++ b/src/containers/LoadingShell/LoadingShell.scss @@ -14,8 +14,8 @@ limitations under the License. // TODO: move SideNav.scss to components and import here for consistency .tkn--config-loading-shell { - .bx--header ~ { - .bx--content { + .#{$prefix}--header ~ { + .#{$prefix}--content { background-color: $ui-background; transform: none; padding-top: $spacing-06; @@ -23,32 +23,32 @@ limitations under the License. } .tkn--config-loading-nav-skeleton { - .bx--skeleton__text { + .#{$prefix}--skeleton__text { margin-left: 1rem; } - .bx--skeleton__heading { + .#{$prefix}--skeleton__heading { margin-top: 1.5rem; } } - nav.bx--side-nav { - .bx--side-nav__items { + nav.#{$prefix}--side-nav { + .#{$prefix}--side-nav__items { display: flex; flex-direction: column; - .bx--side-nav__item { + .#{$prefix}--side-nav__item { flex-shrink: 0; } - div + .bx--side-nav__item { + div + .#{$prefix}--side-nav__item { display: flex; flex-direction: column; flex-grow: 1; justify-content: flex-end; } - .bx--side-nav__item:last-child { + .#{$prefix}--side-nav__item:last-child { margin-bottom: 1rem; } } diff --git a/src/containers/PipelineRun/PipelineRun.jsx b/src/containers/PipelineRun/PipelineRun.jsx index 526d20d7d..e01069e48 100644 --- a/src/containers/PipelineRun/PipelineRun.jsx +++ b/src/containers/PipelineRun/PipelineRun.jsx @@ -14,6 +14,7 @@ limitations under the License. import React, { useEffect, useRef, useState } from 'react'; import { Actions, PipelineRun } from '@tektoncd/dashboard-components'; import { + getCarbonPrefix, getStatus, getTaskRunsWithPlaceholders, isPending, @@ -29,6 +30,7 @@ import { RadioTile, TileGroup } from 'carbon-components-react'; + import { Link } from 'react-router-dom'; import { useLocation, @@ -60,6 +62,7 @@ import { } from '../../utils'; import NotFound from '../NotFound'; +const carbonPrefix = getCarbonPrefix(); const { PIPELINE_TASK, RETRY, STEP, TASK_RUN_NAME, VIEW } = queryParamConstants; export /* istanbul ignore next */ function PipelineRunContainer() { @@ -514,7 +517,7 @@ export /* istanbul ignore next */ function PipelineRunContainer() { actions={ showRunActionNotification.logsURL ? ( <Link - className="bx--inline-notification__text-wrapper" + className={`${carbonPrefix}--inline-notification__text-wrapper`} to={showRunActionNotification.logsURL} > {intl.formatMessage({ diff --git a/src/containers/Settings/Settings.scss b/src/containers/Settings/Settings.scss index 65bd77766..6ea5c5f73 100644 --- a/src/containers/Settings/Settings.scss +++ b/src/containers/Settings/Settings.scss @@ -13,7 +13,7 @@ limitations under the License. .tkn--settings { .tkn--settings--content { - .bx--tile-group { + .#{$prefix}--tile-group { margin-bottom: 2rem; max-width: 400px; @@ -21,15 +21,15 @@ limitations under the License. margin-bottom: 1rem; } - .bx--tile { + .#{$prefix}--tile { display: flex; align-items: center; - .bx--tile__checkmark { + .#{$prefix}--tile__checkmark { top: calc(50% - 0.5rem); } - .bx--tile-content { + .#{$prefix}--tile-content { display: flex; align-items: center; @@ -40,12 +40,12 @@ limitations under the License. } } - .bx--tile:not(:last-child) { + .#{$prefix}--tile:not(:last-child) { margin-bottom: 0.5rem; } } - .bx--form-item + .bx--form-item { + .#{$prefix}--form-item + .#{$prefix}--form-item { margin-top: 2rem; } } diff --git a/src/containers/SideNav/SideNav.scss b/src/containers/SideNav/SideNav.scss index 1e36fda4d..41102fe2b 100644 --- a/src/containers/SideNav/SideNav.scss +++ b/src/containers/SideNav/SideNav.scss @@ -1,5 +1,5 @@ /* -Copyright 2019-2021 The Tekton Authors +Copyright 2019-2023 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -11,35 +11,35 @@ See the License for the specific language governing permissions and limitations under the License. */ -.bx--header ~ { - nav.bx--side-nav { +.#{$prefix}--header ~ { + nav.#{$prefix}--side-nav { background-color: $gray-100; border-color: $gray-80; color: $gray-10; - .bx--side-nav__items { + .#{$prefix}--side-nav__items { display: flex; flex-direction: column; - .bx--side-nav__item { + .#{$prefix}--side-nav__item { flex-shrink: 0; } - .bx--side-nav__item.bx--side-nav__item--icon - + .bx--side-nav__item:not(.bx--side-nav__item--icon) { + .#{$prefix}--side-nav__item.#{$prefix}--side-nav__item--icon + + .#{$prefix}--side-nav__item:not(.#{$prefix}--side-nav__item--icon) { display: flex; flex-direction: column; flex-grow: 1; justify-content: flex-end; } - .bx--side-nav__item:last-child { + .#{$prefix}--side-nav__item:last-child { margin-bottom: 1rem; } } - .bx--side-nav__icon { - &:not(.bx--side-nav__submenu-chevron) { + .#{$prefix}--side-nav__icon { + &:not(.#{$prefix}--side-nav__submenu-chevron) { margin-right: 1rem; } @@ -48,17 +48,17 @@ limitations under the License. } } - &:not(.bx--side-nav--expanded) { - .bx--side-nav__submenu { + &:not(.#{$prefix}--side-nav--expanded) { + .#{$prefix}--side-nav__submenu { padding: 0 .875rem; } - .bx--side-nav__icon:not(.bx--side-nav__submenu-chevron) > svg { + .#{$prefix}--side-nav__icon:not(.#{$prefix}--side-nav__submenu-chevron) > svg { width: 1.25rem; height: 1.25rem; } } - .bx--side-nav__submenu { + .#{$prefix}--side-nav__submenu { color: $gray-10; &:focus { @@ -69,61 +69,61 @@ limitations under the License. background-color: $gray-90; color: white; - .bx--side-nav__icon > svg path { + .#{$prefix}--side-nav__icon > svg path { fill: white; } } } - .bx--side-nav__item.bx--side-nav__item--icon { + .#{$prefix}--side-nav__item.#{$prefix}--side-nav__item--icon { margin-bottom: 1rem; - a.bx--side-nav__link { + a.#{$prefix}--side-nav__link { padding-left: 3rem; } } - .bx--side-nav__link { + .#{$prefix}--side-nav__link { &:focus { outline-color: white; } - .bx--side-nav__link-text { + .#{$prefix}--side-nav__link-text { color: $gray-10; } - &:hover .bx--side-nav__link-text { + &:hover .#{$prefix}--side-nav__link-text { color: white; } } - .bx--side-nav__item--active { - .bx--side-nav__submenu[aria-expanded=false] { + .#{$prefix}--side-nav__item--active { + .#{$prefix}--side-nav__submenu[aria-expanded=false] { background-color: $gray-80; } - .bx--side-nav__submenu-title { + .#{$prefix}--side-nav__submenu-title { color: $gray-10; } } - .bx--side-nav__menu a.bx--side-nav__link--current, - .bx--side-nav__menu a.bx--side-nav__link[aria-current=page] { + .#{$prefix}--side-nav__menu a.#{$prefix}--side-nav__link--current, + .#{$prefix}--side-nav__menu a.#{$prefix}--side-nav__link[aria-current=page] { background-color: $gray-80; } - a.bx--side-nav__link[aria-current=page], - a.bx--side-nav__link--current { + a.#{$prefix}--side-nav__link[aria-current=page], + a.#{$prefix}--side-nav__link--current { background-color: $gray-90; } - .bx--side-nav__item:not(.bx--side-nav__item--active) > .bx--side-nav__link:hover > span, - .bx--side-nav__item:not(.bx--side-nav__item--active) .bx--side-nav__menu-item > .bx--side-nav__link:hover > span { + .#{$prefix}--side-nav__item:not(.#{$prefix}--side-nav__item--active) > .#{$prefix}--side-nav__link:hover > span, + .#{$prefix}--side-nav__item:not(.#{$prefix}--side-nav__item--active) .#{$prefix}--side-nav__menu-item > .#{$prefix}--side-nav__link:hover > span { color: white; } - .bx--side-nav__item:not(.bx--side-nav__item--active):hover .bx--side-nav__item:not(.bx--side-nav__item--active) > .bx--side-nav__submenu:hover, - .bx--side-nav__item:not(.bx--side-nav__item--active) > .bx--side-nav__link:hover, .bx--side-nav__menu a.bx--side-nav__link:not(.bx--side-nav__link--current):not([aria-current=page]):hover, - .bx--side-nav a.bx--header__menu-item:hover, .bx--side-nav .bx--header__menu-title[aria-expanded=true]:hover { + .#{$prefix}--side-nav__item:not(.#{$prefix}--side-nav__item--active):hover .#{$prefix}--side-nav__item:not(.#{$prefix}--side-nav__item--active) > .#{$prefix}--side-nav__submenu:hover, + .#{$prefix}--side-nav__item:not(.#{$prefix}--side-nav__item--active) > .#{$prefix}--side-nav__link:hover, .#{$prefix}--side-nav__menu a.#{$prefix}--side-nav__link:not(.#{$prefix}--side-nav__link--current):not([aria-current=page]):hover, + .#{$prefix}--side-nav a.#{$prefix}--header__menu-item:hover, .#{$prefix}--side-nav .#{$prefix}--header__menu-title[aria-expanded=true]:hover { background-color: $gray-90; color: white; } diff --git a/src/containers/TaskRun/TaskRun.jsx b/src/containers/TaskRun/TaskRun.jsx index ec893022b..a83d9ba8f 100644 --- a/src/containers/TaskRun/TaskRun.jsx +++ b/src/containers/TaskRun/TaskRun.jsx @@ -31,6 +31,7 @@ import { TaskTree } from '@tektoncd/dashboard-components'; import { + getCarbonPrefix, getStatus, getStepDefinition, getStepStatus, @@ -61,6 +62,7 @@ import { } from '../../api'; import NotFound from '../NotFound'; +const carbonPrefix = getCarbonPrefix(); const { STEP, RETRY, TASK_RUN_DETAILS, VIEW } = queryParamConstants; export function TaskRunContainer() { @@ -440,7 +442,7 @@ export function TaskRunContainer() { actions={ showNotification.logsURL ? ( <Link - className="bx--inline-notification__text-wrapper" + className={`${carbonPrefix}--inline-notification__text-wrapper`} to={showNotification.logsURL} > {intl.formatMessage({ diff --git a/src/scss/App.scss b/src/scss/App.scss index 042061a9e..2ed57ef7a 100644 --- a/src/scss/App.scss +++ b/src/scss/App.scss @@ -72,12 +72,12 @@ a { color: $link-01; } -.bx--btn.link-btn.bx--btn--ghost { +.#{$prefix}--btn.link-btn.#{$prefix}--btn--ghost { text-decoration: none; } -.bx--header ~ { - .bx--content { +.#{$prefix}--header ~ { + .#{$prefix}--content { position: relative; background-color: $ui-background; transform: none; @@ -94,29 +94,29 @@ a { } } -.bx--modal-header, -.bx--modal-content { +.#{$prefix}--modal-header, +.#{$prefix}--modal-content { width: 100%; } -.bx--modal-content, -.bx--modal-header { +.#{$prefix}--modal-content, +.#{$prefix}--modal-header { padding-right: 1rem; } -.bx--modal-content { +.#{$prefix}--modal-content { margin-bottom: $spacing-07; } -.bx--data-table-container { +.#{$prefix}--data-table-container { margin-top: $spacing-07; } -.bx--table-header-label { +.#{$prefix}--table-header-label { white-space: nowrap; } -.bx--list--unordered { +.#{$prefix}--list--unordered { margin-top: 1rem; } @@ -137,6 +137,6 @@ a { } } -.bx--overflow-menu-options:after { +.#{$prefix}--overflow-menu-options:after { display: none; } diff --git a/src/scss/Create.scss b/src/scss/Create.scss index c90b7f387..b4cb44926 100644 --- a/src/scss/Create.scss +++ b/src/scss/Create.scss @@ -12,30 +12,30 @@ limitations under the License. */ .tkn--create { - .bx--fieldset:not(:last-of-type) { + .#{$prefix}--fieldset:not(:last-of-type) { margin-bottom: 0; } - .bx--form__helper-text { + .#{$prefix}--form__helper-text { color: $text-05; // Since by default the contrast/colour choice is barely readable. max-width: 100%; } - .bx--label--disabled { + .#{$prefix}--label--disabled { color: $text-05; } - .bx--text-input__field-wrapper { + .#{$prefix}--text-input__field-wrapper { width: 100%; } - .bx--list-box__wrapper, - .bx--form-item { + .#{$prefix}--list-box__wrapper, + .#{$prefix}--form-item { margin-bottom: $spacing-06; max-width: 40rem; } - .bx--btn.bx--btn--secondary { + .#{$prefix}--btn.#{$prefix}--btn--secondary { margin-left: $spacing-03; } } diff --git a/src/scss/Definitions.scss b/src/scss/Definitions.scss index eb3976b4e..defe518bb 100644 --- a/src/scss/Definitions.scss +++ b/src/scss/Definitions.scss @@ -1,5 +1,5 @@ /* -Copyright 2019-2021 The Tekton Authors +Copyright 2019-2023 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -18,14 +18,14 @@ limitations under the License. } main { - .bx--data-table-header { + .#{$prefix}--data-table-header { background-color: transparent !important; } - .bx--inline-notification { + .#{$prefix}--inline-notification { max-width: 100%; - .bx--inline-notification__text-wrapper { + .#{$prefix}--inline-notification__text-wrapper { align-items: center; } } diff --git a/src/scss/Triggers.scss b/src/scss/Triggers.scss index 4b843c141..93d39cc76 100644 --- a/src/scss/Triggers.scss +++ b/src/scss/Triggers.scss @@ -29,14 +29,14 @@ limitations under the License. margin-right: $spacing-02; } - .bx--link span { + .#{$prefix}--link span { font-weight: normal; } } .tkn--table { - .bx--data-table-container { - .bx--data-table { + .#{$prefix}--data-table-container { + .#{$prefix}--data-table { .cell-description { max-width: 30vw; } @@ -45,12 +45,12 @@ limitations under the License. } } - .bx--snippet--multi { + .#{$prefix}--snippet--multi { margin-top: $spacing-03 } .tkn--trigger-details { - .bx--list--unordered { + .#{$prefix}--list--unordered { position: relative; top: 2px; } @@ -62,7 +62,7 @@ limitations under the License. padding: $spacing-05; background-color: $ui-01; - .bx--tag { + .#{$prefix}--tag { margin-top: 0; }