feat: carbon design system theme #3883

YuJianghao · 2023-09-29T11:18:18Z

Reasons for making this change

Add Carbon Design System theme. Also see #3857.

I use this Theme too. So, I'm here and try to make a PR for that.

If your PR is non-trivial and you'd like to schedule a synchronous review, please add it to the weekly meeting agenda: https://docs.google.com/document/d/12PjTvv21k6LIky6bNQVnsplMLLnmEuypTLQF8a-8Wss/edit

Checklist

I'm updating documentation
- I've checked the rendering of the Markdown text I've added
I'm adding or updating code
- I've added and/or updated tests. I've run npm run test:update to update snapshots, if needed.
- I've updated docs if needed
- I've updated the changelog with a description of the PR
I'm adding a new feature
- I've updated the playground with an example use of the feature

Additional Information

I build a site to preview the theme: rjsf playground with carbon

Dev TODOs

heath-freenome · 2023-10-06T22:01:44Z

packages/carbon/.eslintrc

+  "plugins": ["@typescript-eslint", "jsx-a11y", "react", "import", "@emotion"],
+  "rules": { "@emotion/jsx-import": "error" }


I'm guessing that carbon uses emotion?

Carbon doesn't use emotion, I copy most settings from @rjsf/chakra-ui. Going to remove code about emotion.

heath-freenome · 2023-10-06T22:07:53Z

packages/carbon/src/FieldErrorTemplate/FieldErrorTemplate.tsx

+  F extends FormContextType = any
+>(props: FieldErrorProps<T, S, F>) {
+  const { errors = [], idSchema } = props;
+  console.log('FieldErrorTemplate errors', errors);


This probably wants to be removed

heath-freenome · 2023-10-06T22:08:31Z

packages/carbon/src/AddButton/AddButton.tsx

+import { Button } from '@carbon/react';
+import { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils';
+
+export default function AddButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({


Can you add Documentation similar to what is in other themes?

heath-freenome · 2023-10-06T22:08:36Z

packages/carbon/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx

+import { useMemo } from 'react';
+import { ArrayFieldTemplateItemType, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
+export default function ArrayFieldItemTemplate<


Can you add Documentation similar to what is in other themes?

packages/carbon/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx

packages/carbon/src/Widgets/Widgets.ts

heath-freenome · 2023-10-06T22:12:40Z

packages/carbon/src/components/ConditionLabel.tsx

+import { ReactNode } from 'react';
+import { CarbonOptionsContextType, useCarbonOptions } from '../contexts';
+
+function getMark(required: boolean, labelMark: CarbonOptionsContextType['labelMark']) {


Can you add Documentation?

heath-freenome · 2023-10-06T22:12:51Z

packages/carbon/src/components/Layer.tsx

+import { ReactNode } from 'react';
+import { NestDepth, useNestDepth } from '../contexts';
+
+export function Layer({ children }: { children: ReactNode }) {


Can you add Documentation?

heath-freenome · 2023-10-06T22:13:26Z

packages/playground/src/components/Header.tsx

@@ -248,6 +248,28 @@ export default function Header({
  return (
    <div className='page-header'>
      <h1>react-jsonschema-form</h1>
+      {/* TODO remove this before merge */}


Yes please!

heath-freenome · 2023-10-06T22:13:43Z

packages/playground/src/components/Playground.tsx

@@ -23,7 +23,7 @@ export default function Playground({ themes, validators }: PlaygroundProps) {
  const [formData, setFormData] = useState<any>(samples.Simple.formData);
  const [extraErrors, setExtraErrors] = useState<ErrorSchema | undefined>();
  const [shareURL, setShareURL] = useState<string | null>(null);
-  const [theme, setTheme] = useState<string>('default');
+  const [theme, setTheme] = useState<string>('carbon');


Why make this change?

For dev convenience. I'll add a TODO and remove before merge.

YuJianghao · 2023-10-09T11:23:02Z

Maybe we need OneOfFieldTemplate and AnyOfFieldTemplate, it's better than override a MultiSchemaField in custom theme. Also a SchemaFieldTemplate.

nickgros · 2023-10-20T19:23:06Z

packages/carbon/README.md

+### Installation
+
+```bash
+yarn add @carbon/react


Probably need to add

Suggested change

yarn add @carbon/react

yarn add @carbon/react @carbon/styles

nickgros · 2023-10-20T19:24:18Z

packages/carbon/README.md

+## Usage
+
+```js
+import Form from '@rjsf/carbon';


However you decide to make custom styles work, you might need something like this

import Form from '@rjsf/carbon'; import '@rjsf/carbon/styles.css'

heath-freenome · 2024-04-05T19:38:26Z

@YuJianghao How goes the work on this theme? You seemed to have stalled out. Do you need anything from us?

This reverts commit 8144e24.

heath-freenome · 2025-04-17T22:55:01Z

@YuJianghao FYI, we are preparing a v6 beta so you theme will need to migrate to that branch

heath-freenome · 2025-04-30T22:31:50Z

@YuJianghao are you planning on finishing this theme? Or shall we just close the PR?

YuJianghao · 2025-05-03T05:49:39Z

Hi, thanks for checking in. I’ve taken a long break from this and, to be honest, I don’t currently have plans to pick it up again. I'll close the PR. Appreciate your patience!

…

________________________________ 发件人: Heath C ***@***.***> 发送时间: 星期四, 五月 1, 2025 06:32 收件人: rjsf-team/react-jsonschema-form ***@***.***> 抄送: winwin2011 ***@***.***>; Mention ***@***.***> 主题: Re: [rjsf-team/react-jsonschema-form] feat: carbon design system theme (PR #3883) [https://avatars.githubusercontent.com/u/51679588?s=20&v=4]heath-freenome left a comment (rjsf-team/react-jsonschema-form#3883)<#3883 (comment)> @YuJianghao<https://github.com/YuJianghao> are you planning on finishing this theme? Or shall we just close the PR? ― Reply to this email directly, view it on GitHub<#3883 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AED552TZSJCGZME3Z6ETNUD24FFO3AVCNFSM6AAAAAA5MKDKCWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDQNBTGUYTQOBTHE>. You are receiving this because you were mentioned.

heath-freenome reviewed Oct 6, 2023

View reviewed changes

YuJianghao force-pushed the carbon branch from ea5693f to ace64e2 Compare October 7, 2023 06:56

nickgros reviewed Oct 20, 2023

View reviewed changes

YuJianghao mentioned this pull request Oct 24, 2023

Template support for MultiSchemaField(OneOfField/AnyOfField) #3918

Open

1 task

burnettk mentioned this pull request Dec 11, 2023

extract react json schema form carbon theme sartography/spiff-arena#803

Closed

YuJianghao added 22 commits June 7, 2024 16:24

feat: basic carbon theme setup

70759b5

feat: button templates

2742a54

feat: base input template, field template

3e186a6

feat: object field template

8d2e817

feat: textarea widget

d463caa

feat: description and errors

54e866d

chore: add some dev settings

fc7d312

chore: dev config

29e8070

feat: title field

775cca9

feat: array

31a88dd

fix: style in empty object or array field

daf8d06

feat: checkbox

4e6f80b

chore: add some dev settings

fe02063

chore: remove unused emotion settings

87c8b44

chore: add docs and fix some pr review issues

203f437

chore: update jsdoc for carbon theme

9b0dd69

chore: add classNames

2edd67a

feat: radio widget

f6281c6

feat: better error

96810c1

chore: polish add button

d302997

fix: forwardRef InternalFormWrapper

022cb5d

chore: only show label in field template

3701e9d

YuJianghao added 15 commits June 7, 2024 16:26

chore: update @carbon/react version

ced3e88

chore: playground theme support form context

49e7a55

feat: select widget

1d9e5ed

Revert "chore: update @carbon/react version"

6dc8d8a

This reverts commit 8144e24.

chore: add some details

906cdc5

fix: legend id conflict with input id

b584f1b

feat: range widget and updown eidget

06cc1f9

feat: WrapIfAdditionalTemplate and some renames

18cd9e7

feat: multi schema field

c239ff5

feat: carbon options

8606157

fix: checkbox style

011ce2c

feat: padding

66d3450

chore: more styles

9c89616

chore: demo build status

8ecad07

chore: little polish and continue work on pr

a563d8c

YuJianghao force-pushed the carbon branch from 1806549 to a563d8c Compare June 7, 2024 09:08

YuJianghao added 2 commits June 7, 2024 18:22

chore: fix build

0f87030

chore: fix build

f29b90b

YuJianghao closed this May 3, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: carbon design system theme #3883

feat: carbon design system theme #3883

YuJianghao commented Sep 29, 2023 •

edited

Loading

heath-freenome Oct 6, 2023

YuJianghao Oct 7, 2023

heath-freenome Oct 6, 2023

heath-freenome Oct 6, 2023

heath-freenome Oct 6, 2023

heath-freenome Oct 6, 2023

heath-freenome Oct 6, 2023

heath-freenome Oct 6, 2023

heath-freenome Oct 6, 2023

YuJianghao Oct 7, 2023 •

edited

Loading

YuJianghao commented Oct 9, 2023 •

edited

Loading

nickgros Oct 20, 2023

nickgros Oct 20, 2023 •

edited

Loading

heath-freenome commented Apr 5, 2024

heath-freenome commented Apr 17, 2025

heath-freenome commented Apr 30, 2025

YuJianghao commented May 3, 2025 via email

		"plugins": ["@typescript-eslint", "jsx-a11y", "react", "import", "@emotion"],
		"rules": { "@emotion/jsx-import": "error" }

feat: carbon design system theme #3883

feat: carbon design system theme #3883

Conversation

YuJianghao commented Sep 29, 2023 • edited Loading

Reasons for making this change

Checklist

Additional Information

Dev TODOs

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

YuJianghao Oct 7, 2023 • edited Loading

Choose a reason for hiding this comment

YuJianghao commented Oct 9, 2023 • edited Loading

Choose a reason for hiding this comment

nickgros Oct 20, 2023 • edited Loading

Choose a reason for hiding this comment

heath-freenome commented Apr 5, 2024

heath-freenome commented Apr 17, 2025

heath-freenome commented Apr 30, 2025

YuJianghao commented May 3, 2025 via email

YuJianghao commented Sep 29, 2023 •

edited

Loading

YuJianghao Oct 7, 2023 •

edited

Loading

YuJianghao commented Oct 9, 2023 •

edited

Loading

nickgros Oct 20, 2023 •

edited

Loading