docs(rtl): update rtl docs for logical properties, remove rtlcss

carbon-design-system · Sep 14, 2023 · 18763f4 · 18763f4
1 parent e4734d9
commit 18763f4
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 31 deletions.
diff --git a/.yarn/cache/rtlcss-npm-4.0.0-9a056274ca-cd8fe72848.zip b/.yarn/cache/rtlcss-npm-4.0.0-9a056274ca-cd8fe72848.zip
diff --git a/docs/developer-handbook.md b/docs/developer-handbook.md
@@ -344,6 +344,31 @@ Avoid nesting selectors, this will make it easier to maintain in the future.
 }
 ```
 
+Use
+[CSS logical properties and values](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values)
+for layout. These are impacted by the writing mode and provide support for
+right-to-left styling out of the box.
+
+```scss
+// Don't do this
+.my-element {
+  padding-top: 2em;
+  padding-bottom: 2em;
+  margin-left: 2em;
+  position: relative;
+  top: 0.2em;
+}
+
+// Do this instead
+.my-element {
+  padding-block-start: 2em;
+  padding-block-end: 2em;
+  margin-inline-start: 2em;
+  position: relative;
+  inset-block-start: 0.2em;
+}
+```
+
 ### Sass documentation
 
 [SassDoc](http://sassdoc.com) is used to document the Carbon Sass source.

diff --git a/packages/carbon-components/docs/g11n.md b/packages/carbon-components/docs/g11n.md
diff --git a/packages/react/docs/g11n.md b/packages/react/docs/g11n.md
@@ -20,5 +20,10 @@
   `dateFormat` props to fully utilize `Flatpickr` library's G11N features. If
   you are using date/time in other components, make sure they are correctly
   formatted considering different formats in different locales.
-- Also refer to
-  [G11N considerations in our vanilla library](https://github.com/IBM/carbon-components/tree/main/docs/g11n.md).
+- Styles provided through `@carbon/styles` (and therefore `@carbon/react` as
+  well) use CSS logical properties and values for layout, which is impacted by
+  the writing direction. This means that right-to-left styling is included out
+  of the box. In previous versions of carbon packages, RTLCSS had to be used by
+  consuming projects to output styles for right-to-left mode. RTLCSS is no
+  longer needed now that logical properties are used. See more in the
+  [original issue](https://github.com/carbon-design-system/carbon/issues/13619).
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -117,7 +117,6 @@
     "rimraf": "^5.0.0",
     "rollup": "^2.79.1",
     "rollup-plugin-strip-banner": "^3.0.0",
-    "rtlcss": "^4.0.0",
     "sass": "^1.51.0",
     "sass-loader": "^13.0.0",
     "storybook": "^7.1.0",

diff --git a/yarn.lock b/yarn.lock
@@ -2207,7 +2207,6 @@ __metadata:
     rimraf: ^5.0.0
     rollup: ^2.79.1
     rollup-plugin-strip-banner: ^3.0.0
-    rtlcss: ^4.0.0
     sass: ^1.51.0
     sass-loader: ^13.0.0
     storybook: ^7.1.0
@@ -27876,20 +27875,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rtlcss@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "rtlcss@npm:4.0.0"
-  dependencies:
-    escalade: ^3.1.1
-    picocolors: ^1.0.0
-    postcss: ^8.4.6
-    strip-json-comments: ^3.1.1
-  bin:
-    rtlcss: bin/rtlcss.js
-  checksum: cd8fe728489cc8a066a58ea518ac2089c245dede9bda376c1b33ae0c119fa9dbdb6808eee27697ecad3bfed8f338d10bfeb42c1efa60c262a9def0246233484c
-  languageName: node
-  linkType: hard
-
 "run-applescript@npm:^5.0.0":
   version: 5.0.0
   resolution: "run-applescript@npm:5.0.0"