V12

.claude/commands/commit.md

@@ -7,6 +7,7 @@ Create a commit following the Instructure UI commit conventions:
 ## Format Requirements
 
 Use Conventional Commits format:
+
 ```
 type(scope): subject
 
@@ -25,13 +26,15 @@ Document any breaking changes here with BREAKING CHANGE: prefix
 ## Breaking Changes
 
 Mark breaking changes with an exclamation mark after scope and document in body:
+
 ```
 feat(ui-select)!: remove deprecated onOpen prop
 
 BREAKING CHANGE: The onOpen prop has been removed. Use onShowOptions instead.
 ```
 
 Breaking changes include:
+
 - Removing/renaming props or components
 - Changing prop types or behavior
 - Changing defaults that affect behavior
@@ -40,6 +43,7 @@ Breaking changes include:
 ## Commit Footer
 
 Always include:
+
 ```
 🤖 Generated with [Claude Code](https://claude.com/claude-code)
 

.claude/commands/pr.md

@@ -28,23 +28,27 @@ All PRs must include:
 6. **If Jira ticket number is unknown, ask the user for it before creating the PR**
 7. Push to remote if needed: `git push -u origin <branch>`
 8. Create PR with `gh pr create --title "title" --body "$(cat <<'EOF'
+
 ## Summary
+
 - Bullet point 1
 - Bullet point 2
 
 ## Test Plan
+
 - [ ] Step 1
 - [ ] Step 2
 
 ## Jira Reference
+
 Fixes INST-XXXX (or omit this section if not applicable)
 
 🤖 Generated with [Claude Code](https://claude.com/claude-code)
 EOF
-)"`
-9. Return the PR URL
+)"` 9. Return the PR URL
 
 **Important**:
+
 - Base branch is usually `master` (not main)
 - Analyze ALL commits in the branch, not just the latest one
 - Use markdown checklists for test plan

.github/workflows/preview.yml

@@ -12,6 +12,8 @@ on:
 jobs:
   deploy-preview:
     runs-on: ubuntu-latest
+    env:
+      GITHUB_PULL_REQUEST_PREVIEW: 'true'
     steps:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v4

.husky/prepare-commit-msg

@@ -6,7 +6,9 @@ if [ "$2" = "commit" ] && [ -n "$3" ]; then
 fi
 
 # Check if a rebase is in progress
-if [ -d ".git/rebase-merge" ] || [ -d ".git/rebase-apply" ]; then
+if [ -d "$(git rev-parse --git-path rebase-merge)" ] ||
+   [ -d "$(git rev-parse --git-path rebase-apply)" ]; then
+  echo "Skipping prepare-commit-msg git hook during rebase"
   exit 0
 fi
 

.inst-ai/templates/jira/README.md

@@ -5,10 +5,12 @@ This directory contains prompt templates for generating Jira tickets from Slack
 ## Template Types
 
 ### Bug Report Templates
+
 - `bug-report.extraction.md` - Extracts structured data from bug report conversations
 - `bug-report.generation.md` - Generates final Jira ticket content for bugs
 
 ### Feature Request Templates
+
 - `feature-request.extraction.md` - Extracts structured data from feature request conversations
 - `feature-request.generation.md` - Generates final Jira ticket content for features
 
@@ -42,4 +44,4 @@ export const config = {
 
 ## Template Format
 
-Templates should be valid Markdown files with embedded prompts for the AI model. The AI will process the template content and generate responses in the expected format (JSON for extraction, ADF JSON for generation).
+Templates should be valid Markdown files with embedded prompts for the AI model. The AI will process the template content and generate responses in the expected format (JSON for extraction, ADF JSON for generation).

.inst-ai/templates/jira/bug-report.extraction.md

@@ -3,10 +3,11 @@
 **Task:** Analyze the conversation and extract entities into a JSON object. Use `null` for missing values.
 
 **Entities:**
+
 - `component_name`: string | null - The name of the UI component or module mentioned
 - `browser_name`: string | null - Browser where the issue occurs (e.g., "Chrome", "Firefox", "Safari")
 - `os_name`: string | null - Operating system where the issue occurs (e.g., "macOS", "Windows", "Linux")
-- `instui_version`: string | null - InstUI version (e.g., "8.51.0", "v8.51.0"). Look for @instructure/ui-* package versions in package.json, version mentions in conversation, or CodeSandbox dependencies
+- `instui_version`: string | null - InstUI version (e.g., "8.51.0", "v8.51.0"). Look for @instructure/ui-\* package versions in package.json, version mentions in conversation, or CodeSandbox dependencies
 - `summary_of_bug`: string - Brief description of the bug
 - `reporter_name`: string - Name of the person reporting the bug
 - `environment_text`: string | null - Additional environment details
@@ -18,4 +19,4 @@
 **Conversation:**
 {{CONVERSATION_CONTENT}}
 
-**JSON Output:**
+**JSON Output:**

.inst-ai/templates/jira/bug-report.generation.md

@@ -5,6 +5,7 @@
 **Task:** Use the `CONTEXT` to generate a JSON object with a `summary` and an ADF `description`.
 
 **Requirements:**
+
 - The `summary` must be: `Fix: [<Component Name>] <Brief problem description>`. Use the component_name from extracted data if available, otherwise use a generic name based on the affected area.
 - The `description` must be a valid Atlassian Document Format (ADF) JSON object.
 - Include all relevant technical details from the context.
@@ -24,4 +25,4 @@
 
 **Your Turn (Use the CONTEXT provided above):**
 **IMPORTANT:** Return ONLY valid JSON. Every property must be followed by a comma except the last one in an object or array. Double-check all commas before responding.
-**Output JSON:**
+**Output JSON:**

.inst-ai/templates/jira/feature-request.extraction.md

@@ -3,6 +3,7 @@
 **Task:** Analyze the conversation and extract entities into a JSON object. Use `null` for missing values.
 
 **Entities:**
+
 - `feature_name`: string | null - The name of the requested feature
 - `requestor_name`: string - Name of the person requesting the feature
 - `business_justification`: string | null - Why this feature is needed
@@ -15,4 +16,4 @@
 **Conversation:**
 {{CONVERSATION_CONTENT}}
 
-**JSON Output:**
+**JSON Output:**

.inst-ai/templates/jira/feature-request.generation.md

@@ -5,6 +5,7 @@
 **Task:** Use the `CONTEXT` to generate a JSON object with a `summary` and an ADF `description`.
 
 **Requirements:**
+
 - The `summary` must be: `Feature: [<Component/Area Name>] <Brief description>`. Use the feature_name or affected_components from extracted data if available, otherwise use a generic name based on the affected area.
 - The `description` must be a valid Atlassian Document Format (ADF) JSON object.
 - Include business justification, proposed solution, and success criteria.
@@ -24,4 +25,4 @@
 
 **Your Turn (Use the CONTEXT provided above):**
 **IMPORTANT:** Return ONLY valid JSON. Every property must be followed by a comma except the last one in an object or array. Double-check all commas before responding.
-**Output JSON:**
+**Output JSON:**

CLAUDE.md

@@ -53,6 +53,7 @@ pnpm run build:types  # Build TypeScript declarations
 
 # Testing
 pnpm run test:vitest  # Unit tests
+pnpm run test:vitest ui-radio-input # Run tests for a single package
 pnpm run cy:component # Cypress component tests
 
 # Linting
@@ -152,6 +153,7 @@ All components **MUST**:
 ```bash
 pnpm run test:vitest  # Unit tests
 pnpm run cy:component # Cypress tests
+pnpm run test:vitest ui-radio-input # Run tests for a single package
 
 # Visual regression tests (in regression-test directory)
 cd regression-test

cypress/component/Menu.cy.tsx

@@ -270,7 +270,8 @@ describe('<Menu/>', () => {
       .should('be.focused')
   })
 
-  it(`should show and focus flyout menu on space keyDown`, () => {
+  // This test is failing randomly
+  it.skip(`should show and focus flyout menu on space keyDown`, () => {
     cy.mount(
       <Menu label="Parent">
         <Menu label="Flyout">

cypress/component/Pagination.cy.tsx

@@ -99,7 +99,7 @@ describe('<Pagination/>', () => {
       })
     })
 
-    cy.viewport(300, 800)
+    cy.viewport(100, 800)
 
     cy.get('[role="navigation"]').within(() => {
       cy.get('button').then(($items) => {

docs/guides/upgrade-guide.md

@@ -4,84 +4,20 @@ category: Guides
 order: 1
 ---
 
-# Upgrade Guide for Version 11
+# Upgrade Guide for Version 12
 
-## InstUI and React
+## New theming system
 
-> React 16 and 17 support was dropped with InstUI 11. Please upgrade to React 18 before upgrading to InstUI v11!
+TODO add details
 
-### React 19
+## New icons
 
-InstUI v11 added support for React 19. But upgrading to React 19 might cause issues because InstUI needs to access the native DOM in some cases and React introduced a breaking change here by [removing `ReactDOM.findDOMNode()`](https://react.dev/blog/2024/04/25/react-19-upgrade-guide#removed-reactdom-finddomnode). If you are upgrading to React 19, you will need to add `ref`s to some of your custom components that use InstUI utilities, see [this guide](accessing-the-dom). We suggest to check your code thoroughly for errors, especially places where you use your own components as some kind of popovers or its triggers (e.g. Menu, Popover, Tooltip, Drilldown,..).
-
-If you are using React 18 you might just see error messages like (`Error: ${elName} doesn't have "ref" property.`), but your code should work the same as with InstUI v10.
-
----
-
-## PropTypes Support Dropped
-
-With React 19, support for **PropTypes was dropped** from the core library. While it's still possible to use them with third-party libraries, InstUI has decided to no longer support them based on user feedback.
-
-**Tip:** To see how the removal of `propTypes` might affect your application's business logic, you can use a Babel plugin like [babel-plugin-transform-react-remove-prop-types](https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types) to strip them out during your build process for testing.
-
----
-
-## Changes to Testability
-
-The **`@testable` decorator has been removed**. The `data-cid` props, which were previously added by this decorator in development builds, are now **always added to components**. This change was made in response to frequent requests for a consistent way to identify InstUI components for end-to-end (e2e) tests.
-
-As a result of this change, the **`ALWAYS_APPEND_UI_TESTABLE_LOCATORS`** Node.js environment variable is no longer used.
-
----
+InstUI has switched to a new icon set, [Lucide](https://lucide.dev/icons/). We are still keeping some Instructure-specific icons, like product logos. We have a codemod that will help you migrate your code to the new icon set (see below).
 
 ## Removal of deprecated props/components/APIs
 
-### InstUISettingsProvider
-
-[InstUISettingsProvider](InstUISettingsProvider)'s `as` prop was removed, it will always render as a `<span>` (note: it will only render anything to the DOM if you provide a value to the `dir` prop.). The provided codemod will remove this prop automatically (see below).
-
-### Theming engine changes
-
-| Removed                                            | What to use instead?                                                                                  |
-| :------------------------------------------------- | :---------------------------------------------------------------------------------------------------- |
-| `canvas.use()`, `canvasHighContrast.use()`         | Wrap all your application roots in `<InstUISettingsProvider>`                                         |
-| `canvasThemeLocal`, `canvasHighContrastThemeLocal` | Use `canvas` and `canvasHighContrast` respectively, they are the same objects.                        |
-| `variables` field on theme objects                 | Use `canvas.borders` instead of `canvas.variables.borders` (same for all other fields)                |
-| `@instructure/theme-registry` package              | This added the removed functions above. Wrap all your application roots in `<InstUISettingsProvider>` |
-
-### CodeEditor
-
-The **`<CodeEditor>` component** from the `ui-code-editor` package has been **removed** due to significant accessibility issues. Please use the [SourceCodeEditor](SourceCodeEditor) component as a replacement.
-
-### Removal of the `deprecated`, `experimental`, `hack` decorators
-
-We have removed these utilities from the `ui-react-utils` package because we are phasing out parts from the codebase that use decorators.
-
-If you want to still use these we suggest to copy-paste their code from the latest v10 codebase (Note: they only work for class-based components!).
-
----
-
-### Table
-
-[Table](Table) is now using [TableContext](TableContext) to pass down data to its child components, the following props are no longer passed down to their children (This should only affect you if you have custom table rows or cells):
-
-| Component | Prop removed | Substitute                      |
-| :-------- | :----------- | :------------------------------ |
-| `Row`     | `isStacked`  | is now stored in `TableContext` |
-| `Body`    | `isStacked`  | is now stored in `TableContext` |
-| `Body`    | `hover`      | is now stored in `TableContext` |
-| `Body`    | `headers`    | is now stored in `TableContext` |
-
-[Table](Table)'s `caption` prop is now required.
-
----
-
 ## API Changes
 
-`ui-dom-utils`/`getComputedStyle` can now return `undefined`: In previous versions it sometimes returned an empty object which could lead to runtime exceptions when one tried to call methods of `CSSStyleDeclaration` on it.
-
----
-
 ## Codemods
 
 To ease the upgrade, we provide codemods that will automate most of the changes. Pay close attention to its output, it cannot refactor complex code! The codemod scripts can be run via the following commands:
@@ -90,16 +26,16 @@ To ease the upgrade, we provide codemods that will automate most of the changes.
 ---
 type: code
 ---
-npm install @instructure/ui-codemods@11
-npx [email protected] -t node_modules/@instructure/ui-codemods/lib/instUIv11Codemods.ts <path> --usePrettier=false
+npm install @instructure/ui-codemods@12
+npx [email protected] -t node_modules/@instructure/ui-codemods/lib/instUIv12Codemods.ts <path> --usePrettier=false
 ```
 
-This is a collection of the codemods that will do the following:
+where `<path>` is the path to the directory (and its subdirectories) to be transformed.
+
+The codemods that will do the following:
 
-- Removes the `as` prop from `InstUISettingsProvider`.
-- Renames `canvasThemeLocal` to `canvas` and `canvasHighContrastThemeLocal` to `canvasHighContrastTheme`, warns about deleted `ThemeRegistry` imports and the removed `canvas.use()`/`canvasHighContrast.use()` functions.
-- Prints a warning if the `caption` prop is missing from a `<Table />`
-- Warns if `CodeEditor` is used
+- TODO add details
+- TODO
 
 Options for the codemod:
 

dprint.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "https://dprint.dev/schemas/v0.json",
+  "typescript": {
+    "semiColons": "asi"
+  },
+  "excludes": ["**/node_modules", "!packages/ui-themes/src/themes/newThemes/"],
+  "plugins": ["https://plugins.dprint.dev/typescript-0.95.11.wasm"]
+}

lerna.json

@@ -7,4 +7,4 @@
     }
   },
   "$schema": "node_modules/lerna/schemas/lerna-schema.json"
-}
+}

package.json

@@ -14,6 +14,7 @@
     "packages/*"
   ],
   "scripts": {
+    "build:themes": "ui-scripts build-themes",
     "prestart": "pnpm run bootstrap",
     "start": "pnpm --filter docs-app start",
     "start:watch": "pnpm --filter docs-app start:watch",
@@ -130,5 +131,5 @@
   "browserslist": [
     "extends @instructure/browserslist-config-instui"
   ],
-  "packageManager": "pnpm@10.18.3+sha512.bbd16e6d7286fd7e01f6b3c0b3c932cda2965c06a908328f74663f10a9aea51f1129eea615134bf992831b009eabe167ecb7008b597f40ff9bc75946aadfb08d"
+  "packageManager": "pnpm@10.23.0"
 }