or-1730: introduce file input o3 form #2313

frshwtr · 2025-12-11T13:35:26Z

Describe your changes

Additional context

JIRA ticket	Figma design
OR-xxxx	Figma: Name

Checklist before requesting a review

I have applied percy label for o-[COMPONENT] or chromatic label for o3-[COMPONENT] on my PR before merging and after review. Find more details in CONTRIBUTING.md
If it is a new feature, I have added thorough tests.
I have updated relevant docs.
I have updated relevant env variables in Doppler.

…classes

Copilot

Pull request overview

This PR introduces a new file input component to the o3-form library, allowing users to upload files with visual feedback and delete functionality.

Key changes:

New FileInput component with upload/delete capabilities and uploading state indication
Enhanced focus styles to support :focus-within pseudo-class for better accessibility
Updated story decorators across form components to use dynamic brand selection from globals

Reviewed changes

Copilot reviewed 24 out of 24 changed files in this pull request and generated 10 comments.

Show a summary per file

File	Description
libraries/o3-figma-sb-links/src/sb-links.json	Added Storybook links for file input stories
libraries/o3-figma-sb-links/src/links.json	Added navigation links for file input component stories
libraries/o3-figma-sb-links/src/figma-links.json	Added Figma design link placeholders for file input
components/o3-foundation/src/css/components/focus.css	Added `:focus-within` pseudo-class support for focus rings
components/o3-form/stories/*.stories.tsx	Updated decorators to use dynamic brand selection
components/o3-form/stories/fileInput.test.stories.tsx	Added test stories for file input JavaScript functionality
components/o3-form/stories/fileInput.stories.tsx	Added main file input stories
components/o3-form/stories/FileInputJavaScript.tsx	Created helper component for JavaScript-based file input demos
components/o3-form/src/types/index.ts	Added FileInputProps type definition
components/o3-form/src/tsx/index.ts	Exported FileInput component
components/o3-form/src/tsx/FileUploadController.ts	Implemented file upload controller logic
components/o3-form/src/tsx/FileInput.tsx	Created FileInput React component
components/o3-form/src/css/components/file-input.css	Added file input styling
components/o3-form/main.css	Imported file-input.css
components/o3-form/README.md	Added documentation for file input component

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

components/o3-form/src/tsx/FileUploadController.ts

components/o3-form/stories/fileInput.stories.tsx

components/o3-form/src/tsx/FileInput.tsx

components/o3-form/stories/checkbox.stories.tsx

components/o3-form/src/css/components/file-input.css

components/o3-form/src/types/index.ts

components/o3-form/stories/fileInput.test.stories.tsx

components/o3-form/src/tsx/FileInput.tsx

Co-authored-by: Copilot <[email protected]>

Copilot

Pull request overview

Copilot reviewed 24 out of 24 changed files in this pull request and generated 5 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

components/o3-form/src/tsx/FileUploadController.ts

components/o3-form/src/tsx/FileInput.tsx

components/o3-form/src/css/components/file-input.css

components/o3-form/README.md

frshwtr · 2025-12-23T14:30:18Z

~~Note, delete icon gets pushed to new line. Needs fixing~~ Done

File upload content should not flex via column, so we should remove the o3-form class

joelcarr

Here is a few of comments from me. As I am relatively new to the codebase, I would appreciate that @j-mes will provide a better review for this new component 😄

joelcarr · 2026-01-08T17:02:49Z

components/o3-form/src/css/components/file-input.css

+}
+
+:root {
+	--o3-file-input-icon-delete: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' fill='none'%3E%3Cpath d='M12.3337 17.3333C12.1496 17.3333 12.0003 17.1841 12.0003 17L12.0003 12.3333C12.0003 12.1492 12.1496 12 12.3337 12H13.0003C13.1844 12 13.3337 12.1492 13.3337 12.3333L13.3337 17C13.3337 17.1841 13.1844 17.3333 13.0003 17.3333H12.3337Z' fill='black'/%3E%3Cpath d='M14.667 17C14.667 17.1841 14.8162 17.3333 15.0003 17.3333H15.667C15.8511 17.3333 16.0003 17.1841 16.0003 17V12.3333C16.0003 12.1492 15.8511 12 15.667 12H15.0003C14.8162 12 14.667 12.1492 14.667 12.3333V17Z' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.0003 8C12.8162 8 12.667 8.14924 12.667 8.33333V9.33333H9.00033C8.81623 9.33333 8.66699 9.48257 8.66699 9.66667V10.3333C8.66699 10.5174 8.81623 10.6667 9.00033 10.6667H9.33366V19.3333C9.33366 19.7015 9.63214 20 10.0003 20H18.0003C18.3685 20 18.667 19.7015 18.667 19.3333V10.6667H19.0003C19.1844 10.6667 19.3337 10.5174 19.3337 10.3333V9.66667C19.3337 9.48257 19.1844 9.33333 19.0003 9.33333H15.3337V8.33333C15.3337 8.14924 15.1844 8 15.0003 8H13.0003ZM10.667 10.6667H17.3337V18.6667H10.667V10.6667Z' fill='black'/%3E%3C/svg%3E")


suggestion: We should reference this icon from o3 foundations.

joelcarr · 2026-01-08T17:06:37Z

components/o3-form/src/css/components/file-input.css

+	font-family: var(--o3-type-body-base-font-family);
+	font-size: var(--o3-type-body-base-font-size);
+	font-weight: var(--o3-type-body-base-font-weight);
+	line-height: var(--o3-type-body-base-line-height);


thought: I would like for us at some point to make use of the typography utility classes within our components to reduce repeating rules.

components/o3-form/src/css/components/file-input.css

j-mes · 2026-01-09T16:09:45Z

components/o3-form/stories/checkbox-group.stories.tsx

-		Story => (
-			<div data-o3-brand="core">
+		(Story, {args, globals}) => (
+			<div data-o3-brand={globals.selectedBrand || 'whitelabel'}>


I like this change very much

j-mes · 2026-01-09T16:10:23Z

components/o3-form/stories/checkbox.stories.tsx

-		Story => (
-			<div data-o3-brand="core">
+		(Story, {args, globals}) => (
+			<div data-o3-brand={globals.selectedBrand || 'whitelabel'} data-o3-theme={globals.selectedTheme || 'standard'}>


is standard defined as core by default?

is standard defined as core by default?

Nope, standard is a theme here. core is a brand.

j-mes

Just some minor comments and I'm curious about @joelcarr's approach with typography utility classes too!

frshwtr added 13 commits December 11, 2025 13:34

feat: enable o3 focus ring custom properties on :focus-within pseudo …

be51e8e

…classes

feat: introduce file input to o3-form

f2f4376

feat: position file text in center, clean css

d069123

chore: align file input to designs

c222b33

docs: enable theme selection on Forms stories

d97f682

feat: introduce file input

d8f54ad

fix: ensure file input is focusable with keyboard

cbec2d4

fix: remove delete button when reset, set text to match designs

a549e37

feat: introduce upload feedback

265d155

feat: introduce upload spinner

7c0d50b

chore: match react TSX template to HTML/Javascript code.

1272108

docs: introduce readme for file input

94ace51

Merge branch 'main' into or-1730-introduce-file-input-o3-form

1bac6eb

frshwtr marked this pull request as ready for review December 18, 2025 14:32

frshwtr requested a review from a team as a code owner December 18, 2025 14:32

joelcarr requested a review from Copilot December 18, 2025 16:31

Copilot AI reviewed Dec 18, 2025

View reviewed changes

frshwtr and others added 3 commits December 23, 2025 10:42

chore: use initial values in useState

7f98f97

Co-authored-by: Copilot <[email protected]>

chore: fix typescript errors

b6c482a

chore: fix pr feedback

78432a4

joelcarr requested a review from Copilot December 23, 2025 13:38

Copilot AI reviewed Dec 23, 2025

View reviewed changes

frshwtr added 5 commits December 23, 2025 14:33

chore: fix pr feedback

e5654ed

chore: remove o3-form class from file input content

0e6a209

File upload content should not flex via column, so we should remove the o3-form class

fix: prevent double clicks, ensure file name labels upadate

a6b727d

fix: use correct css class on upload element

7e15c92

Merge branch 'main' into or-1730-introduce-file-input-o3-form

5a85815

joelcarr reviewed Jan 8, 2026

View reviewed changes

fix: correct usage of BEM in file-input

e01d63e

fix: use icon from o3-foundation

0971688

j-mes reviewed Jan 9, 2026

View reviewed changes

j-mes approved these changes Jan 9, 2026

View reviewed changes

Merge branch 'main' into or-1730-introduce-file-input-o3-form

e05aa2e

frshwtr enabled auto-merge (rebase) January 12, 2026 14:25

frshwtr disabled auto-merge January 12, 2026 14:25

frshwtr enabled auto-merge (squash) January 12, 2026 14:25

frshwtr merged commit 8329fdc into main Jan 12, 2026
12 checks passed

frshwtr deleted the or-1730-introduce-file-input-o3-form branch January 12, 2026 14:26

or-1730: introduce file input o3 form #2313

or-1730: introduce file input o3 form #2313

Uh oh!

Conversation

frshwtr commented Dec 11, 2025

Describe your changes

Additional context

Checklist before requesting a review

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

frshwtr commented Dec 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

joelcarr left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

joelcarr Jan 8, 2026

Choose a reason for hiding this comment

Uh oh!

joelcarr Jan 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

j-mes Jan 9, 2026

Choose a reason for hiding this comment

Uh oh!

j-mes Jan 9, 2026

Choose a reason for hiding this comment

Uh oh!

frshwtr Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

j-mes left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

frshwtr commented Dec 23, 2025 •

edited

Loading

joelcarr left a comment •

edited

Loading

joelcarr Jan 8, 2026 •

edited

Loading