Merge pull request #3264 from mi6/update-checkbox-rtl

Update checkbox for right to left pages
mi6 · Feb 26, 2025 · e8077f3 · e8077f3
2 parents 0b284c2 + 527889a
commit e8077f3
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 0 deletions.
diff --git a/packages/web-components/src/components/ic-checkbox-group/ic-checkbox-group.stories.js b/packages/web-components/src/components/ic-checkbox-group/ic-checkbox-group.stories.js
@@ -612,6 +612,33 @@ export const TextFieldValueChange = {
   name: "TextField value change",
 };
 
+export const RTL = {
+  render: (args) => html`
+    <ic-checkbox-group label="This is a label" name="group1" dir="rtl">
+      <ic-checkbox
+        value="valueName1"
+        label="Indeterminate"
+        indeterminate="true"
+      ></ic-checkbox>
+      <ic-checkbox value="valueName2" label="Selected" checked></ic-checkbox>
+      <ic-checkbox value="valueName3" label="Disabled" disabled></ic-checkbox>
+      <ic-checkbox
+        additional-field-display="dynamic"
+        value="valueName4"
+        label="Conditional dynamic"
+      >
+        <ic-text-field
+          slot="additional-field"
+          placeholder="Placeholder"
+          label="What's your favourite type of coffee?"
+        ></ic-text-field>
+      </ic-checkbox>
+    </ic-checkbox-group>
+  `,
+
+  name: "RTL",
+};
+
 export const Playground = {
   render: (args) => {
     const [{ checked }, updateArgs] = useArgs();

diff --git a/packages/web-components/src/components/ic-checkbox/ic-checkbox.css b/packages/web-components/src/components/ic-checkbox/ic-checkbox.css
@@ -232,3 +232,27 @@
     display: none;
   }
 }
+
+/* Right to left */
+.checkmark:dir(rtl) {
+  right: 0;
+}
+
+.checkbox-label:dir(rtl) {
+  padding-right: var(--ic-space-sm);
+  padding-left: 0;
+}
+
+.indeterminate-symbol:dir(rtl) {
+  right: 0.288rem;
+}
+
+.branch-corner:dir(rtl) {
+  border-radius: 0 0 0.188rem 0;
+  border-right: 0.125rem solid var(--ic-action-default);
+  border-left: none;
+}
+
+.dynamic-container:dir(rtl) {
+  margin: var(--ic-space-xxxs) var(--ic-space-sm) var(--ic-space-xxs) 0;
+}