chore(v11): update carbon-components imports & format

carbon-design-system · Sep 13, 2024 · 99a578d · 99a578d
1 parent fae71fb
commit 99a578d
Show file tree

Hide file tree

Showing 61 changed files with 159 additions and 192 deletions.
diff --git a/packages/component-list/src/libraries/security.js b/packages/component-list/src/libraries/security.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import * as securityComponentList from '@carbon/ibm-security';
-import * as carbonComponentList from 'carbon-components-react';
+import * as carbonComponentList from '@carbon/react';
 import { getSecurityPrefix } from '../../../web-extension/src/globals/prefixSelectors.js';
 import { buildReactComponentList } from '../helpers.js';
 

diff --git a/packages/web-extension/src/globals/options.js b/packages/web-extension/src/globals/options.js
@@ -2,8 +2,8 @@ import {
   AlignHorizontalLeft,
   AlignHorizontalCenter,
   AlignHorizontalRight,
-  FitToWidth
-} from "@carbon/icons-react";
+  FitToWidth,
+} from '@carbon/icons-react';
 
 const positions = {
   'Full width': FitToWidth,

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 carbonSettings from '@carbon/web-components/es/globals/settings';
 
 const {
   devtoolsAttribute: cloudCognitiveDevtoolsAttribute,

diff --git a/packages/web-extension/src/globals/setPrefix.js b/packages/web-extension/src/globals/setPrefix.js
@@ -1,3 +1,4 @@
-import settings from 'carbon-components/es/globals/js/settings';
+/* eslint-disable no-import-assign */
+import * as settings from '@carbon/web-components/es/globals/settings.js';
 settings.carbonPrefix = settings.prefix;
-settings.prefix = 'bx-dev';
+settings.prefix = `${settings.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,4 +1,4 @@
-import settings from 'carbon-components/es/globals/js/settings';
+import * as settings 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';

diff --git a/packages/web-extension/src/inject/components/BreakpointLabel/index.scss b/packages/web-extension/src/inject/components/BreakpointLabel/index.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable a11y/media-prefers-reduced-motion */
 @use 'sass:map';
 @use 'sass:math';
 @use '@carbon/react/scss/breakpoint';

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,4 +1,4 @@
-import settings from 'carbon-components/es/globals/js/settings';
+import * as settings 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';

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 * as settings 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';

diff --git a/packages/web-extension/src/inject/components/Grid/index.scss b/packages/web-extension/src/inject/components/Grid/index.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable a11y/media-prefers-reduced-motion */
 @use 'sass:math';
 @use '../../vars.scss' as *;
 @use '@carbon/react/scss/colors';
@@ -122,9 +123,10 @@
     // gutter
     &--outer {
       [class*='#{$prefix}--col-']::before {
-        box-shadow:
-          math.div(grid.$grid-gutter, 2) 0 0 rgba($grid-outer-color, $grid-outer-opacity),
-          math.div(grid.$grid-gutter, -2) 0 0 rgba($grid-outer-color, $grid-outer-opacity);
+        box-shadow: math.div(grid.$grid-gutter, 2) 0 0
+            rgba($grid-outer-color, $grid-outer-opacity),
+          math.div(grid.$grid-gutter, -2) 0 0
+            rgba($grid-outer-color, $grid-outer-opacity);
       }
     }
 
@@ -141,11 +143,14 @@
     // gutter + column border
     &--outer.#{$prefix}--grid-2x--inner-border {
       [class*='#{$prefix}--col-']::before {
-        box-shadow:
-          math.div(grid.$grid-gutter, 2) 0 0 rgba($grid-outer-color, $grid-outer-opacity),
-          math.div(grid.$grid-gutter, -2) 0 0  rgba($grid-outer-color, $grid-outer-opacity),
-          $grid-inner-border-size 0 0 rgba($grid-inner-border-color, $grid-inner-border-opacity),
-          ($grid-inner-border-size * -1) 0 0 rgba($grid-inner-border-color, $grid-inner-border-opacity);
+        box-shadow: math.div(grid.$grid-gutter, 2) 0 0
+            rgba($grid-outer-color, $grid-outer-opacity),
+          math.div(grid.$grid-gutter, -2) 0 0
+            rgba($grid-outer-color, $grid-outer-opacity),
+          $grid-inner-border-size 0 0
+            rgba($grid-inner-border-color, $grid-inner-border-opacity),
+          ($grid-inner-border-size * -1) 0 0
+            rgba($grid-inner-border-color, $grid-inner-border-opacity);
       }
     }
 

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,4 +1,4 @@
-import settings from 'carbon-components/es/globals/js/settings';
+import * as settings from '@carbon/web-components/es/globals/settings.js';
 import { getStorage } from '@carbon/devtools-utilities/src/getStorage';
 import { storageItemChanged } from '@carbon/devtools-utilities/src/storageItemChanged';
 

diff --git a/packages/web-extension/src/inject/components/Highlight/index.js b/packages/web-extension/src/inject/components/Highlight/index.js
@@ -1,4 +1,4 @@
-import settings from 'carbon-components/es/globals/js/settings';
+import * as settings from '@carbon/web-components/es/globals/settings.js';
 import { findAllDomShadow } from '@carbon/devtools-utilities/src/shadowDom';
 import { randomId } from '@carbon/devtools-utilities/src/randomId';
 

diff --git a/packages/web-extension/src/inject/components/Highlight/index.scss b/packages/web-extension/src/inject/components/Highlight/index.scss
@@ -22,7 +22,7 @@ $highlight-opacity: 0.5;
     opacity: 1;
 
     span {
-      // @include type.type-style('fluid-paragraph-01');
+      @include type.type-style('fluid-paragraph-01', true);
 
       display: inline-block;
       margin: auto;

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 * as settings from '@carbon/web-components/es/globals/settings.js';
 import {
   positionTooltip,
   showHideTooltip,

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

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 * as settings from '@carbon/web-components/es/globals/settings.js';
 import { addHighlight } from '../../Highlight';
 import {
   positionTooltip,

diff --git a/packages/web-extension/src/inject/components/Specs/Color/index.scss b/packages/web-extension/src/inject/components/Specs/Color/index.scss
@@ -2,7 +2,6 @@
 @use '@carbon/react/scss/spacing';
 @use '@carbon/react/scss/theme';
 
-
 .#{$specs-prefix} {
   &-color-tooltip {
     &__color {

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 * as settings from '@carbon/web-components/es/globals/settings.js';
 import { addHighlight } from '../../Highlight';
 import {
   positionTooltip,

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 * as settings from '@carbon/web-components/es/globals/settings.js';
 import { breakpoints, rem } from '@carbon/layout';
 import { carbonPrefix } from '../../../../globals';
 import { addHighlight } from '../../Highlight';

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,4 +1,4 @@
-import settings from 'carbon-components/es/globals/js/settings';
+import * as settings from '@carbon/web-components/es/globals/settings.js';
 
 const { prefix } = settings;
 

diff --git a/packages/web-extension/src/inject/components/Specs/Outline/index.scss b/packages/web-extension/src/inject/components/Specs/Outline/index.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable a11y/media-prefers-reduced-motion */
 @use '../../../vars.scss' as *;
 
 .#{$specs-prefix} {

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 * as settings 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';

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 * as settings from '@carbon/web-components/es/globals/settings.js';
 import { addHighlight } from '../../Highlight';
 import {
   positionTooltip,

diff --git a/packages/web-extension/src/inject/components/Specs/Spacing/index.scss b/packages/web-extension/src/inject/components/Specs/Spacing/index.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable a11y/media-prefers-reduced-motion */
 @use '../../../vars.scss' as *;
 @use '@carbon/react/scss/type';
 

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 * as settings 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';

diff --git a/packages/web-extension/src/inject/components/Tooltip/index.js b/packages/web-extension/src/inject/components/Tooltip/index.js
@@ -1,4 +1,4 @@
-import settings from 'carbon-components/es/globals/js/settings';
+import * as settings from '@carbon/web-components/es/globals/settings.js';
 import { setPx } from '@carbon/devtools-utilities/src/setPx';
 
 const { prefix } = settings;

diff --git a/packages/web-extension/src/inject/index.scss b/packages/web-extension/src/inject/index.scss
@@ -1,11 +1,10 @@
-/* stylelint-disable no-invalid-position-at-import-rule */
 @use 'sass:map';
 
-@use "./vars.scss" as *;
-@use "@carbon/react/scss/colors";
+@use './vars.scss' as *;
+@use '@carbon/react/scss/colors';
 @use '@carbon/react/scss/breakpoint';
 @use '@carbon/react/scss/fonts';
-@use "@carbon/react/scss/grid";
+@use '@carbon/react/scss/grid';
 @use '@carbon/react/scss/motion';
 @use '@carbon/react/scss/spacing';
 @use '@carbon/react/scss/themes';

diff --git a/packages/web-extension/src/inject/vars.scss b/packages/web-extension/src/inject/vars.scss
@@ -1,6 +1,6 @@
-@use "@carbon/react/scss/config";
-@use "@carbon/react/scss/motion";
-@use "@carbon/react/scss/colors";
+@use '@carbon/react/scss/config';
+@use '@carbon/react/scss/motion';
+@use '@carbon/react/scss/colors';
 
 $prefix: '#{config.$prefix}-dev';
 $carbonPrefix: config.$prefix;

diff --git a/packages/web-extension/src/options/components/Footer/index.js b/packages/web-extension/src/options/components/Footer/index.js
@@ -1,5 +1,5 @@
-import settings from 'carbon-components/es/globals/js/settings';
-import { Link } from "@carbon/react";
+import * as settings from '@carbon/web-components/es/globals/settings.js';
+import { Link } from '@carbon/react';
 import React from 'react';
 
 import packageJSON from '../../../../package.json';
@@ -21,7 +21,7 @@ const packages = [
   { name, version },
   {
     name: 'carbon',
-    version: getMajorVersion('carbon-components'),
+    version: getMajorVersion('@carbon/react'),
   },
   {
     name: CLOUD_COGNITIVE,
@@ -30,7 +30,7 @@ const packages = [
 
   {
     name: 'ibm.com library',
-    version: getMajorVersion('@carbon/ibmdotcom-react'),
+    version: getMajorVersion('@carbon/ibmdotcom-web-components'),
   },
   {
     name: 'ibm security',

diff --git a/packages/web-extension/src/options/components/General/index.js b/packages/web-extension/src/options/components/General/index.js
@@ -1,11 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import settings from 'carbon-components/es/globals/js/settings';
-import {
-  Select,
-  SelectItem,
-  Toggle
-} from "@carbon/react";
+import * as settings from '@carbon/web-components/es/globals/settings.js';
+import { Select, SelectItem, Toggle } from '@carbon/react';
 import { setStorage } from '@carbon/devtools-utilities/src/setStorage';
 import { configuration } from '../';
 import { themes } from '@carbon/themes';

diff --git a/packages/web-extension/src/options/components/Grid/index.js b/packages/web-extension/src/options/components/Grid/index.js
@@ -1,10 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import settings from 'carbon-components/es/globals/js/settings';
-import {
-  Select,
-  SelectItem
-} from "@carbon/react";
+import * as settings from '@carbon/web-components/es/globals/settings.js';
+import { Select, SelectItem } from '@carbon/react';
 import { configuration } from '../';
 import { gridVersions } from '../../../globals/options';
 import { defaults } from '../../../globals/defaults';

diff --git a/packages/web-extension/src/options/components/Reset/index.js b/packages/web-extension/src/options/components/Reset/index.js
@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import settings from 'carbon-components/es/globals/js/settings';
-import { Button } from "@carbon/react";
-import { CheckmarkOutline } from "@carbon/icons-react";
+import * as settings from '@carbon/web-components/es/globals/settings.js';
+import { Button } from '@carbon/react';
+import { CheckmarkOutline } from '@carbon/icons-react';
 import { configuration } from '../';
 
 const { prefix } = settings;

diff --git a/packages/web-extension/src/options/components/Shortcuts/index.js b/packages/web-extension/src/options/components/Shortcuts/index.js
@@ -1,16 +1,13 @@
 import React from 'react';
-import settings from 'carbon-components/es/globals/js/settings';
+import * as settings from '@carbon/web-components/es/globals/settings.js';
 import {
   StructuredListWrapper,
   StructuredListHead,
   StructuredListBody,
   StructuredListRow,
   StructuredListCell,
 } from '@carbon/react';
-import {
-  MacShift,
-  Cursor_1
-} from "@carbon/icons-react";
+import { MacShift, Cursor_1 } from '@carbon/icons-react';
 
 const { prefix } = settings;
 

diff --git a/packages/web-extension/src/options/components/Shortcuts/index.scss b/packages/web-extension/src/options/components/Shortcuts/index.scss
@@ -13,7 +13,7 @@
     @include type.type-style('code-01');
 
     display: flex;
-    padding: calc(0.5 * 0.5rem) calc(1  * 0.5rem);
+    padding: calc(0.5 * 0.5rem) calc(1 * 0.5rem);
     border-radius: calc(0.25 * 0.5rem);
     margin-right: calc(0.5 * 0.5rem);
     background-color: theme.$layer-01;

diff --git a/packages/web-extension/src/options/index.js b/packages/web-extension/src/options/index.js
@@ -1,10 +1,7 @@
-import React, { useState, useEffect } from 'react';
-import ReactDOM from 'react-dom';
-import settings from 'carbon-components/es/globals/js/settings';
-import {
-  Accordion,
-  AccordionItem
-} from '@carbon/react';
+import React, { useState, useEffect, StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import * as settings from '@carbon/web-components/es/globals/settings.js';
+import { Accordion, AccordionItem } from '@carbon/react';
 import { Footer, General, Grid, Shortcuts, Reset } from './components';
 import { storageChanged } from '@carbon/devtools-utilities/src/storageChanged';
 import { getStorage } from '@carbon/devtools-utilities/src/getStorage';
@@ -60,4 +57,8 @@ function Options() {
 
 const body = document.querySelector('body');
 body.innerHTML = '<div id="app"></div>' + body.innerHTML;
-ReactDOM.render(<Options />, document.getElementById('app'));
+createRoot(document.getElementById('app')).render(
+  <StrictMode>
+    <Options />
+  </StrictMode>
+);
diff --git a/packages/web-extension/src/options/index.scss b/packages/web-extension/src/options/index.scss
@@ -1,10 +1,10 @@
-@use "sass:math";
+@use 'sass:math';
 
 // Import Carbon Tokens
-@use "@carbon/react/scss/config" as *;
+@use '@carbon/react/scss/config' as *;
 @use '@carbon/react/scss/breakpoint';
 @use '@carbon/react/scss/fonts';
-@use "@carbon/react/scss/grid";
+@use '@carbon/react/scss/grid';
 @use '@carbon/react/scss/motion';
 @use '@carbon/react/scss/spacing';
 @use '@carbon/react/scss/themes';

diff --git a/packages/web-extension/src/popup/components/ComingSoon/index.js b/packages/web-extension/src/popup/components/ComingSoon/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Sprout } from "@carbon/icons-react";
+import { Sprout } from '@carbon/icons-react';
 
 function ComingSoon() {
   return (

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

diff --git a/packages/web-extension/src/popup/components/Empty/index.scss b/packages/web-extension/src/popup/components/Empty/index.scss
@@ -1,6 +1,6 @@
-@use "@carbon/react/scss/config" as *;
-@use "@carbon/react/scss/spacing";
-@use "@carbon/react/scss/type";
+@use '@carbon/react/scss/config' as *;
+@use '@carbon/react/scss/spacing';
+@use '@carbon/react/scss/type';
 
 @mixin empty {
   .#{$prefix}--popup-empty {

diff --git a/packages/web-extension/src/popup/components/Grid/Grid2xOptions.js b/packages/web-extension/src/popup/components/Grid/Grid2xOptions.js
@@ -1,13 +1,13 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import settings from 'carbon-components/es/globals/js/settings';
+import * as settings from '@carbon/web-components/es/globals/settings.js';
 import {
   Checkbox,
   FormGroup,
   NumberInput,
   ContentSwitcher,
   Switch,
-  FormLabel
+  FormLabel,
 } from '@carbon/react';
 import { setStorage } from '@carbon/devtools-utilities/src/setStorage';
 import { getStorage } from '@carbon/devtools-utilities/src/getStorage';