feat(doc): remove 17 to 18 docs & add migration to 19 #812
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var-poro
requested changes
Jun 18, 2025
| So there won't be any new features for this version. | ||
|
|
||
| If you still need to access the documentation about Web Components or Vue, use the top-left version selector to move to | ||
| the latest v18+ documentation where you'll find the latest up-to-date information. |
There was a problem hiding this comment.
"Starting from v19, ODS has moved to fully React-based components.
Web Components and the Vue wrapper are now only available in v18.x, which is now in maintenance mode, so there won't be any new features for this version.
If you still need to access documentation about Web Components or Vue, use the version selector at the top left to switch to the latest 18.x documentation, where you'll find the most up-to-date information."
| Version 19 of ODS is not the direct follow-up of previous versions, it is a new library built 100% on top of <ExternalLink href="https://react.dev">React</ExternalLink>. | ||
|
|
||
| Previous versions were providing a React version of each components too, but there were in fact a wrapping of the Web Component. | ||
| Thus it was designed with the constraint related to Web Component (no virtual DOM, relying on DOM selector, ...). |
| Thus it was designed with the constraint related to Web Component (no virtual DOM, relying on DOM selector, ...). | ||
|
|
||
| With this new version we got rid of those constraints, which gave us some benefits like: | ||
| - components composition |
| - easier style customization | ||
| - easier React integration (no more `ref` needed, nor literal templates) | ||
|
|
||
| We've also alleviate a lot of previous component restriction, as most of them now accept React nodes instead of fixed property. |
|
|
||
| Moving out of Web Component also means getting rid of the Shadow DOM. | ||
| This means you now have direct access to the component DOM and it's easier to add you own style. | ||
| Though this also means it is easier to break the component rendering, and some custom selector may break from version to version |
|
|
||
| Regarding components, we tried to stay as close as possible to their previous interface while keeping them easy to integrate. | ||
| Though, the way you'll integrate them in your React app should be rethink, to ensure you use them as a real React component | ||
| and not a wrapped Web Component anymore. |
| * <StorybookLink kind={ REACT_COMPONENTS_TITLE.tooltip } story={ STORY.migrationFrom17 }>tooltip</StorybookLink> | ||
| A complete list of changes and a guide about how to migrate is available per component in the v18 documentation. | ||
|
|
||
| Use the top-left version selector to move to the latest v18+ documentation where you'll find the latest up-to-date information. |
There was a problem hiding this comment.
v18.x instead of 18+ everywhere, 18+ seem to include 19
|
|
||
| { 'If you want to specifically target underneath elements, you can rely on some' } <ExternalLink href="https://developer.mozilla.org/en-US/docs/Web/HTML/How_to/Use_data_attributes#css_access">data attribute</ExternalLink>, { 'we\'ll update the documentation about those soon.'} | ||
| </Message> | ||
|
|
||
| <Heading label="Reuse existing ODS style" level={ 2 } /> | ||
|
|
||
| In some case where you cannot use an ODS component, you may want one of your own component to look like an ODS component |
There was a problem hiding this comment.
In some cases where you cannot use an ODS component, you may want one of your own components to look like an ODS component.
| <Message | ||
| color={ MESSAGE_COLOR.warning } | ||
| dismissible={ false }> | ||
| { 'As there is no shadow DOM anymore, all the component DOM can be targeted through CSS selectors. '} |
| { 'As there is no shadow DOM anymore, all the component DOM can be targeted through CSS selectors. '} | ||
| { 'It is advised to not rely on cascading selector, as the DOM structure may evolve from one version to another. '} | ||
| <br /><br /> | ||
| { 'To ensure reliable CSS, use specific className on the component you want to customize. '} |
var-poro
approved these changes
Jun 18, 2025
astagnol
approved these changes
Jun 19, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.