From 544ab8bb171c28790a1b96ee67febe72f41f9297 Mon Sep 17 00:00:00 2001
From: Uyen Doan <uyen.doan@bentley.com>
Date: Wed, 18 Sep 2024 16:59:57 -0500
Subject: [PATCH 01/23] removed checkbox mixins

---
 apps/css-workshop/src/components/Radio.astro  |   9 +-
 .../itwinui-css/src/checkbox/checkbox.scss    | 144 ++++++++++++++++-
 packages/itwinui-css/src/checkbox/mixins.scss | 149 ------------------
 packages/itwinui-css/src/radio/radio.scss     |   8 -
 .../itwinui-react/src/core/Radio/Radio.tsx    |   4 +-
 5 files changed, 150 insertions(+), 164 deletions(-)
 delete mode 100644 packages/itwinui-css/src/checkbox/mixins.scss

diff --git a/apps/css-workshop/src/components/Radio.astro b/apps/css-workshop/src/components/Radio.astro
index bb350cecc17..b6fd281d6a4 100644
--- a/apps/css-workshop/src/components/Radio.astro
+++ b/apps/css-workshop/src/components/Radio.astro
@@ -13,7 +13,7 @@ const { disabled, status, class: className, labelPosition = 'right', ...props }
 
 <label
   class:list={[
-    'iui-radio-wrapper',
+    'iui-checkbox-wrapper',
     {
       'iui-disabled': disabled,
       [`iui-${status}`]: !!status,
@@ -27,7 +27,12 @@ const { disabled, status, class: className, labelPosition = 'right', ...props }
       </span>
     )
   }
-  <input class:list={['iui-radio', className]} type='radio' disabled={disabled} {...props} />
+  <input
+    class:list={['iui-checkbox', 'iui-radio', className]}
+    type='radio'
+    disabled={disabled}
+    {...props}
+  />
   {
     labelPosition === 'right' && (
       <span class='iui-radio-label'>
diff --git a/packages/itwinui-css/src/checkbox/checkbox.scss b/packages/itwinui-css/src/checkbox/checkbox.scss
index ea43c060cb6..71ea3aef0db 100644
--- a/packages/itwinui-css/src/checkbox/checkbox.scss
+++ b/packages/itwinui-css/src/checkbox/checkbox.scss
@@ -1,11 +1,149 @@
 // Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 // See LICENSE.md in the project root for license terms and full copyright notice.
-@use './mixins' as *;
+@use '../mixins';
 
 .iui-checkbox-wrapper {
-  @include iui-checkbox-wrapper;
+  @include mixins.iui-reset;
+  display: flex;
+  align-items: center;
+  font-size: var(--iui-font-size-1);
+  inline-size: fit-content;
+  user-select: none;
+  position: relative;
+  cursor: pointer;
+  color: var(--iui-color-text);
+  gap: var(--iui-size-xs);
+
+  &.iui-loading {
+    cursor: progress;
+    font-style: italic;
+    color: var(--iui-color-text-disabled);
+  }
+
+  > .iui-checkbox-label,
+  > .iui-radio-label {
+    line-height: var(--iui-size-l);
+
+    svg {
+      @include mixins.iui-icon-style('m');
+      vertical-align: middle;
+      fill: var(--iui-color-icon);
+    }
+  }
+
+  &.iui-disabled {
+    cursor: not-allowed;
+    color: var(--iui-color-text-disabled);
+
+    svg {
+      fill: var(--iui-color-icon-disabled);
+    }
+  }
+
+  &.iui-positive {
+    color: var(--iui-color-text-positive);
+  }
+
+  &.iui-warning {
+    color: var(--iui-color-text-warning);
+  }
+
+  &.iui-negative {
+    color: var(--iui-color-text-negative);
+  }
 }
 
 .iui-checkbox {
-  @include iui-checkbox;
+  --_iui-checkbox-checkmark-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m6.5 12.5-4.5-4.5 1.5-1.5 3 3 6-6 1.5 1.5z" /></svg>');
+  --_iui-checkbox-indeterminate-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m2.75 6.875h10.5v2.25h-10.5z" /></svg>');
+  --_iui-checkbox-unchecked-svg: url('data:image/svg+xml;utf8,<svg viewBox="0 0 16 16"></svg>');
+
+  --_iui-checkbox-svg-color: var(--iui-color-icon-accent);
+  --_iui-checkbox-border-color: var(--iui-color-border-foreground);
+  --_iui-checkbox-background-color: var(--iui-color-background);
+  --_iui-checkbox-mask-image: initial;
+
+  @include mixins.iui-icon-style('m');
+  appearance: none; // disable default browser styles
+  margin: 0;
+  position: relative;
+  border-radius: var(--iui-border-radius-1);
+  background-color: var(--_iui-checkbox-background-color);
+  cursor: pointer;
+  transition: outline-color var(--iui-duration-1) ease-out;
+  outline: solid 1px var(--_iui-checkbox-border-color);
+  outline-offset: -1px;
+
+  // increase tap target size to 24x24 by default and allow adjusting through CSS var
+  &::before {
+    content: '';
+    position: absolute;
+    inset: calc((var(--iui-checkbox-target-size, 24px) - 16px) / -2);
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-color: var(--_iui-checkbox-svg-color);
+    mask: var(--_iui-checkbox-mask-image) no-repeat center;
+  }
+
+  &:not(:checked) {
+    --_iui-checkbox-mask-image: var(--_iui-checkbox-unchecked-svg);
+  }
+
+  &:checked {
+    --_iui-checkbox-mask-image: var(--_iui-checkbox-checkmark-svg);
+  }
+
+  &:indeterminate {
+    --_iui-checkbox-mask-image: var(--_iui-checkbox-indeterminate-svg);
+  }
+
+  &:hover {
+    --_iui-checkbox-border-color: var(--iui-color-border-foreground-hover);
+  }
+
+  @include mixins.iui-focus($thickness: 2px);
+
+  &:disabled {
+    --_iui-checkbox-svg-color: var(--iui-color-icon-disabled);
+    --_iui-checkbox-border-color: var(--iui-color-border-disabled);
+    --_iui-checkbox-background-color: var(--iui-color-background-disabled);
+    cursor: not-allowed;
+  }
+
+  &.iui-checkbox-visibility {
+    --_iui-checkbox-checkmark-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m8 2.99051a8.81883 8.81883 0 0 0 -8 4.95062 8.74664 8.74664 0 0 0 8 5.06836 8.63266 8.63266 0 0 0 8-5.06836 8.83631 8.83631 0 0 0 -8-4.95062zm-1.31445 1.86981a1.47663 1.47663 0 1 1 -1.47663 1.47668 1.47665 1.47665 0 0 1 1.47663-1.47668zm1.31445 6.64917a7.17486 7.17486 0 0 1 -6.30475-3.55237 7.4952 7.4952 0 0 1 2.81475-2.6336 3.83956 3.83956 0 1 0 6.98126.00244 7.522 7.522 0 0 1 2.81774 2.63916 7.09785 7.09785 0 0 1 -6.309 3.54437z" /></svg>');
+    --_iui-checkbox-indeterminate-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m8 3v7.9a4.01179 4.01179 0 0 0 4-4 6.7509 6.7509 0 0 0 -.2-1.4l.1.1a6.89429 6.89429 0 0 1 2.4 2.4 8.39088 8.39088 0 0 1 -2.3 2.3 6.89412 6.89412 0 0 1 -3.9 1.2c-.03345 0-.06653-.00677-.1-.0072v1.5072a8.90686 8.90686 0 0 0 8-5 8.90686 8.90686 0 0 0 -8-5z" opacity=".33" /><path d="m8 0a1 1 0 0 0 -1 1v2.07135a8.91637 8.91637 0 0 0 -7 4.92865 8.91637 8.91637 0 0 0 7 4.92865v2.07135a1 1 0 0 0 2 0v-14a1 1 0 0 0 -1-1zm-1.5 4.9a1.55426 1.55426 0 0 1 .5.087v2.81451a1.40746 1.40746 0 0 1 -.5.09849 1.538 1.538 0 0 1 -1.5-1.5 1.53794 1.53794 0 0 1 1.5-1.5zm-2.3 5.4a6.97279 6.97279 0 0 1 -2.5-2.3 6.89429 6.89429 0 0 1 2.4-2.4c.1 0 .1-.1.2-.1a3.194 3.194 0 0 0 -.3 1.4 4.0047 4.0047 0 0 0 3 3.857v.65289a6.37491 6.37491 0 0 1 -2.8-1.10989z" /></svg>');
+    --_iui-checkbox-unchecked-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m1.70671 12.879 11.17218-11.17219 1.4142 1.4142-11.17218 11.17218zm.99329-1.679 1.1-1.1a5.06317 5.06317 0 0 1 -2-2.1 7.48268 7.48268 0 0 1 6.2-3.5 4.86877 4.86877 0 0 1 1.2.1l1.3-1.3a10.07431 10.07431 0 0 0 -2.5-.3 8.84129 8.84129 0 0 0 -8 5 8.42455 8.42455 0 0 0 2.7 3.2zm10.7-6.4-1.1 1.1a7.08625 7.08625 0 0 1 2 2.1 7.50323 7.50323 0 0 1 -6.2 3.5 8.31665 8.31665 0 0 1 -1.3-.2l-1.3 1.3a8.909 8.909 0 0 0 6.4-.5 9.04344 9.04344 0 0 0 4.1-4.1 9.168 9.168 0 0 0 -2.6-3.2z" /></svg>');
+
+    --_iui-checkbox-border-color: transparent;
+    --_iui-checkbox-background-color: transparent;
+
+    outline-width: 1px;
+
+    &:where(:not(:checked):not(:indeterminate)) {
+      --_iui-checkbox-svg-color: var(--iui-color-icon);
+    }
+
+    &:where(:hover) {
+      --_iui-checkbox-border-color: transparent;
+      --_iui-checkbox-background-color: var(--iui-color-background-transparent-hover);
+    }
+
+    &:where(:disabled) {
+      --_iui-checkbox-svg-color: var(--iui-color-icon-disabled);
+      --_iui-checkbox-background-color: var(--iui-color-background-disabled);
+    }
+  }
+
+  &.iui-loading {
+    --_iui-checkbox-border-color: transparent;
+    --_iui-checkbox-background-color: transparent;
+    opacity: 0;
+    position: absolute;
+    cursor: wait;
+  }
 }
diff --git a/packages/itwinui-css/src/checkbox/mixins.scss b/packages/itwinui-css/src/checkbox/mixins.scss
deleted file mode 100644
index 98688a4cf89..00000000000
--- a/packages/itwinui-css/src/checkbox/mixins.scss
+++ /dev/null
@@ -1,149 +0,0 @@
-// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-// See LICENSE.md in the project root for license terms and full copyright notice.
-@use '../mixins';
-
-@mixin iui-checkbox-wrapper {
-  @include mixins.iui-reset;
-  display: flex;
-  align-items: center;
-  font-size: var(--iui-font-size-1);
-  inline-size: fit-content;
-  user-select: none;
-  position: relative;
-  cursor: pointer;
-  color: var(--iui-color-text);
-  gap: var(--iui-size-xs);
-
-  &.iui-loading {
-    cursor: progress;
-    font-style: italic;
-    color: var(--iui-color-text-disabled);
-  }
-
-  > .iui-checkbox-label,
-  > .iui-radio-label {
-    line-height: var(--iui-size-l);
-
-    svg {
-      @include mixins.iui-icon-style('m');
-      vertical-align: middle;
-      fill: var(--iui-color-icon);
-    }
-  }
-
-  &.iui-disabled {
-    cursor: not-allowed;
-    color: var(--iui-color-text-disabled);
-
-    svg {
-      fill: var(--iui-color-icon-disabled);
-    }
-  }
-
-  &.iui-positive {
-    color: var(--iui-color-text-positive);
-  }
-
-  &.iui-warning {
-    color: var(--iui-color-text-warning);
-  }
-
-  &.iui-negative {
-    color: var(--iui-color-text-negative);
-  }
-}
-
-@mixin iui-checkbox {
-  --_iui-checkbox-checkmark-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m6.5 12.5-4.5-4.5 1.5-1.5 3 3 6-6 1.5 1.5z" /></svg>');
-  --_iui-checkbox-indeterminate-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m2.75 6.875h10.5v2.25h-10.5z" /></svg>');
-  --_iui-checkbox-unchecked-svg: url('data:image/svg+xml;utf8,<svg viewBox="0 0 16 16"></svg>');
-
-  --_iui-checkbox-svg-color: var(--iui-color-icon-accent);
-  --_iui-checkbox-border-color: var(--iui-color-border-foreground);
-  --_iui-checkbox-background-color: var(--iui-color-background);
-  --_iui-checkbox-mask-image: initial;
-
-  @include mixins.iui-icon-style('m');
-  appearance: none; // disable default browser styles
-  margin: 0;
-  position: relative;
-  border-radius: var(--iui-border-radius-1);
-  background-color: var(--_iui-checkbox-background-color);
-  cursor: pointer;
-  transition: outline-color var(--iui-duration-1) ease-out;
-  outline: solid 1px var(--_iui-checkbox-border-color);
-  outline-offset: -1px;
-
-  // increase tap target size to 24x24 by default and allow adjusting through CSS var
-  &::before {
-    content: '';
-    position: absolute;
-    inset: calc((var(--iui-checkbox-target-size, 24px) - 16px) / -2);
-  }
-
-  &::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background-color: var(--_iui-checkbox-svg-color);
-    mask: var(--_iui-checkbox-mask-image) no-repeat center;
-  }
-
-  &:not(:checked) {
-    --_iui-checkbox-mask-image: var(--_iui-checkbox-unchecked-svg);
-  }
-
-  &:checked {
-    --_iui-checkbox-mask-image: var(--_iui-checkbox-checkmark-svg);
-  }
-
-  &:indeterminate {
-    --_iui-checkbox-mask-image: var(--_iui-checkbox-indeterminate-svg);
-  }
-
-  &:hover {
-    --_iui-checkbox-border-color: var(--iui-color-border-foreground-hover);
-  }
-
-  @include mixins.iui-focus($thickness: 2px);
-
-  &:disabled {
-    --_iui-checkbox-svg-color: var(--iui-color-icon-disabled);
-    --_iui-checkbox-border-color: var(--iui-color-border-disabled);
-    --_iui-checkbox-background-color: var(--iui-color-background-disabled);
-    cursor: not-allowed;
-  }
-
-  &.iui-checkbox-visibility {
-    --_iui-checkbox-checkmark-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m8 2.99051a8.81883 8.81883 0 0 0 -8 4.95062 8.74664 8.74664 0 0 0 8 5.06836 8.63266 8.63266 0 0 0 8-5.06836 8.83631 8.83631 0 0 0 -8-4.95062zm-1.31445 1.86981a1.47663 1.47663 0 1 1 -1.47663 1.47668 1.47665 1.47665 0 0 1 1.47663-1.47668zm1.31445 6.64917a7.17486 7.17486 0 0 1 -6.30475-3.55237 7.4952 7.4952 0 0 1 2.81475-2.6336 3.83956 3.83956 0 1 0 6.98126.00244 7.522 7.522 0 0 1 2.81774 2.63916 7.09785 7.09785 0 0 1 -6.309 3.54437z" /></svg>');
-    --_iui-checkbox-indeterminate-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m8 3v7.9a4.01179 4.01179 0 0 0 4-4 6.7509 6.7509 0 0 0 -.2-1.4l.1.1a6.89429 6.89429 0 0 1 2.4 2.4 8.39088 8.39088 0 0 1 -2.3 2.3 6.89412 6.89412 0 0 1 -3.9 1.2c-.03345 0-.06653-.00677-.1-.0072v1.5072a8.90686 8.90686 0 0 0 8-5 8.90686 8.90686 0 0 0 -8-5z" opacity=".33" /><path d="m8 0a1 1 0 0 0 -1 1v2.07135a8.91637 8.91637 0 0 0 -7 4.92865 8.91637 8.91637 0 0 0 7 4.92865v2.07135a1 1 0 0 0 2 0v-14a1 1 0 0 0 -1-1zm-1.5 4.9a1.55426 1.55426 0 0 1 .5.087v2.81451a1.40746 1.40746 0 0 1 -.5.09849 1.538 1.538 0 0 1 -1.5-1.5 1.53794 1.53794 0 0 1 1.5-1.5zm-2.3 5.4a6.97279 6.97279 0 0 1 -2.5-2.3 6.89429 6.89429 0 0 1 2.4-2.4c.1 0 .1-.1.2-.1a3.194 3.194 0 0 0 -.3 1.4 4.0047 4.0047 0 0 0 3 3.857v.65289a6.37491 6.37491 0 0 1 -2.8-1.10989z" /></svg>');
-    --_iui-checkbox-unchecked-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m1.70671 12.879 11.17218-11.17219 1.4142 1.4142-11.17218 11.17218zm.99329-1.679 1.1-1.1a5.06317 5.06317 0 0 1 -2-2.1 7.48268 7.48268 0 0 1 6.2-3.5 4.86877 4.86877 0 0 1 1.2.1l1.3-1.3a10.07431 10.07431 0 0 0 -2.5-.3 8.84129 8.84129 0 0 0 -8 5 8.42455 8.42455 0 0 0 2.7 3.2zm10.7-6.4-1.1 1.1a7.08625 7.08625 0 0 1 2 2.1 7.50323 7.50323 0 0 1 -6.2 3.5 8.31665 8.31665 0 0 1 -1.3-.2l-1.3 1.3a8.909 8.909 0 0 0 6.4-.5 9.04344 9.04344 0 0 0 4.1-4.1 9.168 9.168 0 0 0 -2.6-3.2z" /></svg>');
-
-    --_iui-checkbox-border-color: transparent;
-    --_iui-checkbox-background-color: transparent;
-
-    outline-width: 1px;
-
-    &:where(:not(:checked):not(:indeterminate)) {
-      --_iui-checkbox-svg-color: var(--iui-color-icon);
-    }
-
-    &:where(:hover) {
-      --_iui-checkbox-border-color: transparent;
-      --_iui-checkbox-background-color: var(--iui-color-background-transparent-hover);
-    }
-
-    &:where(:disabled) {
-      --_iui-checkbox-svg-color: var(--iui-color-icon-disabled);
-      --_iui-checkbox-background-color: var(--iui-color-background-disabled);
-    }
-  }
-
-  &.iui-loading {
-    --_iui-checkbox-border-color: transparent;
-    --_iui-checkbox-background-color: transparent;
-    opacity: 0;
-    position: absolute;
-    cursor: wait;
-  }
-}
diff --git a/packages/itwinui-css/src/radio/radio.scss b/packages/itwinui-css/src/radio/radio.scss
index b91657c0fea..cb766066c38 100644
--- a/packages/itwinui-css/src/radio/radio.scss
+++ b/packages/itwinui-css/src/radio/radio.scss
@@ -1,14 +1,6 @@
 // Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 // See LICENSE.md in the project root for license terms and full copyright notice.
-@use '../checkbox/mixins' as checkbox;
-
-.iui-radio-wrapper {
-  @include checkbox.iui-checkbox-wrapper;
-}
-
 .iui-radio {
-  @include checkbox.iui-checkbox;
-
   border-radius: 50%;
 
   &:checked {
diff --git a/packages/itwinui-react/src/core/Radio/Radio.tsx b/packages/itwinui-react/src/core/Radio/Radio.tsx
index 56c8fde5c8e..0fafc1d7164 100644
--- a/packages/itwinui-react/src/core/Radio/Radio.tsx
+++ b/packages/itwinui-react/src/core/Radio/Radio.tsx
@@ -55,7 +55,7 @@ export const Radio = React.forwardRef((props, ref) => {
   const radio = (
     <Box
       as='input'
-      className={cx('iui-radio', className)}
+      className={cx('iui-checkbox', 'iui-radio', className)}
       style={style}
       disabled={disabled}
       type='radio'
@@ -71,7 +71,7 @@ export const Radio = React.forwardRef((props, ref) => {
       as='label'
       {...wrapperProps}
       className={cx(
-        'iui-radio-wrapper',
+        'iui-checkbox-wrapper',
         { 'iui-disabled': disabled, [`iui-${status}`]: !!status },
         wrapperProps?.className,
       )}

From 891ce0a5fc3da84e929846cb5469e15cad48d858 Mon Sep 17 00:00:00 2001
From: Uyen Doan <uyen.doan@bentley.com>
Date: Wed, 18 Sep 2024 22:13:46 -0500
Subject: [PATCH 02/23] modified radio unit test

---
 .../itwinui-react/src/core/Radio/Radio.test.tsx    | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/itwinui-react/src/core/Radio/Radio.test.tsx b/packages/itwinui-react/src/core/Radio/Radio.test.tsx
index a63e5a55c09..b681f6266d0 100644
--- a/packages/itwinui-react/src/core/Radio/Radio.test.tsx
+++ b/packages/itwinui-react/src/core/Radio/Radio.test.tsx
@@ -16,7 +16,7 @@ it('renders correctly with label', () => {
   const { container } = render(<Radio label='Some label' />);
 
   assertBaseElements(container);
-  expect(container.querySelector('label')).toHaveClass('iui-radio-wrapper');
+  expect(container.querySelector('label')).toHaveClass('iui-checkbox-wrapper');
   expect(screen.getByText('Some label')).toHaveClass('iui-radio-label');
 });
 
@@ -25,7 +25,7 @@ it('renders correctly without label', () => {
 
   assertBaseElements(container);
   expect(container.querySelector('label')).toBeFalsy();
-  expect(container.querySelector('iui-radio-wrapper')).toBeFalsy();
+  expect(container.querySelector('iui-checkbox-wrapper')).toBeFalsy();
   expect(container.querySelector('.iui-radio-label')).toBeNull();
 });
 
@@ -59,7 +59,7 @@ it('renders positive component', () => {
 
   screen.getByText('Some label');
   expect(
-    container.querySelector('.iui-radio-wrapper.iui-positive'),
+    container.querySelector('.iui-checkbox-wrapper.iui-positive'),
   ).toBeTruthy();
 });
 
@@ -70,7 +70,7 @@ it('renders warning component', () => {
 
   screen.getByText('Some label');
   expect(
-    container.querySelector('.iui-radio-wrapper.iui-warning'),
+    container.querySelector('.iui-checkbox-wrapper.iui-warning'),
   ).toBeTruthy();
 });
 
@@ -81,7 +81,7 @@ it('renders negative component', () => {
 
   screen.getByText('Some label');
   expect(
-    container.querySelector('.iui-radio-wrapper.iui-negative'),
+    container.querySelector('.iui-checkbox-wrapper.iui-negative'),
   ).toBeTruthy();
 });
 
@@ -101,14 +101,14 @@ it('passes custom props to wrapper and label', () => {
 
   // Test Radio
   const radio = container.querySelector(
-    '.iui-radio.custom-class',
+    '.iui-checkbox.iui-radio.custom-class',
   ) as HTMLElement;
   expect(radio).toBeTruthy();
   expect(radio.style.fontSize).toBe('12px');
 
   // Test wrapper
   const wrapper = container.querySelector(
-    '.iui-radio-wrapper.custom-wrapper-class',
+    '.iui-checkbox-wrapper.custom-wrapper-class',
   ) as HTMLElement;
   expect(wrapper).toBeTruthy();
   expect(wrapper.style.fontSize).toBe('14px');

From d84f8fd95e5e89e41a4598658e4b7628f7ad2254 Mon Sep 17 00:00:00 2001
From: Uyen Doan <uyen.doan@bentley.com>
Date: Thu, 19 Sep 2024 15:09:42 -0500
Subject: [PATCH 03/23] changed class attributes to data attributes

---
 .../src/components/Checkbox.astro             | 16 +++++---------
 apps/css-workshop/src/components/Radio.astro  | 10 +--------
 .../itwinui-css/src/checkbox/checkbox.scss    | 22 +++++++------------
 .../src/input-container/input-container.scss  |  1 -
 .../src/core/Radio/Radio.test.tsx             | 21 ++++++++++++------
 .../itwinui-react/src/core/Radio/Radio.tsx    |  8 +++----
 6 files changed, 32 insertions(+), 46 deletions(-)

diff --git a/apps/css-workshop/src/components/Checkbox.astro b/apps/css-workshop/src/components/Checkbox.astro
index 282831f80e8..e9c323e0a98 100644
--- a/apps/css-workshop/src/components/Checkbox.astro
+++ b/apps/css-workshop/src/components/Checkbox.astro
@@ -24,14 +24,14 @@ const inputProps = {
   ['class:list']: [
     'iui-checkbox',
     {
-      'iui-loading': isLoading,
       'iui-checkbox-visibility': variant === 'eyeball',
     },
     className,
   ],
   indeterminate: indeterminate,
   type: 'checkbox',
-  disabled: disabled,
+  'data-iui-loading': { isLoading },
+  'data-iui-disabled': { disabled },
   ...props,
 } as astroHTML.JSX.InputHTMLAttributes;
 ---
@@ -40,14 +40,10 @@ const inputProps = {
 {
   !basic && (
     <label
-      class:list={[
-        'iui-checkbox-wrapper',
-        {
-          'iui-disabled': disabled,
-          'iui-loading': isLoading,
-          [`iui-${status}`]: !!status,
-        },
-      ]}
+      class:list={['iui-checkbox-wrapper']}
+      data-iui-disabled={disabled}
+      data-iui-loading={isLoading}
+      data-iui-status={status}
       {...wrapperProps}
     >
       <input {...inputProps} />
diff --git a/apps/css-workshop/src/components/Radio.astro b/apps/css-workshop/src/components/Radio.astro
index b6fd281d6a4..06e2ce3d88a 100644
--- a/apps/css-workshop/src/components/Radio.astro
+++ b/apps/css-workshop/src/components/Radio.astro
@@ -11,15 +11,7 @@ type Props = {
 const { disabled, status, class: className, labelPosition = 'right', ...props } = Astro.props;
 ---
 
-<label
-  class:list={[
-    'iui-checkbox-wrapper',
-    {
-      'iui-disabled': disabled,
-      [`iui-${status}`]: !!status,
-    },
-  ]}
->
+<label class='iui-checkbox-wrapper' data-iui-disabled={disabled} data-iui-status={status}>
   {
     labelPosition === 'left' && (
       <span class='iui-radio-label'>
diff --git a/packages/itwinui-css/src/checkbox/checkbox.scss b/packages/itwinui-css/src/checkbox/checkbox.scss
index 71ea3aef0db..8d08bfccea9 100644
--- a/packages/itwinui-css/src/checkbox/checkbox.scss
+++ b/packages/itwinui-css/src/checkbox/checkbox.scss
@@ -14,7 +14,7 @@
   color: var(--iui-color-text);
   gap: var(--iui-size-xs);
 
-  &.iui-loading {
+  &[data-iui-loading='true'] {
     cursor: progress;
     font-style: italic;
     color: var(--iui-color-text-disabled);
@@ -31,7 +31,7 @@
     }
   }
 
-  &.iui-disabled {
+  &[data-iui-disabled='true'] {
     cursor: not-allowed;
     color: var(--iui-color-text-disabled);
 
@@ -40,16 +40,10 @@
     }
   }
 
-  &.iui-positive {
-    color: var(--iui-color-text-positive);
-  }
-
-  &.iui-warning {
-    color: var(--iui-color-text-warning);
-  }
-
-  &.iui-negative {
-    color: var(--iui-color-text-negative);
+  @each $status in ('positive', 'warning', 'negative') {
+    &[data-iui-status='#{$status}'] {
+      color: var(--iui-color-text-#{$status});
+    }
   }
 }
 
@@ -107,7 +101,7 @@
 
   @include mixins.iui-focus($thickness: 2px);
 
-  &:disabled {
+  &[data-iui-disabled='true'] {
     --_iui-checkbox-svg-color: var(--iui-color-icon-disabled);
     --_iui-checkbox-border-color: var(--iui-color-border-disabled);
     --_iui-checkbox-background-color: var(--iui-color-background-disabled);
@@ -139,7 +133,7 @@
     }
   }
 
-  &.iui-loading {
+  &[data-iui-loading='true'] {
     --_iui-checkbox-border-color: transparent;
     --_iui-checkbox-background-color: transparent;
     opacity: 0;
diff --git a/packages/itwinui-css/src/input-container/input-container.scss b/packages/itwinui-css/src/input-container/input-container.scss
index 78deb0aabc2..08c9f71ad0c 100644
--- a/packages/itwinui-css/src/input-container/input-container.scss
+++ b/packages/itwinui-css/src/input-container/input-container.scss
@@ -265,7 +265,6 @@
     padding: calc(var(--iui-size-s) * 0.5) 0;
   }
 
-  .iui-radio-wrapper,
   .iui-checkbox-wrapper {
     min-block-size: var(--iui-size-l);
   }
diff --git a/packages/itwinui-react/src/core/Radio/Radio.test.tsx b/packages/itwinui-react/src/core/Radio/Radio.test.tsx
index b681f6266d0..134b867f11c 100644
--- a/packages/itwinui-react/src/core/Radio/Radio.test.tsx
+++ b/packages/itwinui-react/src/core/Radio/Radio.test.tsx
@@ -41,19 +41,22 @@ it('renders correctly with jsx element as label', () => {
 });
 
 it('renders disabled component', () => {
-  const { container } = render(<Radio label='Some label' disabled />);
+  const { container } = render(
+    <Radio label='Some label' data-iui-disabled='true' />,
+  );
 
   assertBaseElements(container);
 
   screen.getByText('Some label');
   expect(
-    (container.querySelector('input[type="radio"]') as HTMLInputElement)
-      .disabled,
-  ).toBe(true);
+    container.querySelector('input[type="radio"]') as HTMLInputElement,
+  ).toHaveAttribute('data-iui-disabled', 'true');
 });
 
 it('renders positive component', () => {
-  const { container } = render(<Radio label='Some label' status='positive' />);
+  const { container } = render(
+    <Radio label='Some label' data-iui-status='positive' />,
+  );
 
   assertBaseElements(container);
 
@@ -64,7 +67,9 @@ it('renders positive component', () => {
 });
 
 it('renders warning component', () => {
-  const { container } = render(<Radio label='Some label' status='warning' />);
+  const { container } = render(
+    <Radio label='Some label' data-iui-status='warning' />,
+  );
 
   assertBaseElements(container);
 
@@ -75,7 +80,9 @@ it('renders warning component', () => {
 });
 
 it('renders negative component', () => {
-  const { container } = render(<Radio label='Some label' status='negative' />);
+  const { container } = render(
+    <Radio label='Some label' data-iui-status='negative' />,
+  );
 
   assertBaseElements(container);
 
diff --git a/packages/itwinui-react/src/core/Radio/Radio.tsx b/packages/itwinui-react/src/core/Radio/Radio.tsx
index 0fafc1d7164..f471a4aa762 100644
--- a/packages/itwinui-react/src/core/Radio/Radio.tsx
+++ b/packages/itwinui-react/src/core/Radio/Radio.tsx
@@ -70,11 +70,9 @@ export const Radio = React.forwardRef((props, ref) => {
     <Box
       as='label'
       {...wrapperProps}
-      className={cx(
-        'iui-checkbox-wrapper',
-        { 'iui-disabled': disabled, [`iui-${status}`]: !!status },
-        wrapperProps?.className,
-      )}
+      className={cx('iui-checkbox-wrapper', wrapperProps?.className)}
+      data-iui-status={status}
+      data-iui-disabled={disabled}
     >
       {radio}
       {label && (

From a88d494080405f8f46ae03ed50a15e42a1808b6b Mon Sep 17 00:00:00 2001
From: Uyen Doan <uyen.doan@bentley.com>
Date: Thu, 19 Sep 2024 15:54:12 -0500
Subject: [PATCH 04/23] fixed unit tests

---
 .../src/core/Radio/Radio.test.tsx             | 21 +++++++++++--------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/packages/itwinui-react/src/core/Radio/Radio.test.tsx b/packages/itwinui-react/src/core/Radio/Radio.test.tsx
index 134b867f11c..8be9666bab0 100644
--- a/packages/itwinui-react/src/core/Radio/Radio.test.tsx
+++ b/packages/itwinui-react/src/core/Radio/Radio.test.tsx
@@ -61,9 +61,10 @@ it('renders positive component', () => {
   assertBaseElements(container);
 
   screen.getByText('Some label');
-  expect(
-    container.querySelector('.iui-checkbox-wrapper.iui-positive'),
-  ).toBeTruthy();
+  expect(container.querySelector('.iui-checkbox-wrapper')).toHaveAttribute(
+    'data-iui-status',
+    'positive',
+  );
 });
 
 it('renders warning component', () => {
@@ -74,9 +75,10 @@ it('renders warning component', () => {
   assertBaseElements(container);
 
   screen.getByText('Some label');
-  expect(
-    container.querySelector('.iui-checkbox-wrapper.iui-warning'),
-  ).toBeTruthy();
+  expect(container.querySelector('.iui-checkbox-wrapper')).toHaveAttribute(
+    'data-iui-status',
+    'warning',
+  );
 });
 
 it('renders negative component', () => {
@@ -87,9 +89,10 @@ it('renders negative component', () => {
   assertBaseElements(container);
 
   screen.getByText('Some label');
-  expect(
-    container.querySelector('.iui-checkbox-wrapper.iui-negative'),
-  ).toBeTruthy();
+  expect(container.querySelector('.iui-checkbox-wrapper')).toHaveAttribute(
+    'data-iui-status',
+    'negative',
+  );
 });
 
 it('passes custom props to wrapper and label', () => {

From 1e7787f0d578ddc1589013dec1e16f312190ebe8 Mon Sep 17 00:00:00 2001
From: Uyen Doan <uyen.doan@bentley.com>
Date: Thu, 19 Sep 2024 16:25:14 -0500
Subject: [PATCH 05/23] fixed unit tests

---
 packages/itwinui-react/src/core/Radio/Radio.test.tsx | 12 +++---------
 playgrounds/vite/src/App.tsx                         |  4 ++--
 2 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/packages/itwinui-react/src/core/Radio/Radio.test.tsx b/packages/itwinui-react/src/core/Radio/Radio.test.tsx
index 8be9666bab0..1f80801d079 100644
--- a/packages/itwinui-react/src/core/Radio/Radio.test.tsx
+++ b/packages/itwinui-react/src/core/Radio/Radio.test.tsx
@@ -54,9 +54,7 @@ it('renders disabled component', () => {
 });
 
 it('renders positive component', () => {
-  const { container } = render(
-    <Radio label='Some label' data-iui-status='positive' />,
-  );
+  const { container } = render(<Radio label='Some label' status='positive' />);
 
   assertBaseElements(container);
 
@@ -68,9 +66,7 @@ it('renders positive component', () => {
 });
 
 it('renders warning component', () => {
-  const { container } = render(
-    <Radio label='Some label' data-iui-status='warning' />,
-  );
+  const { container } = render(<Radio label='Some label' status='warning' />);
 
   assertBaseElements(container);
 
@@ -82,9 +78,7 @@ it('renders warning component', () => {
 });
 
 it('renders negative component', () => {
-  const { container } = render(
-    <Radio label='Some label' data-iui-status='negative' />,
-  );
+  const { container } = render(<Radio label='Some label' status='negative' />);
 
   assertBaseElements(container);
 
diff --git a/playgrounds/vite/src/App.tsx b/playgrounds/vite/src/App.tsx
index 308ffd82cc0..3c95ae608fe 100644
--- a/playgrounds/vite/src/App.tsx
+++ b/playgrounds/vite/src/App.tsx
@@ -1,9 +1,9 @@
-import { Button } from '@itwin/itwinui-react';
+import { Checkbox } from '@itwin/itwinui-react';
 
 const App = () => {
   return (
     <>
-      <Button>Hello world</Button>
+      <Checkbox label='Checkbox' status='warning' />
     </>
   );
 };

From ef5b4c8e66839cff5c3f04724e7d1a3822727c41 Mon Sep 17 00:00:00 2001
From: Uyen Doan <uyen.doan@bentley.com>
Date: Fri, 20 Sep 2024 12:50:08 -0500
Subject: [PATCH 06/23] changed how attributes are declared

---
 apps/css-workshop/src/components/Checkbox.astro     | 10 +++++-----
 apps/css-workshop/src/components/Radio.astro        |  2 +-
 .../itwinui-react/src/core/Checkbox/Checkbox.tsx    | 13 ++++---------
 packages/itwinui-react/src/core/Radio/Radio.tsx     |  4 ++--
 4 files changed, 12 insertions(+), 17 deletions(-)

diff --git a/apps/css-workshop/src/components/Checkbox.astro b/apps/css-workshop/src/components/Checkbox.astro
index e9c323e0a98..d76b9296c34 100644
--- a/apps/css-workshop/src/components/Checkbox.astro
+++ b/apps/css-workshop/src/components/Checkbox.astro
@@ -30,8 +30,8 @@ const inputProps = {
   ],
   indeterminate: indeterminate,
   type: 'checkbox',
-  'data-iui-loading': { isLoading },
-  'data-iui-disabled': { disabled },
+  'data-iui-loading': isLoading ? 'true' : undefined,
+  'data-iui-disabled': disabled ? 'true' : undefined,
   ...props,
 } as astroHTML.JSX.InputHTMLAttributes;
 ---
@@ -41,9 +41,9 @@ const inputProps = {
   !basic && (
     <label
       class:list={['iui-checkbox-wrapper']}
-      data-iui-disabled={disabled}
-      data-iui-loading={isLoading}
-      data-iui-status={status}
+      data-iui-disabled={disabled ? 'true' : undefined}
+      data-iui-loading={isLoading ? 'true' : undefined}
+      data-iui-status={!!status}
       {...wrapperProps}
     >
       <input {...inputProps} />
diff --git a/apps/css-workshop/src/components/Radio.astro b/apps/css-workshop/src/components/Radio.astro
index 06e2ce3d88a..0068a94a37a 100644
--- a/apps/css-workshop/src/components/Radio.astro
+++ b/apps/css-workshop/src/components/Radio.astro
@@ -22,7 +22,7 @@ const { disabled, status, class: className, labelPosition = 'right', ...props }
   <input
     class:list={['iui-checkbox', 'iui-radio', className]}
     type='radio'
-    disabled={disabled}
+    data-iui-disabled={disabled ? 'true' : undefined}
     {...props}
   />
   {
diff --git a/packages/itwinui-react/src/core/Checkbox/Checkbox.tsx b/packages/itwinui-react/src/core/Checkbox/Checkbox.tsx
index 03d2d5dc0b0..a6ef9d5a243 100644
--- a/packages/itwinui-react/src/core/Checkbox/Checkbox.tsx
+++ b/packages/itwinui-react/src/core/Checkbox/Checkbox.tsx
@@ -112,15 +112,10 @@ export const Checkbox = React.forwardRef((props, ref) => {
   ) : (
     <Box
       as='label'
-      className={cx(
-        'iui-checkbox-wrapper',
-        {
-          'iui-disabled': disabled,
-          [`iui-${status}`]: !!status,
-          'iui-loading': isLoading,
-        },
-        wrapperClassName,
-      )}
+      className={cx('iui-checkbox-wrapper', wrapperClassName)}
+      data-iui-disabled={disabled ? 'true' : undefined}
+      data-iui-status={!!status}
+      data-iui-loading={isLoading ? 'true' : undefined}
       {...restWrapperProps}
     >
       {checkbox}
diff --git a/packages/itwinui-react/src/core/Radio/Radio.tsx b/packages/itwinui-react/src/core/Radio/Radio.tsx
index f471a4aa762..6c6493f8393 100644
--- a/packages/itwinui-react/src/core/Radio/Radio.tsx
+++ b/packages/itwinui-react/src/core/Radio/Radio.tsx
@@ -71,8 +71,8 @@ export const Radio = React.forwardRef((props, ref) => {
       as='label'
       {...wrapperProps}
       className={cx('iui-checkbox-wrapper', wrapperProps?.className)}
-      data-iui-status={status}
-      data-iui-disabled={disabled}
+      data-iui-status={!!status}
+      data-iui-disabled={disabled ? 'true' : undefined}
     >
       {radio}
       {label && (

From 27549675eb3ebb5e221507570335e25e7caf8df7 Mon Sep 17 00:00:00 2001
From: Uyen Doan <uyen.doan@bentley.com>
Date: Fri, 20 Sep 2024 13:05:31 -0500
Subject: [PATCH 07/23] unit tests

---
 .../src/core/Checkbox/Checkbox.test.tsx       | 35 +++++++++++--------
 .../src/core/Checkbox/Checkbox.tsx            |  2 +-
 .../itwinui-react/src/core/Radio/Radio.tsx    |  2 +-
 .../src/core/Table/Table.test.tsx             |  5 ++-
 4 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/packages/itwinui-react/src/core/Checkbox/Checkbox.test.tsx b/packages/itwinui-react/src/core/Checkbox/Checkbox.test.tsx
index a85aa2f04d6..2cb2653059e 100644
--- a/packages/itwinui-react/src/core/Checkbox/Checkbox.test.tsx
+++ b/packages/itwinui-react/src/core/Checkbox/Checkbox.test.tsx
@@ -76,9 +76,10 @@ it('renders positive component', () => {
   assertBaseElements(container);
 
   screen.getByText('Some checkbox');
-  expect(
-    container.querySelector('.iui-checkbox-wrapper.iui-positive'),
-  ).toBeTruthy();
+  expect(container.querySelector('.iui-checkbox-wrapper')).toHaveAttribute(
+    'data-iui-status',
+    'positive',
+  );
 });
 
 it('renders warning component', () => {
@@ -89,9 +90,10 @@ it('renders warning component', () => {
   assertBaseElements(container);
 
   screen.getByText('Some checkbox');
-  expect(
-    container.querySelector('.iui-checkbox-wrapper.iui-warning'),
-  ).toBeTruthy();
+  expect(container.querySelector('.iui-checkbox-wrapper')).toHaveAttribute(
+    'data-iui-status',
+    'warning',
+  );
 });
 
 it('renders negative component', () => {
@@ -102,9 +104,10 @@ it('renders negative component', () => {
   assertBaseElements(container);
 
   screen.getByText('Some checkbox');
-  expect(
-    container.querySelector('.iui-checkbox-wrapper.iui-negative'),
-  ).toBeTruthy();
+  expect(container.querySelector('.iui-checkbox-wrapper')).toHaveAttribute(
+    'data-iui-status',
+    'negative',
+  );
 });
 
 it('displays a spinner when isLoading is set to true', () => {
@@ -113,12 +116,14 @@ it('displays a spinner when isLoading is set to true', () => {
   assertBaseElements(container);
 
   screen.getByText('Some checkbox');
-  expect(
-    container.querySelector('.iui-checkbox-wrapper.iui-loading'),
-  ).toBeTruthy();
-  expect(
-    container.querySelector('input[type="checkbox"].iui-loading'),
-  ).toBeDisabled();
+  expect(container.querySelector('.iui-checkbox-wrapper')).toHaveAttribute(
+    'data-iui-loading',
+    'true',
+  );
+  expect(container.querySelector('input[type="checkbox"]')).toHaveAttribute(
+    'data-iui-loading',
+    'true',
+  );
   expect(
     container.querySelector('.iui-progress-indicator-radial'),
   ).toBeTruthy();
diff --git a/packages/itwinui-react/src/core/Checkbox/Checkbox.tsx b/packages/itwinui-react/src/core/Checkbox/Checkbox.tsx
index a6ef9d5a243..e9ad7dc206b 100644
--- a/packages/itwinui-react/src/core/Checkbox/Checkbox.tsx
+++ b/packages/itwinui-react/src/core/Checkbox/Checkbox.tsx
@@ -114,7 +114,7 @@ export const Checkbox = React.forwardRef((props, ref) => {
       as='label'
       className={cx('iui-checkbox-wrapper', wrapperClassName)}
       data-iui-disabled={disabled ? 'true' : undefined}
-      data-iui-status={!!status}
+      data-iui-status={status}
       data-iui-loading={isLoading ? 'true' : undefined}
       {...restWrapperProps}
     >
diff --git a/packages/itwinui-react/src/core/Radio/Radio.tsx b/packages/itwinui-react/src/core/Radio/Radio.tsx
index 6c6493f8393..ffcd4c63546 100644
--- a/packages/itwinui-react/src/core/Radio/Radio.tsx
+++ b/packages/itwinui-react/src/core/Radio/Radio.tsx
@@ -71,7 +71,7 @@ export const Radio = React.forwardRef((props, ref) => {
       as='label'
       {...wrapperProps}
       className={cx('iui-checkbox-wrapper', wrapperProps?.className)}
-      data-iui-status={!!status}
+      data-iui-status={status}
       data-iui-disabled={disabled ? 'true' : undefined}
     >
       {radio}
diff --git a/packages/itwinui-react/src/core/Table/Table.test.tsx b/packages/itwinui-react/src/core/Table/Table.test.tsx
index 6b9e49882e0..d1797d3680d 100644
--- a/packages/itwinui-react/src/core/Table/Table.test.tsx
+++ b/packages/itwinui-react/src/core/Table/Table.test.tsx
@@ -3111,7 +3111,10 @@ it('should be disabled in column manager if `disableToggleVisibility` is true',
 
   await userEvent.click(columnManager);
   const columnManagerColumns = document.querySelectorAll<HTMLElement>('label');
-  expect(columnManagerColumns[0].classList).toContain('iui-disabled');
+  expect(columnManagerColumns[0].classList).toHaveAttribute(
+    'data-iui-disabled',
+    'true',
+  );
   expect(columnManagerColumns[0].querySelector('input')?.disabled).toBeTruthy();
 });
 

From 533d4e53b9b6f3bfe416ed548528e01c12199c1b Mon Sep 17 00:00:00 2001
From: Uyen Doan <uyen.doan@bentley.com>
Date: Fri, 20 Sep 2024 13:08:16 -0500
Subject: [PATCH 08/23] visual tests

---
 apps/css-workshop/src/components/Checkbox.astro | 2 +-
 apps/css-workshop/src/components/Radio.astro    | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/apps/css-workshop/src/components/Checkbox.astro b/apps/css-workshop/src/components/Checkbox.astro
index d76b9296c34..7b924998cca 100644
--- a/apps/css-workshop/src/components/Checkbox.astro
+++ b/apps/css-workshop/src/components/Checkbox.astro
@@ -43,7 +43,7 @@ const inputProps = {
       class:list={['iui-checkbox-wrapper']}
       data-iui-disabled={disabled ? 'true' : undefined}
       data-iui-loading={isLoading ? 'true' : undefined}
-      data-iui-status={!!status}
+      data-iui-status={status}
       {...wrapperProps}
     >
       <input {...inputProps} />
diff --git a/apps/css-workshop/src/components/Radio.astro b/apps/css-workshop/src/components/Radio.astro
index 0068a94a37a..981e3880bf0 100644
--- a/apps/css-workshop/src/components/Radio.astro
+++ b/apps/css-workshop/src/components/Radio.astro
@@ -11,7 +11,11 @@ type Props = {
 const { disabled, status, class: className, labelPosition = 'right', ...props } = Astro.props;
 ---
 
-<label class='iui-checkbox-wrapper' data-iui-disabled={disabled} data-iui-status={status}>
+<label
+  class='iui-checkbox-wrapper'
+  data-iui-disabled={disabled ? 'true' : undefined}
+  data-iui-status={status}
+>
   {
     labelPosition === 'left' && (
       <span class='iui-radio-label'>

From 47935327db547c5ea24b710d275abc96e81ea570 Mon Sep 17 00:00:00 2001
From: Uyen Doan <uyen.doan@bentley.com>
Date: Fri, 20 Sep 2024 13:18:44 -0500
Subject: [PATCH 09/23] visual tests

---
 packages/itwinui-react/src/core/Checkbox/Checkbox.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/itwinui-react/src/core/Checkbox/Checkbox.tsx b/packages/itwinui-react/src/core/Checkbox/Checkbox.tsx
index e9ad7dc206b..2777c8c9f14 100644
--- a/packages/itwinui-react/src/core/Checkbox/Checkbox.tsx
+++ b/packages/itwinui-react/src/core/Checkbox/Checkbox.tsx
@@ -89,12 +89,12 @@ export const Checkbox = React.forwardRef((props, ref) => {
           'iui-checkbox',
           {
             'iui-checkbox-visibility': variant === 'eyeball',
-            'iui-loading': isLoading,
           },
           className,
         )}
         style={style}
-        disabled={disabled || isLoading}
+        data-iui-loading={isLoading ? 'true' : undefined}
+        data-iui-disabled={disabled || isLoading ? 'true' : undefined}
         type='checkbox'
         ref={refs}
         {...rest}

From c35b531b695d42b4776073b4a54050f0186e944f Mon Sep 17 00:00:00 2001
From: Uyen Doan <uyen.doan@bentley.com>
Date: Fri, 20 Sep 2024 13:40:51 -0500
Subject: [PATCH 10/23] changed disabled to data-iui-disabled

---
 .../itwinui-react/src/core/Checkbox/Checkbox.test.tsx     | 5 ++---
 .../itwinui-react/src/core/InputGroup/InputGroup.test.tsx | 4 +++-
 packages/itwinui-react/src/core/Table/Table.test.tsx      | 8 ++++----
 packages/itwinui-react/src/core/Tree/TreeNode.test.tsx    | 2 +-
 4 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/packages/itwinui-react/src/core/Checkbox/Checkbox.test.tsx b/packages/itwinui-react/src/core/Checkbox/Checkbox.test.tsx
index 2cb2653059e..77dd2754375 100644
--- a/packages/itwinui-react/src/core/Checkbox/Checkbox.test.tsx
+++ b/packages/itwinui-react/src/core/Checkbox/Checkbox.test.tsx
@@ -63,9 +63,8 @@ it('renders disabled component', () => {
 
   screen.getByText('Some checkbox');
   expect(
-    (container.querySelector('input[type="checkbox"]') as HTMLInputElement)
-      .disabled,
-  ).toBe(true);
+    container.querySelector('input[type="checkbox"]') as HTMLInputElement,
+  ).toHaveAttribute('data-iui-disabled', 'true');
 });
 
 it('renders positive component', () => {
diff --git a/packages/itwinui-react/src/core/InputGroup/InputGroup.test.tsx b/packages/itwinui-react/src/core/InputGroup/InputGroup.test.tsx
index 653a36dcdfa..5c068f711cf 100644
--- a/packages/itwinui-react/src/core/InputGroup/InputGroup.test.tsx
+++ b/packages/itwinui-react/src/core/InputGroup/InputGroup.test.tsx
@@ -32,7 +32,9 @@ it('should render disabled group', () => {
   getByText('some label');
   const inputs = container.querySelectorAll('input');
   expect(inputs.length).toBe(2);
-  inputs.forEach((input) => expect(input.disabled).toBe(true));
+  inputs.forEach((input) =>
+    expect(input).toHaveAttribute('data-iui-disabled', 'true'),
+  );
 });
 
 it('should render required group', () => {
diff --git a/packages/itwinui-react/src/core/Table/Table.test.tsx b/packages/itwinui-react/src/core/Table/Table.test.tsx
index d1797d3680d..a63a83e60e8 100644
--- a/packages/itwinui-react/src/core/Table/Table.test.tsx
+++ b/packages/itwinui-react/src/core/Table/Table.test.tsx
@@ -1842,10 +1842,10 @@ it('should disable row and handle selection accordingly', async () => {
 
   const checkboxCells = container.querySelectorAll('.iui-slot .iui-checkbox');
   expect(checkboxCells.length).toBe(4);
-  expect(checkboxCells[0]).not.toBeDisabled();
-  expect(checkboxCells[1]).not.toBeDisabled();
-  expect(checkboxCells[2]).toBeDisabled();
-  expect(checkboxCells[3]).not.toBeDisabled();
+  expect(checkboxCells[0]).not.toHaveAttribute('data-iui-disabled');
+  expect(checkboxCells[1]).not.toHaveAttribute('data-iui-disabled');
+  expect(checkboxCells[2]).toHaveAttribute('data-iui-disabled', 'true');
+  expect(checkboxCells[3]).not.toHaveAttribute('data-iui-disabled');
 
   // Select disabled row
   await userEvent.click(checkboxCells[2]);
diff --git a/packages/itwinui-react/src/core/Tree/TreeNode.test.tsx b/packages/itwinui-react/src/core/Tree/TreeNode.test.tsx
index e9c191d025d..6cf7d8f37c7 100644
--- a/packages/itwinui-react/src/core/Tree/TreeNode.test.tsx
+++ b/packages/itwinui-react/src/core/Tree/TreeNode.test.tsx
@@ -89,7 +89,7 @@ it('should render node with a checkbox', () => {
 
   expect(
     container.querySelector('.iui-tree-node-checkbox .testClass'),
-  ).not.toBeDisabled();
+  ).not.toHaveAttribute('data-iui-disabled');
 });
 
 it('should render node with an icon', () => {

From 40ad3d4fac17a0ce2c089a133048131845b94d7f Mon Sep 17 00:00:00 2001
From: Uyen Doan <uyen.doan@bentley.com>
Date: Fri, 20 Sep 2024 14:02:05 -0500
Subject: [PATCH 11/23] fixed disabled checkbox

---
 packages/itwinui-css/src/checkbox/checkbox.scss            | 2 +-
 packages/itwinui-react/src/core/Checkbox/Checkbox.test.tsx | 2 +-
 packages/itwinui-react/src/core/Checkbox/Checkbox.tsx      | 2 +-
 playgrounds/vite/src/App.tsx                               | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/itwinui-css/src/checkbox/checkbox.scss b/packages/itwinui-css/src/checkbox/checkbox.scss
index 8d08bfccea9..c700102e677 100644
--- a/packages/itwinui-css/src/checkbox/checkbox.scss
+++ b/packages/itwinui-css/src/checkbox/checkbox.scss
@@ -101,7 +101,7 @@
 
   @include mixins.iui-focus($thickness: 2px);
 
-  &[data-iui-disabled='true'] {
+  &:disabled {
     --_iui-checkbox-svg-color: var(--iui-color-icon-disabled);
     --_iui-checkbox-border-color: var(--iui-color-border-disabled);
     --_iui-checkbox-background-color: var(--iui-color-background-disabled);
diff --git a/packages/itwinui-react/src/core/Checkbox/Checkbox.test.tsx b/packages/itwinui-react/src/core/Checkbox/Checkbox.test.tsx
index 77dd2754375..90a9004756c 100644
--- a/packages/itwinui-react/src/core/Checkbox/Checkbox.test.tsx
+++ b/packages/itwinui-react/src/core/Checkbox/Checkbox.test.tsx
@@ -64,7 +64,7 @@ it('renders disabled component', () => {
   screen.getByText('Some checkbox');
   expect(
     container.querySelector('input[type="checkbox"]') as HTMLInputElement,
-  ).toHaveAttribute('data-iui-disabled', 'true');
+  ).toBeDisabled();
 });
 
 it('renders positive component', () => {
diff --git a/packages/itwinui-react/src/core/Checkbox/Checkbox.tsx b/packages/itwinui-react/src/core/Checkbox/Checkbox.tsx
index 2777c8c9f14..b49b496bf77 100644
--- a/packages/itwinui-react/src/core/Checkbox/Checkbox.tsx
+++ b/packages/itwinui-react/src/core/Checkbox/Checkbox.tsx
@@ -94,7 +94,7 @@ export const Checkbox = React.forwardRef((props, ref) => {
         )}
         style={style}
         data-iui-loading={isLoading ? 'true' : undefined}
-        data-iui-disabled={disabled || isLoading ? 'true' : undefined}
+        disabled={disabled || isLoading}
         type='checkbox'
         ref={refs}
         {...rest}
diff --git a/playgrounds/vite/src/App.tsx b/playgrounds/vite/src/App.tsx
index 3c95ae608fe..ba9edc19577 100644
--- a/playgrounds/vite/src/App.tsx
+++ b/playgrounds/vite/src/App.tsx
@@ -3,7 +3,7 @@ import { Checkbox } from '@itwin/itwinui-react';
 const App = () => {
   return (
     <>
-      <Checkbox label='Checkbox' status='warning' />
+      <Checkbox label='Checkbox' status='warning' disabled />
     </>
   );
 };

From eea57d09be3fd02e9c165ddd064ddb494adee44a Mon Sep 17 00:00:00 2001
From: Uyen Doan <uyen.doan@bentley.com>
Date: Fri, 20 Sep 2024 14:19:40 -0500
Subject: [PATCH 12/23] disabled input in tests:

---
 .../itwinui-react/src/core/Table/Table.test.tsx     | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/packages/itwinui-react/src/core/Table/Table.test.tsx b/packages/itwinui-react/src/core/Table/Table.test.tsx
index a63a83e60e8..fedb4aa1579 100644
--- a/packages/itwinui-react/src/core/Table/Table.test.tsx
+++ b/packages/itwinui-react/src/core/Table/Table.test.tsx
@@ -1842,10 +1842,10 @@ it('should disable row and handle selection accordingly', async () => {
 
   const checkboxCells = container.querySelectorAll('.iui-slot .iui-checkbox');
   expect(checkboxCells.length).toBe(4);
-  expect(checkboxCells[0]).not.toHaveAttribute('data-iui-disabled');
-  expect(checkboxCells[1]).not.toHaveAttribute('data-iui-disabled');
-  expect(checkboxCells[2]).toHaveAttribute('data-iui-disabled', 'true');
-  expect(checkboxCells[3]).not.toHaveAttribute('data-iui-disabled');
+  expect(checkboxCells[0]).not.toBeDisabled();
+  expect(checkboxCells[1]).not.toBeDisabled();
+  expect(checkboxCells[2]).toBeDisabled();
+  expect(checkboxCells[3]).not.toBeDisabled();
 
   // Select disabled row
   await userEvent.click(checkboxCells[2]);
@@ -3111,10 +3111,7 @@ it('should be disabled in column manager if `disableToggleVisibility` is true',
 
   await userEvent.click(columnManager);
   const columnManagerColumns = document.querySelectorAll<HTMLElement>('label');
-  expect(columnManagerColumns[0].classList).toHaveAttribute(
-    'data-iui-disabled',
-    'true',
-  );
+  expect(columnManagerColumns[0]).toBeDisabled();
   expect(columnManagerColumns[0].querySelector('input')?.disabled).toBeTruthy();
 });
 

From 3f04c632acbd740ccfb429eb6c260a2701d9dc6a Mon Sep 17 00:00:00 2001
From: Uyen Doan <uyen.doan@bentley.com>
Date: Fri, 20 Sep 2024 14:57:39 -0500
Subject: [PATCH 13/23] unit tests

---
 .../itwinui-react/src/core/InputGroup/InputGroup.test.tsx     | 4 +---
 packages/itwinui-react/src/core/Table/Table.test.tsx          | 1 -
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/itwinui-react/src/core/InputGroup/InputGroup.test.tsx b/packages/itwinui-react/src/core/InputGroup/InputGroup.test.tsx
index 5c068f711cf..86ac907c61b 100644
--- a/packages/itwinui-react/src/core/InputGroup/InputGroup.test.tsx
+++ b/packages/itwinui-react/src/core/InputGroup/InputGroup.test.tsx
@@ -32,9 +32,7 @@ it('should render disabled group', () => {
   getByText('some label');
   const inputs = container.querySelectorAll('input');
   expect(inputs.length).toBe(2);
-  inputs.forEach((input) =>
-    expect(input).toHaveAttribute('data-iui-disabled', 'true'),
-  );
+  inputs.forEach((input) => expect(input).toBeDisabled());
 });
 
 it('should render required group', () => {
diff --git a/packages/itwinui-react/src/core/Table/Table.test.tsx b/packages/itwinui-react/src/core/Table/Table.test.tsx
index fedb4aa1579..78628f6e8a4 100644
--- a/packages/itwinui-react/src/core/Table/Table.test.tsx
+++ b/packages/itwinui-react/src/core/Table/Table.test.tsx
@@ -3111,7 +3111,6 @@ it('should be disabled in column manager if `disableToggleVisibility` is true',
 
   await userEvent.click(columnManager);
   const columnManagerColumns = document.querySelectorAll<HTMLElement>('label');
-  expect(columnManagerColumns[0]).toBeDisabled();
   expect(columnManagerColumns[0].querySelector('input')?.disabled).toBeTruthy();
 });
 

From 5647725e0c3ea45e7ccccebecf4b3e62fbf13c27 Mon Sep 17 00:00:00 2001
From: Uyen Doan <uyen.doan@bentley.com>
Date: Fri, 20 Sep 2024 15:09:03 -0500
Subject: [PATCH 14/23] fixed css visual tests

---
 apps/css-workshop/src/components/Checkbox.astro | 2 +-
 apps/css-workshop/src/components/Radio.astro    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/css-workshop/src/components/Checkbox.astro b/apps/css-workshop/src/components/Checkbox.astro
index 7b924998cca..2b1708d3d93 100644
--- a/apps/css-workshop/src/components/Checkbox.astro
+++ b/apps/css-workshop/src/components/Checkbox.astro
@@ -31,7 +31,7 @@ const inputProps = {
   indeterminate: indeterminate,
   type: 'checkbox',
   'data-iui-loading': isLoading ? 'true' : undefined,
-  'data-iui-disabled': disabled ? 'true' : undefined,
+  disabled: disabled,
   ...props,
 } as astroHTML.JSX.InputHTMLAttributes;
 ---
diff --git a/apps/css-workshop/src/components/Radio.astro b/apps/css-workshop/src/components/Radio.astro
index 981e3880bf0..48124f0eb8e 100644
--- a/apps/css-workshop/src/components/Radio.astro
+++ b/apps/css-workshop/src/components/Radio.astro
@@ -26,7 +26,7 @@ const { disabled, status, class: className, labelPosition = 'right', ...props }
   <input
     class:list={['iui-checkbox', 'iui-radio', className]}
     type='radio'
-    data-iui-disabled={disabled ? 'true' : undefined}
+    disabled={disabled}
     {...props}
   />
   {

From b936fb59a8aba3a5f415127b6cc2d80028e43a86 Mon Sep 17 00:00:00 2001
From: Uyen Doan <uyen.doan@bentley.com>
Date: Fri, 20 Sep 2024 15:21:19 -0500
Subject: [PATCH 15/23] revert App.tsx

---
 playgrounds/vite/src/App.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/playgrounds/vite/src/App.tsx b/playgrounds/vite/src/App.tsx
index ba9edc19577..308ffd82cc0 100644
--- a/playgrounds/vite/src/App.tsx
+++ b/playgrounds/vite/src/App.tsx
@@ -1,9 +1,9 @@
-import { Checkbox } from '@itwin/itwinui-react';
+import { Button } from '@itwin/itwinui-react';
 
 const App = () => {
   return (
     <>
-      <Checkbox label='Checkbox' status='warning' disabled />
+      <Button>Hello world</Button>
     </>
   );
 };

From 660275e5ea25163012a51c09f5a610270b3880eb Mon Sep 17 00:00:00 2001
From: Uyen Doan <uyen.doan@bentley.com>
Date: Fri, 20 Sep 2024 15:25:31 -0500
Subject: [PATCH 16/23] revert TreeNode unit test

---
 packages/itwinui-react/src/core/Tree/TreeNode.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/itwinui-react/src/core/Tree/TreeNode.test.tsx b/packages/itwinui-react/src/core/Tree/TreeNode.test.tsx
index 6cf7d8f37c7..e9c191d025d 100644
--- a/packages/itwinui-react/src/core/Tree/TreeNode.test.tsx
+++ b/packages/itwinui-react/src/core/Tree/TreeNode.test.tsx
@@ -89,7 +89,7 @@ it('should render node with a checkbox', () => {
 
   expect(
     container.querySelector('.iui-tree-node-checkbox .testClass'),
-  ).not.toHaveAttribute('data-iui-disabled');
+  ).not.toBeDisabled();
 });
 
 it('should render node with an icon', () => {

From b3b81a621ea9c40b93b1e37adb67c53af5d2873d Mon Sep 17 00:00:00 2001
From: Uyen Doan <uyen.doan@bentley.com>
Date: Thu, 31 Oct 2024 13:49:59 -0500
Subject: [PATCH 17/23] added major changeset

---
 .changeset/cyan-pumpkins-study.md | 12 ++++++++++++
 1 file changed, 12 insertions(+)
 create mode 100644 .changeset/cyan-pumpkins-study.md

diff --git a/.changeset/cyan-pumpkins-study.md b/.changeset/cyan-pumpkins-study.md
new file mode 100644
index 00000000000..ba6b3dd4849
--- /dev/null
+++ b/.changeset/cyan-pumpkins-study.md
@@ -0,0 +1,12 @@
+---
+'@itwin/itwinui-css': major
+---
+
+Replaces the status classes for `iui-checkbox` with a new `data-iui-status` attribute.
+
+```diff
+- <div class="iui-checkbox iui-positive">
++ <div class="iui-checkbox" data-iui-status="positive">
+```
+
+Possible values include: `"positive"`, `"negative"`, and `"warning"`.

From 3f7d5856bc803f24e69300353db7b40b5ccfcead Mon Sep 17 00:00:00 2001
From: Uyen Doan <uyen.doan@bentley.com>
Date: Thu, 31 Oct 2024 13:56:05 -0500
Subject: [PATCH 18/23] modified changeset

---
 .changeset/cyan-pumpkins-study.md | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/.changeset/cyan-pumpkins-study.md b/.changeset/cyan-pumpkins-study.md
index ba6b3dd4849..9ea077fc44f 100644
--- a/.changeset/cyan-pumpkins-study.md
+++ b/.changeset/cyan-pumpkins-study.md
@@ -2,7 +2,7 @@
 '@itwin/itwinui-css': major
 ---
 
-Replaces the status classes for `iui-checkbox` with a new `data-iui-status` attribute.
+Replaces the attribute classes for `iui-checkbox` such as `iui-status`, `iui-disabled`, and `iui-loading` with new `data-iui-` attributes: `data-iui-status`, `data-iui-disabled`, and `data-iui-loading`.
 
 ```diff
 - <div class="iui-checkbox iui-positive">
@@ -10,3 +10,13 @@ Replaces the status classes for `iui-checkbox` with a new `data-iui-status` attr
 ```
 
 Possible values include: `"positive"`, `"negative"`, and `"warning"`.
+
+```diff
+- <div class="iui-checkbox iui-disabled">
++ <div class="iui-checkbox" data-iui-disabled="true">
+```
+
+```diff
+- <div class="iui-checkbox iui-loading">
++ <div class="iui-checkbox" data-iui-loading="true">
+```

From c7a5210a04aba6f84ebb5d30d7575937db750235 Mon Sep 17 00:00:00 2001
From: Uyen Doan <uyen.doan@bentley.com>
Date: Thu, 31 Oct 2024 14:21:12 -0500
Subject: [PATCH 19/23] added another changeset

---
 .changeset/odd-peas-draw.md | 12 ++++++++++++
 1 file changed, 12 insertions(+)
 create mode 100644 .changeset/odd-peas-draw.md

diff --git a/.changeset/odd-peas-draw.md b/.changeset/odd-peas-draw.md
new file mode 100644
index 00000000000..9a4ed37a74d
--- /dev/null
+++ b/.changeset/odd-peas-draw.md
@@ -0,0 +1,12 @@
+---
+'@itwin/itwinui-css': major
+---
+
+The class `iui-radio` now depends on `iui-checkbox` for its styling. Additionally, `iui-radio-wrapper` is now replaced by `iui-checkbox-wrapper` for all `Radio` elements.
+
+```diff
+- <label class="iui-radio-wrapper">
+- <input class="iui-radio">
++ <label class="iui-checkbox-wrapper">
++ <input class="iui-checkbox iui-radio">
+```

From 8771af415819fe50adcd7ef833090eea725a28ab Mon Sep 17 00:00:00 2001
From: Uyen Doan <uyen.doan@bentley.com>
Date: Wed, 6 Nov 2024 15:34:52 -0600
Subject: [PATCH 20/23] small fixes

---
 packages/itwinui-react/src/core/Radio/Radio.test.tsx | 10 ++++++----
 packages/itwinui-react/src/core/Table/Table.test.tsx |  2 ++
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/itwinui-react/src/core/Radio/Radio.test.tsx b/packages/itwinui-react/src/core/Radio/Radio.test.tsx
index 1f80801d079..735a43373b2 100644
--- a/packages/itwinui-react/src/core/Radio/Radio.test.tsx
+++ b/packages/itwinui-react/src/core/Radio/Radio.test.tsx
@@ -41,16 +41,18 @@ it('renders correctly with jsx element as label', () => {
 });
 
 it('renders disabled component', () => {
-  const { container } = render(
-    <Radio label='Some label' data-iui-disabled='true' />,
-  );
+  const { container } = render(<Radio label='Some label' disabled />);
 
   assertBaseElements(container);
 
   screen.getByText('Some label');
+  expect(container.querySelector('.iui-checkbox-wrapper')).toHaveAttribute(
+    'data-iui-disabled',
+    'true',
+  );
   expect(
     container.querySelector('input[type="radio"]') as HTMLInputElement,
-  ).toHaveAttribute('data-iui-disabled', 'true');
+  ).toBeDisabled();
 });
 
 it('renders positive component', () => {
diff --git a/packages/itwinui-react/src/core/Table/Table.test.tsx b/packages/itwinui-react/src/core/Table/Table.test.tsx
index a18756df4bc..7d173d9a87d 100644
--- a/packages/itwinui-react/src/core/Table/Table.test.tsx
+++ b/packages/itwinui-react/src/core/Table/Table.test.tsx
@@ -37,6 +37,7 @@ import {
   SelectionColumn,
   ExpanderColumn,
 } from './columns/index.js';
+import exp from 'node:constants';
 
 const intersectionCallbacks = new Map<Element, () => void>();
 vi.spyOn(IntersectionHooks, 'useIntersection').mockImplementation(
@@ -3199,6 +3200,7 @@ it('should be disabled in column manager if `disableToggleVisibility` is true',
 
   await userEvent.click(columnManager);
   const columnManagerColumns = document.querySelectorAll<HTMLElement>('label');
+  expect(columnManagerColumns[0]).toHaveAttribute('data-iui-disabled', 'true');
   expect(columnManagerColumns[0].querySelector('input')?.disabled).toBeTruthy();
 });
 

From 278b9097a359e6651a2478006c3f700563afbe1f Mon Sep 17 00:00:00 2001
From: Uyen Doan <uyen.doan@bentley.com>
Date: Wed, 6 Nov 2024 15:39:12 -0600
Subject: [PATCH 21/23] added dom hierarchy in changeset

---
 .changeset/odd-peas-draw.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.changeset/odd-peas-draw.md b/.changeset/odd-peas-draw.md
index 9a4ed37a74d..f3ac6f3b0aa 100644
--- a/.changeset/odd-peas-draw.md
+++ b/.changeset/odd-peas-draw.md
@@ -6,7 +6,7 @@ The class `iui-radio` now depends on `iui-checkbox` for its styling. Additionall
 
 ```diff
 - <label class="iui-radio-wrapper">
-- <input class="iui-radio">
+-   <input class="iui-radio">
 + <label class="iui-checkbox-wrapper">
-+ <input class="iui-checkbox iui-radio">
++   <input class="iui-checkbox iui-radio">
 ```

From 50708cdf826ff3cb4786e4172a2c683c503a5146 Mon Sep 17 00:00:00 2001
From: Uyen Doan <uyen.doan@bentley.com>
Date: Wed, 6 Nov 2024 16:52:36 -0600
Subject: [PATCH 22/23] removed strays

---
 packages/itwinui-react/src/core/Table/Table.test.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/itwinui-react/src/core/Table/Table.test.tsx b/packages/itwinui-react/src/core/Table/Table.test.tsx
index 7d173d9a87d..3f7467632c0 100644
--- a/packages/itwinui-react/src/core/Table/Table.test.tsx
+++ b/packages/itwinui-react/src/core/Table/Table.test.tsx
@@ -37,7 +37,6 @@ import {
   SelectionColumn,
   ExpanderColumn,
 } from './columns/index.js';
-import exp from 'node:constants';
 
 const intersectionCallbacks = new Map<Element, () => void>();
 vi.spyOn(IntersectionHooks, 'useIntersection').mockImplementation(

From 0c0e052e03cd814accc176d09f6ce3461543f9dd Mon Sep 17 00:00:00 2001
From: Uyen Doan <56598021+smmr-dn@users.noreply.github.com>
Date: Thu, 7 Nov 2024 15:14:51 -0600
Subject: [PATCH 23/23] Update odd-peas-draw.md

---
 .changeset/odd-peas-draw.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.changeset/odd-peas-draw.md b/.changeset/odd-peas-draw.md
index f3ac6f3b0aa..9a4ed37a74d 100644
--- a/.changeset/odd-peas-draw.md
+++ b/.changeset/odd-peas-draw.md
@@ -6,7 +6,7 @@ The class `iui-radio` now depends on `iui-checkbox` for its styling. Additionall
 
 ```diff
 - <label class="iui-radio-wrapper">
--   <input class="iui-radio">
+- <input class="iui-radio">
 + <label class="iui-checkbox-wrapper">
-+   <input class="iui-checkbox iui-radio">
++ <input class="iui-checkbox iui-radio">
 ```