Use Carbon prefix variable

Use the Carbon prefix variable in both SCSS and JS instead of the hardcoded `bx` to make migration to v11 easier. In v11 the prefix changes to `cds` by default, so using the variable now will avoid having to change that alongside the other migration work.
tektoncd · Nov 20, 2023 · d357825 · d357825
1 parent fd26628
commit d357825
Show file tree

Hide file tree

Showing 48 changed files with 295 additions and 211 deletions.
diff --git 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 => (
                   <span
                     {...iconProps}
-                    className="bx--btn bx--btn--md bx--btn--tertiary"
+                    className={`${carbonPrefix}--btn ${carbonPrefix}--btn--md ${carbonPrefix}--btn--tertiary`}
                   >
                     {title}
-                    <CaretDown16 className="bx--btn__icon" />
+                    <CaretDown16 className={`${carbonPrefix}--btn__icon`} />
                   </span>
                 )
               : undefined

diff --git 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 (
     <table
-      className={`${className} ${sizeClassName} bx--data-table bx--skeleton tkn--data-table-skeleton`}
+      className={`${className} ${sizeClassName} ${carbonPrefix}--data-table ${carbonPrefix}--skeleton tkn--data-table-skeleton`}
       {...rest}
     >
       <thead>

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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 (
-    <div className="bx--loading-overlay tkn--loading-overlay">
+    <div className={`${carbonPrefix}--loading-overlay tkn--loading-overlay`}>
       <CarbonLoading description={messageToDisplay} withOverlay={false} />
       <span className="tkn--loading-text">{messageToDisplay}</span>
     </div>

diff --git 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
@@ -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 }) => (
   <div style={style}>
     <LogFormat>{`${data[index]}\n`}</LogFormat>
@@ -208,7 +214,7 @@ export class LogContainer extends Component {
       <div className="button-container">
         {isLogTopUnseen ? (
           <Button
-            className="bx--copy-btn"
+            className={`${carbonPrefix}--copy-btn`}
             hasIconOnly
             iconDescription={scrollButtonTopMessage}
             id="log-scroll-to-top-btn"
@@ -224,7 +230,7 @@ export class LogContainer extends Component {
         ) : null}
         {isLogBottomUnseen ? (
           <Button
-            className="bx--copy-btn"
+            className={`${carbonPrefix}--copy-btn`}
             iconDescription={scrollButtonBottomMessage}
             hasIconOnly
             id="log-scroll-to-bottom-btn"

diff --git a/packages/components/src/components/Log/Log.scss b/packages/components/src/components/Log/Log.scss
@@ -28,7 +28,7 @@ pre.tkn--log {
   word-break: normal;
   word-wrap: normal;
 
-  .bx--skeleton__text {
+  .#{$prefix}--skeleton__text {
     background-color: $skeleton-01;
 
     &::before {
@@ -45,7 +45,7 @@ pre.tkn--log {
     overflow-wrap: normal;
   }
 
-  .bx--btn-set {
+  .#{$prefix}--btn-set {
     position: absolute;
     top: 0;
     right: 0;
@@ -77,7 +77,7 @@ pre.tkn--log {
     bottom: var(--tkn-scroll-button-bottom);
   }
 
-  .bx--copy-btn {
+  .#{$prefix}--copy-btn {
     width: 2rem;
     height: 2rem;
     background-color: $ui-background;

diff --git a/packages/components/src/components/LogoutButton/LogoutButton.scss b/packages/components/src/components/LogoutButton/LogoutButton.scss
@@ -1,5 +1,5 @@
 /*
-Copyright 2019-2020 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,7 +11,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.bx--btn.tkn--logout-btn.bx--btn--ghost {
+.#{$prefix}--btn.tkn--logout-btn.#{$prefix}--btn--ghost {
   position: absolute;
   right: 32px;
   border-width: 1px;

diff --git a/packages/components/src/components/LogsToolbar/LogsToolbar.jsx b/packages/components/src/components/LogsToolbar/LogsToolbar.jsx
@@ -19,14 +19,17 @@ import {
   Maximize16,
   Minimize16
 } from '@carbon/icons-react';
+import { getCarbonPrefix } from '@tektoncd/dashboard-utils';
+
+const carbonPrefix = getCarbonPrefix();
 
 const LogsToolbar = ({ isMaximized, name, toggleMaximized, url }) => {
   const intl = useIntl();
   return (
-    <div className="bx--btn-set">
+    <div className={`${carbonPrefix}--btn-set`}>
       {toggleMaximized ? (
         <button
-          className="bx--copy-btn"
+          className={`${carbonPrefix}--copy-btn`}
           onClick={toggleMaximized}
           type="button"
         >
@@ -52,7 +55,7 @@ const LogsToolbar = ({ isMaximized, name, toggleMaximized, url }) => {
         </button>
       ) : null}
       <a
-        className="bx--copy-btn"
+        className={`${carbonPrefix}--copy-btn`}
         href={url}
         target="_blank"
         rel="noopener noreferrer"
@@ -66,7 +69,7 @@ const LogsToolbar = ({ isMaximized, name, toggleMaximized, url }) => {
           </title>
         </Launch16>
       </a>
-      <a className="bx--copy-btn" download={name} href={url}>
+      <a className={`${carbonPrefix}--copy-btn`} download={name} href={url}>
         <Download16>
           <title>
             {intl.formatMessage({

diff --git 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
@@ -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
@@ -19,7 +19,7 @@ limitations under the License.
   align-items: stretch;
   overflow: hidden;
 
-  .bx--tab-content {
+  .#{$prefix}--tab-content {
     padding-left: 0;
   }
 }