Bad news, it’s breaking change (9.3.0 to 10.0.0). Very bad news, the changes are quite big. So you have to know that it won’t take just a few hours to update your app.
Table is replaced by DynamicTable. Great new features. But the structure is totally different: no more Head, Cell and Row. Instead, you need to prepare your data in variables. So the changes can be huge and take lots of work. I don’t understand why Atlassian didn’t keep the old Table to have the choice between the new DynamicTable and the old Table. Apparently you can’t have a <> or a <Block> (React error) in a cell, but a <Box> is okay. https://developer.atlassian.com/platform/forge/ui-kit/components/dynamic-table/
TextField is replaced by Textfield, and a distinct Label component must be used. And you need a Box component if you want the Label to be above the Textfield.
onChange behaviour has changed. For example onChange={(value) => console.log(value)} would be now onChange={(e) => console.log(e.target.value)} https://developer.atlassian.com/platform/forge/ui-kit/components/textfield/
RadioGroup: onChange behaviour is like Textfield (passes a change event) but unlike Select (passes the new value). It’s a pity there’s no consistency, especially since Radio and Select are just 2 different ways of displaying choices. Option components replaced by options prop. Label prop replaced by Label component. https://developer.atlassian.com/platform/forge/ui-kit/components/radio-group/
Toggle: Label is now in a component that must be placed after Toggle. Beware that the label will be in bold and small, like a Textfield label (quite unusual and maybe a bug). Add size=“large” if you want to keep the same size than previously. https://developer.atlassian.com/platform/forge/ui-kit/components/toggle/
In such situations, I think that Atlassian should provide a list of the breaking changes instead of just giving a link to the new documentation. The only way to find what changed is to test the whole app and guess what went wrong, because most of the time the error messages are not clear.
I will try to update this post if I find other annoying changes.
Thanks for the feedback @BertrandDrouhard1 ! Great to hear you jumping on the update so soon.
A list of breaking changes is something that we missed and will look to get one out very soon.
Our Heading and Text behaviour shouldn’t have changed and will only display inline together if used within an Inline component. Do you have a code snippet that displays this behaviour?
@AtlassianStaff Is it really like Bertrand says? I have a Confluence App with macro-config and use textfield a.s.o => Will I have a breaking change in runtime soon?
What I mean: When I do not upgrade to forge/react:10, will my app then stop working in the future?
=> Ok it is about UI Kit 2 => So MacroConfig is fine, since it is UI Kit 1
=> But same question: When my app is running with UI KIT 2 v9.x and does NOT update to 10 => Will it break during runtime at some point?
Hi @AdamMoore,
Thanks for the info. But this does not fully answer my question. If my App stays on v9 and does not redeploy for 1 year (hypothetically) => Will it then stop working when you stop supporting v9?
I just want to understand how this works in the forge world. Because in the Data Center world this is more clear by exact version-ranges an App can support and it will then always work inside these ranges.
Hi @BertrandDrouhard1 , the TabPanel component comes with styling that’s introducing that inline behaviour. We encourage the usage of a Box component to remove this styling and add your own padding size.
Hi @clouless , to answer your question, in the scenario that we do deprecate version 9, your app will need to be updated to a supported version for it to continue working.
It could be interesting to have also in this page the difference on “onChange” behaviour, especially because there’s no consistency between elements: RadioGroup: onChange behaviour is like Textfield (passes a change event) but unlike Select (passes the new value).
My dudes, this is way too many breaking changes. It’s at version 10 and you’re renaming/removing props. Why were those basic things not solidified many versions ago?
Most of these changes seem to be nothing more than opinionated aesthetics. disabled to isDisabled. grey-light to greyLight. ButtonSet to ButtonGroup. defaultChecked to isChecked.
TextField to Textfield…
Almost all of the changes are frivolous. It’d be funny if it didn’t waste developer time.
Reminds me of when ACE changed the ngrokToken key naming in the space of 24 hours.
We haven’t gone GA with UI Kit 2 yet. We are currently updating it to align with ADS (Atlassian Design System). Once we go GA, you will be protected from prop and component changes for 6 months as per our deprecation guidelines. Sorry for the inconvenience.
Thanks for sharing your thoughts on the new UI Kit 2 components, I see you’ve found the new guide we released last Friday - Upgrade to @forge/react major version 10 describes how components have changed between React 9 and React 10.
I’ll pass on the feedback regarding the onChange behaviour to the content team.
Hi @JemmaSwaak ,
Once you explain your strategy and we can understand your vision, especially the link with ADS, it’s much easier to accept the changes and their cost
But the cost was very high for me: 10 days to go from UI Kit to UI Kit 2, and 5 days from @forge/react version 9 to version 10. Much more than the time it took me to develop the initial version.
I agree @nathanwaters , sometimes it’s better to wait a bit and publish something more stable than rushing to new features that are still unstable. Or just call it beta version and we know that it’s not ready yet but that we can give it a try if we want to anticipate the future.
Anyway, thanks to the Atlassian Forge team for their work , it’s still great to see a product becoming better each and every day.