chore(rtl): remove unused docs and deps (#11592)

### Description

This removes unneeded `rtl` documentation and dependencies.

### Changelog

**New**

**Removed**

- `rtl` deps and docs

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->

packages/carbon-web-components/.storybook/main.js

@@ -1,19 +1,17 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2023
+ * Copyright IBM Corp. 2020, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
 const path = require('path');
 const sass = require('sass');
-const rtlcss = require('rtlcss');
 const deepReplace = require('../tools/deep-replace');
 
 const { getPaths } = deepReplace;
-const useRtl = process.env.STORYBOOK_CARBON_CUSTOM_ELEMENTS_USE_RTL === 'true';
 
 const arrayify = (value) =>
   Array.isArray(value) ? value : value != null ? [value] : []; // eslint-disable-line no-nested-ternary
@@ -117,7 +115,6 @@ module.exports = {
               plugins: () => [
                 require('../tools/postcss-fix-host-pseudo')(),
                 require('autoprefixer')(),
-                ...(useRtl ? [rtlcss] : []),
               ],
             },
           },

packages/carbon-web-components/docs/styling.md

@@ -71,34 +71,6 @@ following:
 @include theme.add-component-tokens(tag-tokens.$tag-tokens);
 ```
 
-## Dependency injection
-
-You can let our custom elements modules load alternate `CSSResult` module. Below
-example uses
-[Webpack `NormalModuleReplacementPlugin`](https://webpack.js.org/plugins/normal-module-replacement-plugin/)
-to let our custom elements modules load RTL version of `CSSResult` module that
-is shipped alongside with default `CSSResult` modules, instead of loading the
-default version:
-
-[![Edit @carbon/web-components with custom style](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/rtl?)
-
-```javascript
-const reCssBundle = /\.css\.js$/i;
-
-...
-
-module.exports = {
-  ...
-  plugins: [
-    ...
-    new webpack.NormalModuleReplacementPlugin(reCssBundle, resource => {
-      resource.request = resource.request.replace(reCssBundle, '.rtl.css.js');
-    }),
-  ],
-  ...
-};
-```
-
 ## Creating derived components with different style
 
 You can create a derived class of our component and override

packages/carbon-web-components/src/globals/internal/storybook-cdn.ts

@@ -19,13 +19,11 @@ import packageJson from '../../../package.json';
  *
  * @param {Array} components array of component names
  * @param {string} tag tag folder
- * @param {boolean} isRTL flag to show rtl version
  */
-function _renderScript(components, tag, isRTL = false) {
+function _renderScript(components, tag) {
   let scripts = '';
-  const rtl = isRTL ? '.rtl' : '';
   components.forEach((component) => {
-    scripts += `<script type="module" src="https://1.www.s81c.com/common/carbon/web-components/${tag}/${component}${rtl}.min.js"></script>\n`;
+    scripts += `<script type="module" src="https://1.www.s81c.com/common/carbon/web-components/${tag}/${component}.min.js"></script>\n`;
   });
   return scripts;
 }
@@ -51,7 +49,7 @@ export const cdnJs = ({ components }) => {
 
  \`\`\`html
  // SPECIFIC VERSION (available starting v2.0.0)
- ${_renderScript(components, `version/v${packageJson.version}`, true)}
+ ${_renderScript(components, `version/v${packageJson.version}`)}
  \`\`\`
    `;
 };

packages/carbon-web-components/tools/get-rollup-config.js

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2023
+ * Copyright IBM Corp. 2020, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -17,7 +17,6 @@ const path = require('path');
 const postcss = require('postcss');
 const replace = require('@rollup/plugin-replace');
 const { nodeResolve } = require('@rollup/plugin-node-resolve');
-const rtlcss = require('rtlcss');
 const { promisify } = require('util');
 const { terser } = require('rollup-plugin-terser');
 
@@ -41,11 +40,10 @@ const modeSuffixes = {
 /**
  * Stores the suffix to append for render direction setting
  *
- * @type {{ltr: string, rtl: string}}
+ * @type {{ltr: string}}
  */
 const dirSuffixes = {
   ltr: '',
-  rtl: '.rtl',
 };
 
 /**
@@ -72,23 +70,17 @@ function _generateInputs(mode, dir, folders) {
 /**
  * Gets the PostCSS plugin configuration
  *
- * @param {string} mode The build mode
- * @param {string} dir The UI direction
+ * @param {string} mode The build mode\
  * @private
  */
-function _getPostCSSPlugins(mode, dir) {
+function _getPostCSSPlugins(mode) {
   const postCSSPlugins = [fixHostPseudo(), autoprefixer()];
 
   // Add cssnano for production mode
   if (mode !== 'development') {
     postCSSPlugins.push(cssnano());
   }
 
-  // Add rtlcss if enabled
-  if (dir === 'rtl') {
-    postCSSPlugins.push(rtlcss);
-  }
-
   return postCSSPlugins;
 }
 

packages/styles/gulp/build/default.js

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2020
+ * Copyright IBM Corp. 2020, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -15,4 +15,4 @@ const gulp = require('gulp');
  * @module default
  */
 module.exports = gulp.task('default', gulp.series('clean',
-    gulp.parallel('sass-ltr', 'sass-rtl')));
+    gulp.parallel('sass-ltr')));

packages/styles/gulp/config.js

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2020
+ * Copyright IBM Corp. 2020, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -13,9 +13,7 @@
 global.config = {
   distPath: 'dist/**/*',
   distCss: 'ibm-dotcom-styles.css',
-  distRtlCss: 'ibm-dotcom-styles-rtl.css',
   distCssMin: 'ibm-dotcom-styles.min.css',
-  distRtlCssMin: 'ibm-dotcom-styles-rtl.min.css',
   scssEntry: 'scss/ibm-dotcom-styles.scss',
   scssFiles: 'scss/**/*.scss',
 };

packages/styles/gulp/tasks/watch.js

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2020, 2023
+ * Copyright IBM Corp. 2020, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -15,5 +15,5 @@ const gulp = require('gulp');
  * @module watch
  */
 module.exports = gulp.task('watch', () => {
-  gulp.watch(global.config.scssFiles, gulp.parallel('sass-ltr', 'sass-rtl'));
+  gulp.watch(global.config.scssFiles, gulp.parallel('sass-ltr'));
 });

packages/styles/package.json

@@ -42,7 +42,6 @@
     "gulp-autoprefixer": "^6.1.0",
     "gulp-clean-css": "^4.3.0",
     "gulp-rename": "^2.0.0",
-    "gulp-rtlcss": "^1.4.1",
     "gulp-sass": "^5.0.0",
     "require-dir": "^1.2.0",
     "sass": "~1.71.0",

packages/web-components/IMPLEMENTATION_NOTES.md

@@ -55,7 +55,6 @@ umbrella.
     - [Seeing if a particular method has been called or a particular event has been fired](#seeing-if-a-particular-method-has-been-called-or-a-particular-event-has-been-fired)
   - [Defining mocks](#defining-mocks)
   - [Restoring state](#restoring-state)
-- [RTL support](#rtl-support)
 - [Storybook CSF integration](#storybook-csf-integration)
 - [License header](#license-header-1)
 - [Focus wrapping](#focus-wrapping)
@@ -783,47 +782,6 @@ to clean up event handlers after tests. This way, we can attach events with
 and clean them up with
 ([`events.reset()`](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.15.0/packages/web-components/src/components/expressive-modal/__tests__/expressive-modal.test.ts#L264)).
 
-## RTL support
-
-While CSS
-[logical properties and values](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties)
-allow us to support LTR and RTL in one codebase, there are several key
-properties that are not yet supported by some browsers, for example
-[`inset-inline-start`](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start).
-
-We could use the `dir` attribute selector, but it causes problems with selector
-specificity between direction-specific CSS rulesets vs. non-direction-specific
-CSS rulesets.
-
-To deal with this problem, `@carbon/ibmdotcom-web-components` generates seprate
-CSS for LTR and RTL in its build process.
-
-The build process for the NPM package generates an
-[RTL version](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.15.0/packages/web-components/gulp-tasks/build.js#L80)
-of CSS files as
-[`*.rtl.css.js`](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.15.0/packages/web-components/gulp-tasks/build.js#L90),
-in addition to the LTR version. It also generates RTL version of
-[pre-built bundle](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.15.0/packages/web-components/tools/get-rollup-config.js#L65-L67)
-as
-[`ibmdotcom-web-components-dotcom-shell.rtl.min.js`](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.15.0/packages/web-components/gulp-tasks/build.js#L120).
-
-The development environment looks at the `STORYBOOK_USE_RTL` environment
-variable to determine the
-[`dir`](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.15.0/packages/web-components/.storybook/config.ts#L24-L26)
-attribute of `<html>`, while also choosing either the LTR or RTL version of the
-[CSS build](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.15.0/packages/web-components/.storybook/webpack.config.js#L136)
-to use.
-
-Both of the above use [RTLCSS](https://rtlcss.com) to generate the RTL version.
-RTLCSS has [control](https://rtlcss.com/learn/usage-guide/control-directives/)
-and [value](https://rtlcss.com/learn/usage-guide/value-directives/) directives
-that `@carbon/ibmdotcom-web-components`
-[utilizes](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.15.0/packages/web-components/src/components/masthead/masthead.scss#L347-L356).
-
-See the usage
-[documentation](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.15.0/packages/web-components/docs/enable-rtl.md)
-for more information about the RTL version of the CSS.
-
 ## Storybook CSF integration
 
 Storybook introduced a new story format in version `5`, called Component Story

packages/web-components/README.md

@@ -16,11 +16,9 @@ Custom Elements v1 and Shadow DOM v1 specs.
   - [Webpack Application Setup](#webpack-application-setup)
     - [Basic Setup](#basic-setup)
     - [Using Sass](#using-sass)
-    - [Enabling RTL](#enabling-rtl)
     - [Process.env Error](#processenv-error)
   - [CDN Bundles](#cdn-bundles)
     - [Versioned Bundles](#versioned-bundles)
-    - [Using RTL](#using-rtl)
   - [Using with other design systems (e.g Northstar v18)](#using-with-other-design-systems-eg-northstar-v18)
 - [Browser support](#browser-support)
 - [List of available components](#list-of-available-components)
@@ -186,19 +184,6 @@ c4d-button-group:not(:defined) {
 }
 ```
 
-#### Enabling RTL
-
-[Right-to-Left](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/web-components/docs/enable-rtl.md)
-rendering is enabled through the application bundle process, as part of the
-styles are rendered through [RTLCSS](https://rtlcss.com/). An example below
-shows how to enable in Webpack:
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/usage/webpack-rtl)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/usage/webpack-rtl)
-
 #### Process.env Error
 
 There are references to the `process.env` global variable in the our
@@ -336,16 +321,6 @@ A specific release would be called as:
 > stay on the most recent version, it is recommended to choose a specific
 > version and properly test your application when upgrading to a newer version.
 
-#### Using RTL
-
-Right-to-Left (RTL) pre-built bundles are also available for the dotcom shell.
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/usage/dotcom-shell-cdn-with-rtl)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/usage/dotcom-shell-cdn-with-rtl)
-
 ### Using with other design systems (e.g Northstar v18)
 
 [Shadow DOM](https://w3c.github.io/webcomponents/spec/shadow/), one of the

packages/web-components/package.json

@@ -53,7 +53,6 @@
     "build-storybook": "build-storybook",
     "build-storybook:experimental": "cross-env C4D_FLAGS_ALL=true build-storybook -o storybook-static-experimental",
     "build-storybook:react": "gulp build:modules:react && node --max-old-space-size=8192 node_modules/@storybook/react/bin/build.js -c .storybook/react -o storybook-static-react",
-    "build-storybook:rtl": "cross-env STORYBOOK_USE_RTL=true build-storybook -o storybook-static-rtl",
     "ci-check": "yarn wca && yarn typecheck && yarn build && yarn test:unit",
     "clean": "gulp clean",
     "clean:dist": "rimraf dist",