Skip to content

refactor(many): extract raw svgs for cross-package use#2543

Draft
HouseOfHawks wants to merge 160 commits into
masterfrom
TASTY-1731
Draft

refactor(many): extract raw svgs for cross-package use#2543
HouseOfHawks wants to merge 160 commits into
masterfrom
TASTY-1731

Conversation

@HouseOfHawks
Copy link
Copy Markdown
Collaborator

This PR:

  • Extracts raw SVGs into a separate ui-icons-svg package, free of framework dependencies, for use in other icon-generating packages,
  • adds a new bucket in ui-icons-svg/svg/Parchment for all Graphics, Icons and Vectors used in Parchment, Digitary, Scribbles and Quottly applications,
  • maintains backwards compatibility for Lucide/React icons in ui-icons while making new Parchment icons available in this React package (both legacy and beta), and
  • updates the __docs__ app so that consumers can now filter icons by organization type and asset type when viewing Parchment assets (demo below)

Demo:

Screen.Recording.2026-05-06.at.8.46.53.AM.mov

Next iterations (ongoing work):

Currently there is significant asset overlap. Design teams will need to work through both asset libraries and unify that overlap (ie, InstUI's x.svg and Parchment's close.svg). Parchment application developers will need access to this full set of assets initially as teams begin implementing InstUI, but as re-design work becomes available those teams will be pointed to the InstUI icons where applicable. In other cases where assets are Parchment-specific or there is no InstUI counterpart, those Parchment assets will remain.

joyenjoyer and others added 30 commits December 17, 2025 13:03
For now it only parses V1 components. It also does not parse components that use the new structure
and there are several CSS errors
INSTUI-4789

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
…ustom/brand icon components and migration codemod
GitHub Pages only supports a single 404.html at the repo root. When
navigating to sub-routes in PR previews (e.g. /pr-preview/pr-123/Button),
the root 404.html was serving the production app instead of the PR
preview build.

A redirect script in index.html detects PR preview paths and redirects
to the PR preview's index.html with the route encoded as a query
parameter. The app entry point restores the original clean URL via
history.replaceState before rendering.
@CLAassistant
Copy link
Copy Markdown

CLAassistant commented May 6, 2026

CLA assistant check
All committers have signed the CLA.

…ing exports

there were some exports that were missing after the multi version upgrade. Add them back with the
proper path
@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 6, 2026

PR Preview Action v1.8.1

QR code for preview link

🚀 View preview at
https://instructure.design/pr-preview/pr-2543/

Built to branch gh-pages at 2026-05-11 12:55 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

@matyasf matyasf self-assigned this May 6, 2026
@HouseOfHawks HouseOfHawks force-pushed the TASTY-1731 branch 2 times, most recently from 29a3d3b to 68f4ad5 Compare May 6, 2026 15:06
ToMESSKa and others added 17 commits May 7, 2026 01:19
…DateInput v1 with DateInput v2 in DateTimeInput

BREAKING CHANGE: prevMonthLabel prop removed (use screenReaderLabels.prevMonthButton instead)

nextMonthLabel prop removed (use screenReaderLabels.nextMonthButton instead)

renderWeekdayLabels prop removed

dateFormat type changed: string → string

{ parser: (input: string) => Date

null, formatter: (date: Date) => string }

screenReaderLabels is a new required prop

dateFormat default changed: Moment's 'LL' (long month name) → locale's default date format

INSTUI-4791
…eplacing Chromatic

Capture full-page screenshots via cy.screenshot() in an afterEach hook,
record each test's visited URL via a cy.task for source-file linking,
diff against baselines stored on a visual-baselines branch using a new
`ui-scripts visual-diff` command, and publish an HTML report per PR to
gh-pages with a sticky PR comment linking to it.

The regression-test Next.js app now uses `output: 'export'` with
`trailingSlash: true`, serving a fully static site through http-server
— no SSR and no hydration so captures are byte-deterministic.

The report has a lightbox viewer with baseline/actual/diff mode toggle,
a draggable slider overlay, fit-to-window and 1:1 zoom, prev/next
navigation, a PR number link in the header, per-row source-file links
back to the GitHub blob URL, a debounced live search box, and
highlighted active filter buttons. The sticky PR comment includes a
collapsed <details> block with inline diff images for every changed row.

Documentation added at docs/testing/visual-regression.md.

Removes the Chromatic integration; CHROMATIC_APP_CODE secret is no
longer used. Baselines are seeded automatically by the new
visual-baselines workflow on every merge to master.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
… definition so they can build their own components with InstUI
BREAKING CHANGE: `thumbVariant` prop removed from RangeInput

INSTUI-5016
…DateInput v1 with DateInput v2 in DateTimeInput

BREAKING CHANGE: renderWeekdayLabels` prop removed

`calendarIcon` is a new required prop

INSTUI-4791
…elected on calendar days, BREAKING CHANGE: add mandatory prop selectedLabel, change datePickerDialog prop to mandatory
The content wrapper changed from display:block to display:flex in the v2
button rewrite, which made textAlign:center ineffective on the shrunk
children span. Add justifyContent based on textAlign so text is centered
regardless of whether an icon is present.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
core-js was fixing really niche bugs in the code ze.g. map.getOrInsertComputed, map.getOrInsert and
an exotic Safari bug https://bugs.webkit.org/show_bug.cgi?id=309342 that is fixed in Webkit nightly.
Remove core-js because its no longer needed
extracted raw svgs into a new ui-icons-svg package and added as a dependency

in ui-icons

feat(ui-scripts,ui-icons,ui-icons-svg): added parchment assets

added parchment icons, vectors and graphics
retooled script bundling to support parchment asset categories
extended demo app to conditionally render all icons by org
extended demo app to conditionally render parchment icons by type

refactor(ui-icons-svg): icons cleanup

cleaned up now unused directory

refactor(ui-scripts): typescript fix

fix(github actions): pin chromaui/action to v11

ci(github actions): removed debugging change
@github-actions
Copy link
Copy Markdown

Visual regression report

No changes.

Status Count
Unchanged 32
Changed 0
New 0
Removed 0

📊 View full report

Baselines come from the visual-baselines branch. They refresh on every merge to master.

@matyasf
Copy link
Copy Markdown
Collaborator

matyasf commented May 14, 2026

Can you please add a postfix to the new icons? e.g. AccessibilityParchment

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

9 participants