- being Message an object with the following properties:
-
+ being Message an object with the following properties:
+
onClose event of
- the message, otherwise the overlaid modal will remain visible.
+ modal: The alert will be displayed in the middle of the screen with an overlay layer
+ behind. In this mode, the user has the responsibility of hiding the alert with the{" "}
+ onClose event of the message, otherwise the overlaid modal will remain visible.
GridColumn object has the following properties:
optional prop.
+ value: Value of the option. It should be unique and not an empty string, which is
+ reserved to the optional item added by the optional prop.
optional prop.
+ value: Value of the option. It should be unique and not an empty string, which is
+ reserved to the empty option added by optional prop.
Option instances.
+ options: List of Option instances.
@@ -76,7 +85,12 @@ const sections = [
@@ -126,7 +155,12 @@ const sections = [
useToast hook can be triggered.
diff --git a/apps/website/screens/components/wizard/code/WizardCodePage.tsx b/apps/website/screens/components/wizard/code/WizardCodePage.tsx
index 0410a95c8..36620704a 100644
--- a/apps/website/screens/components/wizard/code/WizardCodePage.tsx
+++ b/apps/website/screens/components/wizard/code/WizardCodePage.tsx
@@ -98,23 +98,23 @@ const sections = [
An array of objects representing the steps. Each of them has the following properties:
16.0.0 introduces major breaking changes, including redesigned components, API updates, and
+ the removal of deprecated elements. This guide details the main differences and how to migrate components from{" "}
+ 15.x.x to 16.0.0.
+ ApplicationLayout component and its compound components have been redesigned. The new API
+ focuses on improved flexibility, better responsiveness, and easier customization. The header{" "}
+ prop is no longer required, however it is highly encouraged to have either a Sidenav or a{" "}
+ Header in your application. The following sections will explain the changes in more depth.
+ Header component has been redesigned. The new API provides a simpler and more
+ flexible approach:
+ underlined,content, and{" "}
+ responsiveContent. Dropdowns were rendered using DxcHeader.Dropdown.
+ logo and appTitle for the branding,{" "}
+ navItems for navigation links (with optional nested groups),{" "}
+ sideContent for side elements, and responsiveBottomContent for
+ mobile-specific content.
+ content and dropdowns into the new logo,{" "}
+ appTitle and navItems props. Replace responsiveContent with{" "}
+ responsiveBottomContent and sideContent based on the desired positioning.{" "}
+ sideContent can receive a flag parameter that depends on responsiveness.
+ Sidenav component has also changed from a compound component structure to a
+ declarative navItems prop. This new API also features changes that improve the
+ responsiveness and flexibility of the component.
+ DxcSidenav.Section,DxcSidenav.Group, and DxcSidenav.Link{" "}
+ defined the structure and links.
+
+ The navItems prop accepts an array of Item and
+ GroupItem objects. Each GroupItem has the following structure:
+
+ Each Item has the following structure:
+
Title, Section, Group, and
+ Link structure into a single items array following the new typing.
+ logo and appTitle props.
+ topContent and bottomContent as needed for further interaction
+ and handle the expanded state for responsive layouts with defaultExpanded for
+ uncontrolled behavior or expanded and onExpandedChange for controlled
+ behavior
+ Footer component no longer accepts children. It now provides two different props,{" "}
+ leftContent and rightContent, for placing custom elements in their respective
+ areas. In reduced mode, the footer will no longer display custom content on the right side,
+ instead it will display the copyright statement. A new logo prop has also been added to be
+ able to support custom branding.
+ color prop with a semantic color approach.
+ The available values are now 'primary', 'secondary', 'tertiary',
+ 'success', 'info', 'neutral', 'warning', and
+ 'error', replacing the previous functional options ('grey', 'blue',{" "}
+ 'green', 'orange', 'red','yellow', 'purple'
+ ).
+ childrenTrigger prop), possibility to have rows expanded by default and
+ the possibility to render any page by default. To know more about these new features, please refer to the
+ updated documentation.
+ 'light' | 'normal' | 'bold' to{" "}
+ 'default' | 'regular' | 'light'. Additionally, a heading level 6 is now supported.
+ tabIndex prop has been removed. The prop was not working as we intended, so in the meantime we
+ decided to remove it. We believe that, at some point, the component will need to set this prop.
+ Tabs component no longer supports the legacy API. A more flexible approach using a Compound
+ Component Pattern is now used instead to maintain a higher consistency with our existing{" "}
+ NavTabs and make the API much simpler. Additionally, a few improvements have been made to
+ enhance responsiveness and controlled behavior. Please refer to the
+
+ ToggleGroup component API has been updated, including the possibility to have a custom
+ orientation (horizontal or vertical) and a redesign of the way options are structured. Please refer to the
+
+ Badge, a Chip or StatusLight{" "}
+ based on the context.
+ Badge
+ Chip
+ StatusLight
+ 16.0.0 release, Halstack React now uses emotion as its internal
+ styling engine. Previous versions relied on styled-components. This change improves performance,
+ reduces bundle size, and aligns with the rest of the Halstack ecosystem. This page explains the required steps
+ if your application relied on styled-components specific features, theme injections, or style
+ overrides. If any topic is not covered here, please refer to the{" "}
+ styled factory from styled-components
+ @emotion/styled
+ ServerStyleSheet
+ @emotion/server (extractCritical)
+ styled-components.
+ ServerStyleSheet.
+ styled-components with @emotion/styled:
+ keyframes from styled-components with the one provided by Emotion.
+ ThemeProvider:
+ ThemeProvider without needing additional wrappers.
+ css prop natively. This prop can be used to apply styles directly to any
+ component without needing to create a styled wrapper. For more information please refer to the{" "}
+ ServerStyleSheet with Emotion's server utilities:
+ createGlobalStyle from styled-components, it must be
+ replaced with Emotion's Global component.
+ styled-components is no longer required by Halstack React. You should make sure to remove:
+ styled-components from package.json
+ babel-plugin-styled-components)
+ core and alias{" "}
+ tokens. In Halstack 15, theming relied on a JSON-based opinionatedTheme /{" "}
+ advancedTheme object passed to the application wrapper. This migration page explains how to
+ transition from the old theme object to the new CSS-token architecture.
+ advancedTheme / opinionatedTheme).
+ HalstackProvider.
+ useState hook and update it in response to user actions. When the state
+ changes, the
+ HalstackProvider receives the updated CSS variables and the UI updates instantly without
+ rerendering components manually.
+ HalstackProvider will immediately reflect the new token values.
+ opinionatedTheme and advancedTheme.
+ DxcApplication or similar wrappers.
+ DxcButton:
+ lightPalette and darkPalette objects with as many CSS variables as we
+ want and their respective values. Then we pass one of the objects based on the state of the theme{" "}
+ to the Halstack Provider, which wraps our components, through its opinionatedTheme property.
+