iTwin · mayank99 · Jun 16, 2023 · Jun 6, 2023 · Jun 7, 2023 · Jun 14, 2023
diff --git a/.changeset/quick-balloons-drum.md b/.changeset/quick-balloons-drum.md
@@ -0,0 +1,6 @@
+---
+'@itwin/itwinui-react': major
+'@itwin/itwinui-css': major
+---
+
+ProgressRadial has been refactored to be a single `<div>` instead of using a nested svg. Also it is recommended to explicitly set `size` when using in other components.
diff --git a/.changeset/sharp-oranges-kneel.md b/.changeset/sharp-oranges-kneel.md
@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-css': major
+---
+
+`iui-progress-radial` has been refactored to be a single `<div>` instead of using a nested svg. Size and status have been moved to data attributes. Also it is recommended to explicitly set `size` when using in other components.
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/Checkbox.test.ts-Loading.png b/apps/storybook/cypress-visual-screenshots/baseline/Checkbox.test.ts-Loading.png
diff --git a/...ok/cypress-visual-screenshots/baseline/ProgressRadial.test.ts-Indeterminate.png b/...ok/cypress-visual-screenshots/baseline/ProgressRadial.test.ts-Indeterminate.png
diff --git a/...orybook/cypress-visual-screenshots/baseline/ProgressRadial.test.ts-Negative.png b/...orybook/cypress-visual-screenshots/baseline/ProgressRadial.test.ts-Negative.png
diff --git a/...orybook/cypress-visual-screenshots/baseline/ProgressRadial.test.ts-Positive.png b/...orybook/cypress-visual-screenshots/baseline/ProgressRadial.test.ts-Positive.png
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/Table.test.ts-Loading.png b/apps/storybook/cypress-visual-screenshots/baseline/Table.test.ts-Loading.png
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/Tile.test.ts-Loading.png b/apps/storybook/cypress-visual-screenshots/baseline/Tile.test.ts-Loading.png
diff --git a/apps/storybook/src/ProgressRadial.stories.tsx b/apps/storybook/src/ProgressRadial.stories.tsx
@@ -14,8 +14,6 @@ export default {
   argTypes: {
     className: { control: { disable: true } },
     style: { control: { disable: true } },
-    title: { control: { disable: true } },
-    id: { control: { disable: true } },
   },
   args: {
     value: 50,

diff --git a/apps/storybook/src/Table.stories.tsx b/apps/storybook/src/Table.stories.tsx
@@ -4041,7 +4041,7 @@ export const StatusAndCellIcons: Story<Partial<TableProps>> = (args) => {
             startIcon={props.cellProps.row.original.startIcon}
             endIcon={
               props.cellProps.row.original.isLoading ? (
-                <ProgressRadial value={40} />
+                <ProgressRadial value={40} size='small' />
               ) : (
                 props.cellProps.row.original.endIcon
               )

diff --git a/.../bitmaps_reference/iTwinUI_checkbox_no-label_dark_0_demo-no-label_0_desktop.png b/.../bitmaps_reference/iTwinUI_checkbox_no-label_dark_0_demo-no-label_0_desktop.png
diff --git a/...tmaps_reference/iTwinUI_checkbox_no-label_hc_dark_0_demo-no-label_0_desktop.png b/...tmaps_reference/iTwinUI_checkbox_no-label_hc_dark_0_demo-no-label_0_desktop.png
diff --git a/...maps_reference/iTwinUI_checkbox_no-label_hc_light_0_demo-no-label_0_desktop.png b/...maps_reference/iTwinUI_checkbox_no-label_hc_light_0_demo-no-label_0_desktop.png
diff --git a/...bitmaps_reference/iTwinUI_checkbox_no-label_light_0_demo-no-label_0_desktop.png b/...bitmaps_reference/iTwinUI_checkbox_no-label_light_0_demo-no-label_0_desktop.png
diff --git a/..._reference/iTwinUI_progress-indicator_overlay_dark_0_demo-overlay_0_desktop.png b/..._reference/iTwinUI_progress-indicator_overlay_dark_0_demo-overlay_0_desktop.png
diff --git a/...ference/iTwinUI_progress-indicator_overlay_hc_dark_0_demo-overlay_0_desktop.png b/...ference/iTwinUI_progress-indicator_overlay_hc_dark_0_demo-overlay_0_desktop.png
diff --git a/...erence/iTwinUI_progress-indicator_overlay_hc_light_0_demo-overlay_0_desktop.png b/...erence/iTwinUI_progress-indicator_overlay_hc_light_0_demo-overlay_0_desktop.png
diff --git a/...reference/iTwinUI_progress-indicator_overlay_light_0_demo-overlay_0_desktop.png b/...reference/iTwinUI_progress-indicator_overlay_light_0_demo-overlay_0_desktop.png
diff --git a/...ps_reference/iTwinUI_progress-indicator_radial_dark_0_demo-radial_0_desktop.png b/...ps_reference/iTwinUI_progress-indicator_radial_dark_0_demo-radial_0_desktop.png
diff --git a/...reference/iTwinUI_progress-indicator_radial_hc_dark_0_demo-radial_0_desktop.png b/...reference/iTwinUI_progress-indicator_radial_hc_dark_0_demo-radial_0_desktop.png
diff --git a/...eference/iTwinUI_progress-indicator_radial_hc_light_0_demo-radial_0_desktop.png b/...eference/iTwinUI_progress-indicator_radial_hc_light_0_demo-radial_0_desktop.png
diff --git a/...s_reference/iTwinUI_progress-indicator_radial_light_0_demo-radial_0_desktop.png b/...s_reference/iTwinUI_progress-indicator_radial_light_0_demo-radial_0_desktop.png
diff --git a/...TwinUI_table_Editable_cell_dark_0_demo-defaultiui-tablenth-child1_0_desktop.png b/...TwinUI_table_Editable_cell_dark_0_demo-defaultiui-tablenth-child1_0_desktop.png
diff --git a/...nUI_table_Editable_cell_hc_dark_0_demo-defaultiui-tablenth-child1_0_desktop.png b/...nUI_table_Editable_cell_hc_dark_0_demo-defaultiui-tablenth-child1_0_desktop.png
diff --git a/...UI_table_Editable_cell_hc_light_0_demo-defaultiui-tablenth-child1_0_desktop.png b/...UI_table_Editable_cell_hc_light_0_demo-defaultiui-tablenth-child1_0_desktop.png
diff --git a/...winUI_table_Editable_cell_light_0_demo-defaultiui-tablenth-child1_0_desktop.png b/...winUI_table_Editable_cell_light_0_demo-defaultiui-tablenth-child1_0_desktop.png
diff --git a/.../bitmaps_reference/iTwinUI_table_Type_Default_dark_0_demo-default_0_desktop.png b/.../bitmaps_reference/iTwinUI_table_Type_Default_dark_0_demo-default_0_desktop.png
diff --git a/...tmaps_reference/iTwinUI_table_Type_Default_hc_dark_0_demo-default_0_desktop.png b/...tmaps_reference/iTwinUI_table_Type_Default_hc_dark_0_demo-default_0_desktop.png
diff --git a/...maps_reference/iTwinUI_table_Type_Default_hc_light_0_demo-default_0_desktop.png b/...maps_reference/iTwinUI_table_Type_Default_hc_light_0_demo-default_0_desktop.png
diff --git a/...bitmaps_reference/iTwinUI_table_Type_Default_light_0_demo-default_0_desktop.png b/...bitmaps_reference/iTwinUI_table_Type_Default_light_0_demo-default_0_desktop.png
diff --git a/...ce/iTwinUI_table_Type_Expandable_Rows_dark_0_demo-expandable-rows_0_desktop.png b/...ce/iTwinUI_table_Type_Expandable_Rows_dark_0_demo-expandable-rows_0_desktop.png
diff --git a/...iTwinUI_table_Type_Expandable_Rows_hc_dark_0_demo-expandable-rows_0_desktop.png b/...iTwinUI_table_Type_Expandable_Rows_hc_dark_0_demo-expandable-rows_0_desktop.png
diff --git a/...TwinUI_table_Type_Expandable_Rows_hc_light_0_demo-expandable-rows_0_desktop.png b/...TwinUI_table_Type_Expandable_Rows_hc_light_0_demo-expandable-rows_0_desktop.png
diff --git a/...e/iTwinUI_table_Type_Expandable_Rows_light_0_demo-expandable-rows_0_desktop.png b/...e/iTwinUI_table_Type_Expandable_Rows_light_0_demo-expandable-rows_0_desktop.png
diff --git a/...ts/bitmaps_reference/iTwinUI_table_Type_Extras_dark_0_demo-extras_0_desktop.png b/...ts/bitmaps_reference/iTwinUI_table_Type_Extras_dark_0_demo-extras_0_desktop.png
diff --git a/...bitmaps_reference/iTwinUI_table_Type_Extras_hc_dark_0_demo-extras_0_desktop.png b/...bitmaps_reference/iTwinUI_table_Type_Extras_hc_dark_0_demo-extras_0_desktop.png
diff --git a/...itmaps_reference/iTwinUI_table_Type_Extras_hc_light_0_demo-extras_0_desktop.png b/...itmaps_reference/iTwinUI_table_Type_Extras_hc_light_0_demo-extras_0_desktop.png
diff --git a/...s/bitmaps_reference/iTwinUI_table_Type_Extras_light_0_demo-extras_0_desktop.png b/...s/bitmaps_reference/iTwinUI_table_Type_Extras_light_0_demo-extras_0_desktop.png
diff --git a/.../bitmaps_reference/iTwinUI_table_Type_Loading_dark_0_demo-loading_0_desktop.png b/.../bitmaps_reference/iTwinUI_table_Type_Loading_dark_0_demo-loading_0_desktop.png
diff --git a/...tmaps_reference/iTwinUI_table_Type_Loading_hc_dark_0_demo-loading_0_desktop.png b/...tmaps_reference/iTwinUI_table_Type_Loading_hc_dark_0_demo-loading_0_desktop.png
diff --git a/...maps_reference/iTwinUI_table_Type_Loading_hc_light_0_demo-loading_0_desktop.png b/...maps_reference/iTwinUI_table_Type_Loading_hc_light_0_demo-loading_0_desktop.png
diff --git a/...bitmaps_reference/iTwinUI_table_Type_Loading_light_0_demo-loading_0_desktop.png b/...bitmaps_reference/iTwinUI_table_Type_Loading_light_0_demo-loading_0_desktop.png
diff --git a/...ts/bitmaps_reference/iTwinUI_table_Type_Status_dark_0_demo-status_0_desktop.png b/...ts/bitmaps_reference/iTwinUI_table_Type_Status_dark_0_demo-status_0_desktop.png
diff --git a/...bitmaps_reference/iTwinUI_table_Type_Status_hc_dark_0_demo-status_0_desktop.png b/...bitmaps_reference/iTwinUI_table_Type_Status_hc_dark_0_demo-status_0_desktop.png
diff --git a/...itmaps_reference/iTwinUI_table_Type_Status_hc_light_0_demo-status_0_desktop.png b/...itmaps_reference/iTwinUI_table_Type_Status_hc_light_0_demo-status_0_desktop.png
diff --git a/...s/bitmaps_reference/iTwinUI_table_Type_Status_light_0_demo-status_0_desktop.png b/...s/bitmaps_reference/iTwinUI_table_Type_Status_light_0_demo-status_0_desktop.png
diff --git a/...ference/iTwinUI_tile_Type_Action_States_dark_0_demo-action-states_0_desktop.png b/...ference/iTwinUI_tile_Type_Action_States_dark_0_demo-action-states_0_desktop.png
diff --git a/...ence/iTwinUI_tile_Type_Action_States_hc_dark_0_demo-action-states_0_desktop.png b/...ence/iTwinUI_tile_Type_Action_States_hc_dark_0_demo-action-states_0_desktop.png
diff --git a/...nce/iTwinUI_tile_Type_Action_States_hc_light_0_demo-action-states_0_desktop.png b/...nce/iTwinUI_tile_Type_Action_States_hc_light_0_demo-action-states_0_desktop.png
diff --git a/...erence/iTwinUI_tile_Type_Action_States_light_0_demo-action-states_0_desktop.png b/...erence/iTwinUI_tile_Type_Action_States_light_0_demo-action-states_0_desktop.png
diff --git a/..._tile_Type_Folder_Action_States_dark_0_demo-action-states-folders_0_desktop.png b/..._tile_Type_Folder_Action_States_dark_0_demo-action-states-folders_0_desktop.png
diff --git a/...le_Type_Folder_Action_States_hc_dark_0_demo-action-states-folders_0_desktop.png b/...le_Type_Folder_Action_States_hc_dark_0_demo-action-states-folders_0_desktop.png
diff --git a/...e_Type_Folder_Action_States_hc_light_0_demo-action-states-folders_0_desktop.png b/...e_Type_Folder_Action_States_hc_light_0_demo-action-states-folders_0_desktop.png
diff --git a/...tile_Type_Folder_Action_States_light_0_demo-action-states-folders_0_desktop.png b/...tile_Type_Folder_Action_States_light_0_demo-action-states-folders_0_desktop.png
diff --git a/packages/itwinui-css/backstop/tests/checkbox.html b/packages/itwinui-css/backstop/tests/checkbox.html
@@ -570,27 +570,10 @@ <h3>Checkbox on left</h3>
             disabled
             tabindex="-1"
           />
-          <div class="iui-progress-indicator-radial iui-indeterminate iui-x-small">
-            <svg
-              class="iui-radial"
-              viewBox="0 0 32 32"
-              aria-hidden="true"
-            >
-              <circle
-                class="iui-track"
-                cx="16"
-                cy="16"
-                r="14"
-              >
-              </circle>
-              <circle
-                class="iui-fill"
-                cx="16"
-                cy="16"
-                r="14"
-              >
-              </circle>
-            </svg>
+          <div
+            class="iui-progress-indicator-radial iui-indeterminate"
+            data-iui-size="x-small"
+          >
           </div>
           <span class="iui-checkbox-label">Loading checkbox</span>
         </label>
@@ -684,27 +667,10 @@ <h3>Checkbox on right</h3>
             disabled
             tabindex="-1"
           />
-          <div class="iui-progress-indicator-radial iui-indeterminate iui-x-small">
-            <svg
-              class="iui-radial"
-              viewBox="0 0 32 32"
-              aria-hidden="true"
-            >
-              <circle
-                class="iui-track"
-                cx="16"
-                cy="16"
-                r="14"
-              >
-              </circle>
-              <circle
-                class="iui-fill"
-                cx="16"
-                cy="16"
-                r="14"
-              >
-              </circle>
-            </svg>
+          <div
+            class="iui-progress-indicator-radial iui-indeterminate"
+            data-iui-size="x-small"
+          >
           </div>
         </label>
 

diff --git a/packages/itwinui-css/backstop/tests/non-ideal-state.html b/packages/itwinui-css/backstop/tests/non-ideal-state.html
@@ -2647,26 +2647,6 @@
       <div class="iui-non-ideal-state">
         <div class="iui-non-ideal-state-illustration">
           <div class="iui-progress-indicator-radial iui-indeterminate">
-            <svg
-              class="iui-radial"
-              viewBox="0 0 32 32"
-              aria-hidden="true"
-            >
-              <circle
-                class="iui-track"
-                cx="16"
-                cy="16"
-                r="14"
-              >
-              </circle>
-              <circle
-                class="iui-fill"
-                cx="16"
-                cy="16"
-                r="14"
-              >
-              </circle>
-            </svg>
           </div>
         </div>
         <div class="iui-non-ideal-state-title">Session timed out</div>