What's new

Find out what's happening in the world of Sanoma Learning's Design System.

New Components, Bug fixes, and enhancements

September 2024

Update in Figma

To simplify things, we’ve created a new Formfield component that includes a label, description, validation message, and a slot for the form control itself. This makes it easier for the Design System team to manage everything, while you only need to use one component for all your form controls!

  • Older Components: The old form controls (Label, Hint/Helper, Checkbox, Radio Button, Switch, Text Input, Text Area) are now marked as "[DEPRECATED]" and hidden from the library. These should no longer be used in new designs.
  • New Components: We’ve introduced new versions of these form controls with improved functionality, labeled with "-NEW" at the end for easy identification.
  • Formfield Component: We’ve added a new Formfield component that wraps the updated controls for more consistency. This should now be your go-to component for forms. You can find these updates in the Formfield folder in the assets panel.

New components and status changes

Solved Bug reports

Enhancements

New Components and Key Bugfixes Rolled Out, Including Tool-Bar, Checkbox Group, and Enhanced Styling

July 2024

New components and status changes

Bug fixes

Enhancements

Enhancements and Insights: New Components, Bug Fixes, Styling, and Workshops

June 2024

New components

Bug fixes in several components

Styling updates in

Data Grid Workshop

We recently conducted a workshop with all UX designers across our products to define the requirements for our data grid. It marked our first large-scale collaboration on a common component, which was a great experience. Together, we identified the core functionalities of our data grid. Currently, the SL Design System team is in the process of planning the design and development of these features.

Combobox survey

We sent out a survey to gather input from all UX Designers to define the core functionalities of our combobox. The SL Design System is currently developing the basic design and will incorporate additional features based on any essential requirements identified by the CFAs for our combobox component.

Version 1.0 Milestone, Developer-Focused Enhancements, and Issue Tracking

May 2024

Introducing 1.0 Versions of SLDS Components

The SLDS team is excited to share that our components, including Angular, Button, Card, Checkbox, Dialog, Form, Icon, Popover, RadioGroup, Skeleton, Spinner, Switch, TextArea, TextField, and Tooltip, have all reached their 1.0 versions. With this release, we’re officially adopting semantic versioning, aligning with the major.minor.patch versioning scheme to ensure consistency and predictability in our updates.

GitHub Issue Templates

We’ve updated our GitHub with new issue templates to streamline the process of reporting bugs, requesting features, and suggesting new components. You can find these templates at our GitHub issues page. This update allows you to create issues for:

  • Bug Reports
  • Documentation
  • Figma Toolkit
  • Feature Requests
  • New Components

Previously, you could only report bugs, but now you can also request new components. We’ve created issue templates for the Figma toolkit and documentation, empowering you to submit and monitor directly through GitHub.

Please note, Figma comments will no longer be monitored due to tracking difficulties. For all matters, including those related to the Figma toolkit, kindly submit an issue on GitHub.

Important: Ensure you’re logged into your GitHub account to create issues.

Developer Resources

Developers can now find all necessary information about a component on its detail page on our documentation website, sanomalearning.design. This includes the component’s status, exact version, and links to the changelog, code, and storybook. The statuses indicate the maturity of the component:

  • Draft: Active development, not ready for use.
  • Preview: Ready for use, available in all themes, but not yet used by CFAs.
  • Stable: Mature and used by CFAs.
  • Deprecated: This will be removed in the future and should be avoided.

Form Enhancements for Better User Experience

Our forms have been significantly improved to support composite fields, allowing for a main control linked to the field’s label and help text, with secondary controls for more complex inputs. This update is particularly useful for fields like radio groups with an “other” option that triggers a text field.

We’ve also introduced:

  • A new Lit FormController reactive controller for managing form state
  • A new pristine/dirty and touched/untouched state
  • A new <sl-form-validation-errors> component for displaying validation errors
  • The ability to set the value of the form on the <sl-form> component
  • The ability to use nested & array names in the name attribute of form controls
  • Unregistering controls & fields when they are removed from the DOM

Naming Consistency and Styling Updates

  • The <sl-textarea> component has been renamed to <sl-text-area> for naming consistency.
  • The <sl-inline-message> component has been updated with improved styling and now includes an action slot for buttons.

Introducing the ‘Info’ Button Variant

A new info button variant has been added, designed to fit into the action slot of the sl-inline-message component, providing users with additional actionable information.

Commitment to Accessibility and Browser Compatibility

In our ongoing commitment to accessibility, the checkbox component has been refactored to use a native checkbox input. We’ve also fixed the issue with Accordion icons in Safari when zooming, ensuring a consistent experience across different browsers.

The Checkbox documentation is now live!

08-11-2023

Dive into the details on when and how to effectively use checkboxes, and discover accessible implementation techniques. Explore the guide to ensure seamless integration and a good user experience.

We released a pilot version of our first component!

10-10-2023

The button component is released as your first taste of the SL Design System to come. You can check out the documentation page and even start implementing a button or two in a test project to see how everything works.