2.0.1 SDS React Component Is Here!!!!

These notes are taking as reference the last stable version 1.51.4 to list the new changes and required refactors.

⚠️ NEWS

1.🔴Checkbox Component styles corrected: Previously, because of the internal structure of the Checkbox component, there were some styles' problems at the moment of centering the indeterminate icon inside the input checkbox itself. So to solve that, the Checkbox structure was refactored together its styles to offer a more consistent experience.

2. New CheckboxRaw and RadioRaw components: This integration of new components was done to facilitate developers experience at the moment of creating custom components and needing to use only the checkbox or radio inputs. Internally, what it does is removing the div container that surrounds the standard sds Checkbox and Radio components, and leaving expose the input itself, so developers can use it as reference at the moment of creating styles like the following.

.sds_CheckboxRaw_Input:checked + .box {
	background: var(--sds_theme_color_primary_tint_1);
	border: 1px solid var(--sds_theme_color_primary);
}

3. 🟠 AppMenu now is called AppNavbar: To have a better coherence between the Design Kits and the components naming convention, the AppMenu commland components was renamed, besides getting some new CSS styles improvements.

4. Optimized code: For sds-react-components internal usage, there were created two new custom hooks: useUpdate and useMenu. These new hooks have allowed to refactor most of the components on sds, having a less code, cleaner structure and a more optimized and controlled interactions with internal states.

5. React Portals: This is a React feature that allows us to separate from the main react root div certain elements to create a floating effect easily and without any z-index style limitation. Some components that have been benefited from this feature are: MiniWizard, Alert, Modal and Tooltip components.

React portals was removed in version 2.0.2 because it was generating an undesirebled global re-renders at interacting with certain components.

6. 🟠 Removing Extra Props: Because we're using a compound components patter to create most of the sds React components, there is the need in some scenarios to identify correctly the component that's been inserted inside a parent component to locate correctly the information. Previously, to identify correctly these components it was used some extra props in certain component, but thanks to Guillermo this practice is no longer needed, so all these extra props have been removed from the following components: MiniWizard, Wizard, WizardStepActions, WizardStepContent, WizardStepReview, AppPage, AppPageActions, AppPageContent and AppPageNav

7. DualList Component: New component joins the battle. Look for the example here.

8. 🟠 Menu Component Improvements: Now the Menu components has two new features: checkSelectedItems and removeSelectedItem. You can check them on here on storybook.

9. 🟠 Dropdown Component Improvements: beside having a complete internal restructure, Dropdowns now also have a new prop called showVisual, that's going to allow to display on the dropdown input box the Avatar or Icon elements next to the selection, giving a more complete visual feedback. This is an optional feature that has to be consulted with Josh before implementing it on mockups. Also, checkSelectedItems and removeSelectedItem features now available (Just like in the Menu component)

10. Avatar Component Refactored: There were some problems at the moment of re-rendering children elements in real-time, but that is now completely solved.

11. New Release Workflow: To keep a better order at the moment of adding new features and patches, SDS is going to be delivering monthly official releases with all the new features and changes. Anyway the last minute support for a specific component or bugs, is always going to be available, but this patches only are going to be displayed if they are considered small and don't affect others components. If that's not the case, these new features/refactors are going to be released by the end of the month or for the next Sprint.

🟠 Means that it might require a small refactor, renaming the component props or just removing them.

🔴 Means that there have been some css styles changes that could generate conflicts with older versions of sds-react-components