From c2972a1f6b693567d2727fd1f9794f5db6f1535a Mon Sep 17 00:00:00 2001
From: Josh Wooding <12938082+joshwooding@users.noreply.github.com>
Date: Mon, 19 Aug 2024 12:59:06 +0100
Subject: [PATCH] Checkbox and RadioButton fixes (#4001)

---
 .changeset/little-bobcats-obey.md                  | 6 ++++++
 packages/core/src/checkbox/Checkbox.css            | 4 ----
 packages/core/src/checkbox/CheckboxIcon.css        | 6 ++++++
 packages/core/src/radio-button/RadioButton.css     | 5 -----
 packages/core/src/radio-button/RadioButtonIcon.css | 8 +++++++-
 5 files changed, 19 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/little-bobcats-obey.md

diff --git a/.changeset/little-bobcats-obey.md b/.changeset/little-bobcats-obey.md
new file mode 100644
index 00000000000..2a16cd272e1
--- /dev/null
+++ b/.changeset/little-bobcats-obey.md
@@ -0,0 +1,6 @@
+---
+"@salt-ds/core": patch
+---
+
+- Fixed Checkbox and RadioButton shifting when selected outside of a flex layout.
+- Fixed Checkbox and RadioButton, sometimes having a gap between the border and the selected icon.
diff --git a/packages/core/src/checkbox/Checkbox.css b/packages/core/src/checkbox/Checkbox.css
index dffff71fbf2..f78e6a17ff1 100644
--- a/packages/core/src/checkbox/Checkbox.css
+++ b/packages/core/src/checkbox/Checkbox.css
@@ -29,10 +29,6 @@
   box-sizing: border-box;
 }
 
-.saltCheckboxIcon > svg {
-  /* ensures svg is centered in all browsers */
-  transform: translate(0px, 0px);
-}
 /* Styles applied to the icon component if focused */
 .saltCheckbox-input:focus-visible + .saltCheckboxIcon {
   outline-offset: var(--salt-focused-outlineOffset);
diff --git a/packages/core/src/checkbox/CheckboxIcon.css b/packages/core/src/checkbox/CheckboxIcon.css
index bbf3d3fae98..bbb879d65db 100644
--- a/packages/core/src/checkbox/CheckboxIcon.css
+++ b/packages/core/src/checkbox/CheckboxIcon.css
@@ -71,3 +71,9 @@
   border-color: var(--salt-selectable-borderColor-readonly);
   color: var(--salt-content-primary-foreground);
 }
+
+.saltCheckboxIcon > svg {
+  position: absolute;
+  /* Ensure a gap doesn't appear when device scaling is used */
+  transform: scale(1.01);
+}
diff --git a/packages/core/src/radio-button/RadioButton.css b/packages/core/src/radio-button/RadioButton.css
index 3ab09fca814..c2c9d0d1778 100644
--- a/packages/core/src/radio-button/RadioButton.css
+++ b/packages/core/src/radio-button/RadioButton.css
@@ -43,11 +43,6 @@
   box-sizing: border-box;
 }
 
-.saltRadioButtonIcon > svg {
-  /* ensures svg is centered in all browsers */
-  transform: translate(0px, 0px);
-}
-
 /* Styles applied to icon when :focus-visible */
 .saltRadioButton-input:focus-visible + .saltRadioButtonIcon {
   outline: var(--saltRadioButton-outline, var(--salt-focused-outline));
diff --git a/packages/core/src/radio-button/RadioButtonIcon.css b/packages/core/src/radio-button/RadioButtonIcon.css
index d8145fb8aec..93d135629f6 100644
--- a/packages/core/src/radio-button/RadioButtonIcon.css
+++ b/packages/core/src/radio-button/RadioButtonIcon.css
@@ -6,7 +6,7 @@
   min-width: var(--radioButton-size);
   min-height: var(--radioButton-size);
   border-radius: 50%;
-
+  position: relative;
   border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);
   color: var(--salt-selectable-foreground);
   background: var(--salt-container-primary-background);
@@ -57,3 +57,9 @@
   border-color: var(--salt-selectable-borderColor-readonly);
   color: var(--salt-content-primary-foreground);
 }
+
+.saltRadioButtonIcon > svg {
+  position: absolute;
+  /* Ensure a gap doesn't appear when device scaling is used */
+  transform: scale(1.01);
+}