chore(v11): updage usage of carbon-components for prefix

carbon-design-system · Aug 19, 2024 · 4dc2391 · 4dc2391
1 parent c18cc08
commit 4dc2391
Show file tree

Hide file tree

Showing 37 changed files with 71 additions and 78 deletions.
diff --git a/packages/web-extension/src/globals/prefixSelectors.js b/packages/web-extension/src/globals/prefixSelectors.js
@@ -1,7 +1,7 @@
 import pkg from '@carbon/ibm-products/es/global/js/package-settings';
 import dotcomSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings';
 import { getComponentNamespace as getSecurityPrefix } from '@carbon/ibm-security/es/globals/namespace';
-import carbonSettings from 'carbon-components/es/globals/js/settings';
+import { prefix } from '@carbon/web-components/es/globals/settings.js';
 
 const {
   devtoolsAttribute: cloudCognitiveDevtoolsAttribute,
@@ -13,7 +13,7 @@ const {
   in setPrefix.js we set the prefix to carbonPrefix. This gets run on the first pass so the grid gets a prefix unique to devtools. This gets overwritten on the second pass which is why we go back to prefix if it's undefined. Maybe there is a solution for this in the future, but adding this note here so we don't forget for now why it's like this...
 */
 
-const carbonPrefix = carbonSettings.carbonPrefix || carbonSettings.prefix;
+const carbonPrefix = prefix;
 const { stablePrefix: dotcomPrefix } = dotcomSettings;
 const securityPrefix = getSecurityPrefix('');
 const cloudPalPrefix = 'pal'; // static hardcoded

diff --git a/packages/web-extension/src/globals/setPrefix.js b/packages/web-extension/src/globals/setPrefix.js
@@ -1,3 +1,3 @@
-import settings from 'carbon-components/es/globals/js/settings';
-settings.carbonPrefix = settings.prefix;
-settings.prefix = 'bx-dev';
+import { prefix } from '@carbon/web-components/es/globals/settings.js';
+settings.carbonPrefix = prefix;
+settings.prefix = `${prefix}-dev`;
diff --git a/packages/web-extension/src/inject/components/BreakpointLabel/index.js b/packages/web-extension/src/inject/components/BreakpointLabel/index.js
@@ -1,10 +1,8 @@
-import settings from 'carbon-components/es/globals/js/settings';
+import { prefix } from '@carbon/web-components/es/globals/settings.js';
 import { getStorage } from '@carbon/devtools-utilities/src/getStorage';
 import { storageItemChanged } from '@carbon/devtools-utilities/src/storageItemChanged';
 // import { defaults } from '../../../globals/defaults';
 
-const { prefix } = settings;
-
 function initBreakpointLabel() {
   getStorage('toggleBreakpointLabel', ({ toggleBreakpointLabel }) =>
     manageToggleBreakpointLabel(toggleBreakpointLabel)

diff --git a/packages/web-extension/src/inject/components/Grid/2x/index.js b/packages/web-extension/src/inject/components/Grid/2x/index.js
@@ -1,10 +1,8 @@
-import settings from 'carbon-components/es/globals/js/settings';
+import { prefix } from '@carbon/web-components/es/globals/settings.js';
 import { getStorage } from '@carbon/devtools-utilities/src/getStorage';
 import { storageItemChanged } from '@carbon/devtools-utilities/src/storageItemChanged';
 import { positions } from '../../../../globals/options';
 
-const { prefix } = settings;
-
 function manage2xGrid() {
   getStorage('toggle2xGridOptions', ({ toggle2xGridOptions }) =>
     manage2xGridOptions(toggle2xGridOptions)

diff --git a/packages/web-extension/src/inject/components/Grid/index.js b/packages/web-extension/src/inject/components/Grid/index.js
@@ -1,4 +1,4 @@
-import settings from 'carbon-components/es/globals/js/settings';
+import { prefix } from '@carbon/web-components/es/globals/settings.js';
 import { storageItemChanged } from '@carbon/devtools-utilities/src/storageItemChanged';
 import { getStorage } from '@carbon/devtools-utilities/src/getStorage';
 import { gridVersions } from '../../../globals/options';
@@ -11,7 +11,6 @@ import {
 } from './mini-unit';
 import { themes } from '@carbon/themes';
 
-const { prefix } = settings;
 const html = document.querySelector('html');
 const gridVersionsList = Object.keys(gridVersions);
 const themeList = [...Object.keys(themes), 'system'];

diff --git a/packages/web-extension/src/inject/components/Grid/mini-unit/index.js b/packages/web-extension/src/inject/components/Grid/mini-unit/index.js
@@ -1,9 +1,7 @@
-import settings from 'carbon-components/es/globals/js/settings';
+import { prefix } from '@carbon/web-components/es/globals/settings.js';
 import { getStorage } from '@carbon/devtools-utilities/src/getStorage';
 import { storageItemChanged } from '@carbon/devtools-utilities/src/storageItemChanged';
 
-const { prefix } = settings;
-
 const html = document.querySelector('html');
 const body = document.body;
 const miniUnitGridClass = `${prefix}--grid-mini-unit`;

diff --git a/packages/web-extension/src/inject/components/Highlight/index.js b/packages/web-extension/src/inject/components/Highlight/index.js
@@ -1,8 +1,8 @@
-import settings from 'carbon-components/es/globals/js/settings';
+import { prefix } from '@carbon/web-components/es/globals/settings.js';
 import { findAllDomShadow } from '@carbon/devtools-utilities/src/shadowDom';
 import { randomId } from '@carbon/devtools-utilities/src/randomId';
 
-const { prefix } = settings;
+
 
 const devtoolsClass = `${prefix}--devtools`;
 const highlightsContainerClass = `${prefix}--highlights`;

diff --git a/packages/web-extension/src/inject/components/Inventory/index.js b/packages/web-extension/src/inject/components/Inventory/index.js
@@ -1,4 +1,4 @@
-import settings from 'carbon-components/es/globals/js/settings';
+import { prefix } from '@carbon/web-components/es/globals/settings.js';
 import {
   positionTooltip,
   showHideTooltip,
@@ -21,7 +21,7 @@ import {
   _results as _totals,
 } from '@carbon/devtools-component-list/dist/index.json';
 
-const { prefix } = settings;
+
 const idselector = 'bxdevid'; // should this be in prefix selector file?
 
 let DOMwatch;

diff --git a/packages/web-extension/src/inject/components/Shortcuts/toggleColumns.js b/packages/web-extension/src/inject/components/Shortcuts/toggleColumns.js
@@ -1,6 +1,6 @@
-import settings from 'carbon-components/es/globals/js/settings';
+import { prefix } from '@carbon/web-components/es/globals/settings.js';
+
 
-const { prefix } = settings;
 const devtoolClass = `${prefix}--devtools`;
 const interactionModifier = `${devtoolClass}--interact`;
 const shift = 16;

diff --git a/packages/web-extension/src/inject/components/Specs/Color/index.js b/packages/web-extension/src/inject/components/Specs/Color/index.js
@@ -1,4 +1,4 @@
-import settings from 'carbon-components/es/globals/js/settings';
+import { prefix } from '@carbon/web-components/es/globals/settings.js';
 import { addHighlight } from '../../Highlight';
 import {
   positionTooltip,
@@ -16,7 +16,7 @@ import { themeKeys } from './themeKeys';
 import { getThemeName } from './getThemeName';
 import Color from 'color';
 
-const { prefix } = settings;
+
 
 function highlightSpecsColor(target) {
   if (target) {

diff --git a/packages/web-extension/src/inject/components/Specs/Dependencies/index.js b/packages/web-extension/src/inject/components/Specs/Dependencies/index.js
@@ -1,4 +1,4 @@
-import settings from 'carbon-components/es/globals/js/settings';
+import { prefix } from '@carbon/web-components/es/globals/settings.js';
 import { addHighlight } from '../../Highlight';
 import {
   positionTooltip,
@@ -8,7 +8,7 @@ import {
 import { findAllDomShadow } from '@carbon/devtools-utilities/src/shadowDom';
 import { formInventoryData } from '@carbon/devtools-utilities/src/formInventoryData';
 import componentList from '@carbon/devtools-component-list/dist/index.json';
-const { prefix } = settings;
+
 const { allComponents } = formInventoryData(componentList);
 const selectors = Object.keys(allComponents).join(',');
 

diff --git a/packages/web-extension/src/inject/components/Specs/Grid/index.js b/packages/web-extension/src/inject/components/Specs/Grid/index.js
@@ -1,4 +1,4 @@
-import settings from 'carbon-components/es/globals/js/settings';
+import { prefix } from '@carbon/web-components/es/globals/settings.js';
 import { breakpoints, rem } from '@carbon/layout';
 import { carbonPrefix } from '../../../../globals';
 import { addHighlight } from '../../Highlight';
@@ -8,7 +8,7 @@ import {
   updateTooltipContent,
 } from '../../Tooltip';
 
-const { prefix } = settings;
+
 
 const gridSelector = `${carbonPrefix}--grid`;
 const rowSelector = `${carbonPrefix}--row`;

diff --git a/packages/web-extension/src/inject/components/Specs/Outline/index.js b/packages/web-extension/src/inject/components/Specs/Outline/index.js
@@ -1,6 +1,6 @@
-import settings from 'carbon-components/es/globals/js/settings';
+import { prefix } from '@carbon/web-components/es/globals/settings.js';
+
 
-const { prefix } = settings;
 
 const html = document.querySelector('html');
 const outlineClass = `${prefix}--specs--outline`;

diff --git a/packages/web-extension/src/inject/components/Specs/Ratio/index.js b/packages/web-extension/src/inject/components/Specs/Ratio/index.js
@@ -1,4 +1,4 @@
-import settings from 'carbon-components/es/globals/js/settings';
+import { prefix } from '@carbon/web-components/es/globals/settings.js';
 import { addHighlight } from '../../Highlight';
 import { getComponentName } from '@carbon/devtools-utilities/src/getComponentName';
 import { aspectRatios, svgMarkup } from '../../../../globals/options';
@@ -8,7 +8,7 @@ import {
   updateTooltipContent,
 } from '../../Tooltip';
 
-const { prefix } = settings;
+
 
 const aspectRatiosCalc = aspectRatios.map((ratio) => {
   const vals = ratio.split(':');

diff --git a/packages/web-extension/src/inject/components/Specs/Spacing/index.js b/packages/web-extension/src/inject/components/Specs/Spacing/index.js
@@ -1,4 +1,4 @@
-import settings from 'carbon-components/es/globals/js/settings';
+import { prefix } from '@carbon/web-components/es/globals/settings.js';
 import { addHighlight } from '../../Highlight';
 import {
   positionTooltip,
@@ -12,7 +12,7 @@ import { setPx } from '@carbon/devtools-utilities/src/setPx';
 import { removeLeadingZero } from '@carbon/devtools-utilities/src/removeLeadingZero';
 import { rem, spacing, layout } from '@carbon/layout';
 
-const { prefix } = settings;
+
 
 const spacersClass = `${prefix}--spacers`;
 const spacerBoxClass = `${spacersClass}__box`;

diff --git a/packages/web-extension/src/inject/components/Specs/index.js b/packages/web-extension/src/inject/components/Specs/index.js
@@ -1,4 +1,4 @@
-import settings from 'carbon-components/es/globals/js/settings';
+import { prefix } from '@carbon/web-components/es/globals/settings.js';
 import { getStorage } from '@carbon/devtools-utilities/src/getStorage';
 import { storageItemChanged } from '@carbon/devtools-utilities/src/storageItemChanged';
 import { randomId } from '@carbon/devtools-utilities/src/randomId';
@@ -18,7 +18,7 @@ import {
   highlightSpecsRatio,
 } from './collection';
 
-const { prefix } = settings;
+
 
 const html = document.querySelector('html');
 const specsClass = `${prefix}--specs`;

diff --git a/packages/web-extension/src/inject/components/Tooltip/index.js b/packages/web-extension/src/inject/components/Tooltip/index.js
@@ -1,7 +1,7 @@
-import settings from 'carbon-components/es/globals/js/settings';
+import { prefix } from '@carbon/web-components/es/globals/settings.js';
 import { setPx } from '@carbon/devtools-utilities/src/setPx';
 
-const { prefix } = settings;
+
 
 const body = document.body;
 const tooltipClass = `${prefix}--tooltip`;

diff --git a/packages/web-extension/src/options/components/Footer/index.js b/packages/web-extension/src/options/components/Footer/index.js
@@ -1,10 +1,10 @@
-import settings from 'carbon-components/es/globals/js/settings';
+import { prefix } from '@carbon/web-components/es/globals/settings.js';
 import Link from 'carbon-components-react/es/components/Link';
 import React from 'react';
 
 import packageJSON from '../../../../package.json';
 
-const { prefix } = settings;
+
 const { name, version, bugs, repository, dependencies } = packageJSON;
 
 function getVersion(dependency) {

diff --git a/packages/web-extension/src/options/components/General/index.js b/packages/web-extension/src/options/components/General/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import settings from 'carbon-components/es/globals/js/settings';
+import { prefix } from '@carbon/web-components/es/globals/settings.js';
 import Select from 'carbon-components-react/es/components/Select';
 import SelectItem from 'carbon-components-react/es/components/SelectItem';
 import Toggle from 'carbon-components-react/es/components/Toggle';
@@ -9,7 +9,7 @@ import { configuration } from '../';
 import { themes } from '@carbon/themes';
 import { defaults } from '../../../globals/defaults';
 
-const { prefix } = settings;
+
 const themeList = Object.keys(themes);
 
 function General({

diff --git a/packages/web-extension/src/options/components/Grid/index.js b/packages/web-extension/src/options/components/Grid/index.js
@@ -1,13 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import settings from 'carbon-components/es/globals/js/settings';
+import { prefix } from '@carbon/web-components/es/globals/settings.js';
 import Select from 'carbon-components-react/es/components/Select';
 import SelectItem from 'carbon-components-react/es/components/SelectItem';
 import { configuration } from '../';
 import { gridVersions } from '../../../globals/options';
 import { defaults } from '../../../globals/defaults';
 
-const { prefix } = settings;
+
 const gridVersionList = Object.keys(gridVersions);
 
 function Grid({ gridVersion = defaults.gridVersion }) {

diff --git a/packages/web-extension/src/options/components/Reset/index.js b/packages/web-extension/src/options/components/Reset/index.js
@@ -1,11 +1,11 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import settings from 'carbon-components/es/globals/js/settings';
+import { prefix } from '@carbon/web-components/es/globals/settings.js';
 import Button from 'carbon-components-react/es/components/Button';
 import CheckmarkOutline from '@carbon/icons/svg/32/checkmark--outline.svg';
 import { configuration } from '../';
 
-const { prefix } = settings;
+
 
 function Reset({ settingKeys = [] }) {
   const [statusMsg, setStatusMsg] = useState(false);

diff --git a/packages/web-extension/src/options/components/Shortcuts/index.js b/packages/web-extension/src/options/components/Shortcuts/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import settings from 'carbon-components/es/globals/js/settings';
+import { prefix } from '@carbon/web-components/es/globals/settings.js';
 import {
   StructuredListWrapper,
   StructuredListHead,
@@ -10,7 +10,7 @@ import {
 import MacShift from '@carbon/icons/svg/32/mac--shift.svg';
 import Cursor_1 from '@carbon/icons/svg/32/cursor--1.svg';
 
-const { prefix } = settings;
+
 
 function Shortcuts() {
   const shortcuts = [

diff --git a/packages/web-extension/src/options/index.js b/packages/web-extension/src/options/index.js
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import ReactDOM from 'react-dom';
-import settings from 'carbon-components/es/globals/js/settings';
+import { prefix } from '@carbon/web-components/es/globals/settings.js';
 import Accordion, {
   AccordionItem,
 } from 'carbon-components-react/es/components/Accordion';
@@ -10,7 +10,7 @@ import { getStorage } from '@carbon/devtools-utilities/src/getStorage';
 
 import './index.scss';
 
-const { prefix } = settings;
+
 
 function Options() {
   const [data, setData] = useState({});

diff --git a/packages/web-extension/src/popup/components/Empty/index.js b/packages/web-extension/src/popup/components/Empty/index.js
@@ -1,9 +1,9 @@
 import React from 'react';
-import settings from 'carbon-components/es/globals/js/settings';
+import { prefix } from '@carbon/web-components/es/globals/settings.js';
 import packageJSON from '../../../../package.json';
 import Link from 'carbon-components-react/es/components/Link';
 
-const { prefix } = settings;
+
 
 function Empty() {
   return (

diff --git a/packages/web-extension/src/popup/components/Grid/Grid2xOptions.js b/packages/web-extension/src/popup/components/Grid/Grid2xOptions.js
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import settings from 'carbon-components/es/globals/js/settings';
+import { prefix } from '@carbon/web-components/es/globals/settings.js';
 import Checkbox from 'carbon-components-react/es/components/Checkbox';
 import FormGroup from 'carbon-components-react/es/components/FormGroup';
 import NumberInput from 'carbon-components-react/es/components/NumberInput';
@@ -13,7 +13,7 @@ import { defaults } from '../../../globals/defaults';
 import { positions } from '../../../globals/options';
 import { labelMaker } from './labelMaker';
 
-const { prefix } = settings;
+
 
 function Grid2xOptions({ disabled }) {
   const [toggle2xGridOptions, setToggle2xGridOptions] = useState(

diff --git a/packages/web-extension/src/popup/components/Grid/GridMiniUnitOptions.js b/packages/web-extension/src/popup/components/Grid/GridMiniUnitOptions.js
@@ -1,14 +1,14 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import settings from 'carbon-components/es/globals/js/settings';
+import { prefix } from '@carbon/web-components/es/globals/settings.js';
 import Checkbox from 'carbon-components-react/es/components/Checkbox';
 import FormGroup from 'carbon-components-react/es/components/FormGroup';
 import { setStorage } from '@carbon/devtools-utilities/src/setStorage';
 import { getStorage } from '@carbon/devtools-utilities/src/getStorage';
 import { defaults } from '../../../globals/defaults';
 import { labelMaker } from './labelMaker';
 
-const { prefix } = settings;
+
 
 function GridMiniUnitOptions({ disabled }) {
   const [toggleMiniUnitGridOptions, setToggleMiniUnitGridOptions] = useState(

diff --git a/packages/web-extension/src/popup/components/Grid/index.js b/packages/web-extension/src/popup/components/Grid/index.js
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import settings from 'carbon-components/es/globals/js/settings';
+import { prefix } from '@carbon/web-components/es/globals/settings.js';
 import Toggle from 'carbon-components-react/es/components/Toggle';
 import { setStorage } from '@carbon/devtools-utilities/src/setStorage';
 import { getStorage } from '@carbon/devtools-utilities/src/getStorage';
@@ -9,7 +9,7 @@ import { defaults } from '../../../globals/defaults';
 import { Grid2xOptions } from './Grid2xOptions';
 import { GridMiniUnitOptions } from './GridMiniUnitOptions';
 
-const { prefix } = settings;
+
 
 function Grid({ disabled }) {
   const [toggleGrids, setToggleGrids] = useState(defaults.grid);

diff --git a/packages/web-extension/src/popup/components/Grid/labelMaker.js b/packages/web-extension/src/popup/components/Grid/labelMaker.js
@@ -1,7 +1,7 @@
 import React from 'react';
-// import settings from 'carbon-components/es/globals/js/settings';
+// import { prefix } from '@carbon/web-components/es/globals/settings.js';
 
-// const { prefix } = settings;
+// 
 
 function labelMaker(labelText) {
   return (