Skip to content

Contember Interface 1.2

Choose a tag to compare

View all tags
@matej21 matej21 released this 07 Sep 13:10
· 625 commits to main since this release
v1.2.0
9f4616a
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Verified
Learn about vigilant mode.

Contember 1.2: Interface release notes

In this version, we're thrilled to introduce an array of enhancements and updates designed to elevate both user experiences and the development workflow. From upgraded dependencies to fresh UI features, here's an in-depth look at what's in store:

Feature highlights

  • New Scope Components: Introducing new Scope components designed for the construction of admin pages. In contrast to their page-specific counterparts, these components omit any embedded UI elements, thereby affording greater flexibility to developers

  • New LayoutKit: A suite of layout components we call as LayoutKit has been introduced for the purpose of assembling admin interfaces. This encompasses the application frame, responsive panels for both content and sidebars, as well as headers and footers.

  • Render anything anywhere with new Slot Components: Discover Slot components, an innovative feature allowing the rendering of page contents within various sections of the layout. This brings an unparalleled degree of flexibility, enabling the realization of bespoke page layouts as envisioned.

  • Directive Components for Contextual Control: In scenarios where a nested page component necessitates authoritative influence over the parent component, the newly introduced Directive components offer an inverted contextual mechanism. For instance, a page housing an extensive data grid can direct its layout, e.g. turning on full-width.

  • No specificity selectors thanks to :where(): We've replaced all specificity selectors with the :where(). This change ensures that the specificity of our CSS selectors remains low, thereby not interfering what so ever with your custom CSS. Users of Tailwind might experience some minor visual changes due its base reset styles and higher specificity.

  • Updated UI Components: Our UI components now address CSS inconsistencies across components, encompassing not only visual enhancements but also behavioral improvements. Overall the UI feels smoother, more consistent and stylish.

  • Revamped Theming Palette and Dark mode: Overhaul of the theming colors and the associated color scheme provider. Refer to the theming documentation for detailed insights.

  • Enhanced Unification of UI Providers: Notably, portals for Modals, Dialogs, Dropdowns, and Select options have been consolidated to employ the same portal root implementation.

  • Introduction of DevBar Panels: New DevBar panels present a collection of both intrinsic and user-defined panels to help you in local development. Try Cmd + J (or Ctrl + J) to reveal or hide toolbar anytime during you local development.

  • TypeScript Compatibility: Our commitment to TypeScript users continues with this update. We've fine-tuned our type definitions to align seamlessly with the latest TypeScript improvements, empowering you to write more robust and error-free code.

Dependency Updates:

  • Upgraded Vite, Typescript and Playwright: Keeping pace with the latest advancements in the ecosystem, we've upgraded to the newest versions of the tools we use. This step ensures your projects remain up-to-date with performance improvements, bug fixes, and new features.

  • Legacy Layout Deprecation: To streamline your experience, we've marked certain legacy layout components as deprecated. We encourage users to transition to the enhanced layout structure for better code maintainability and future compatibility.

Documentation Enhancements

  • Expanded API Documentation: Navigating the updated features is made easy with our expanded API documentation and in-code comments should be more helpful when building admin interfaces.

UI and Styling

  • Button Styles Enhancement: Adjusted the CSS rules for button elements to achieve consistent border radii and background colors. Have you tried new Click already?
  • Box, FieldContainer, Dropdowns and Menu Refinements: Refined the appearance and behavior of Box, FieldContainer, Buttons, and Menu components. Improved the consistency of these components across the interface.
  • Color Palette Refinement: Revised the color palette, we've set most of the colors to be RGB values to be combined with any opacity. We have added the accent color and tuned to colors to better reflect our new identity.
  • CSS Implementation: We have replaced all SASS with CSS, replace most of the hard-coded colors with custom properties for increased theming coverage and easier maintenance. Also we have now a more concise and consistent CSS naming conventions for custom CSS properties. Also, packages with CSS now export index.css instead of styles.css (still supported for backward compatibility) to align with the index.ts exports convention.
  • Icon Library Integration: We are moving from Blueprint icons towards Lucide icon library. Added appropriate classes to icons for consistent usage and styling across the UI that are Contember specific (you can opt-out of this by passing overridesLucideIcons={false} to the StyleProvider).
  • [data-] Attributes for component state styling: Introduced styling of components based on their state using [data-] attributes that is more deterministic and less error-prone than using various view-* classes. This is e.g. used for example for styling of Stack.gap property.
  • Legacy Layout Cleanup: Kept the legacy layout styles and classes for backward compatibility, but marked them as deprecated. We encourage users to transition to the new layout structure and to use Slots and Directives for better code maintainability and richer functionality.
  • Rolling out more flexible className props: Some components now accept className prop now accept string or nested arrays of strings. (Don't forget to memoize the arrays you pass onto the className prop to avoid unnecessary re-renders.)
  • theme-color in the : Added the theme-color meta tag to the to allow browsers to use the theme color for the address bar, etc.
  • Enhanced Counter Styling in Repeater: The item counter within the repeater is now enclosed in a distinct element, making it easier to target and style via CSS.

Binding and Framework Updates

  • Routing Simplification: The redirectOnSuccess and similar routing-related callbacks now support returning a simple string request, in addition to the previous object format.
  • Root Entity Deletion: The binding now provides the capability to delete a root entity directly.
  • Improved Error Messaging for Accessor Traversal: In cases of parameter mismatches, the binding's error messages have been updated for greater developer clarity. Instead of vague references to "missing placeholders," it now offers detailed information about the available accessors and more.

Layout

  • LayoutKit Integration: Integrated LayoutKit components to manage layout structures. Utilized LayoutKit's standardized components to streamline the creation of consistent and responsive layouts.
  • Layout Primitives: LayoutKit builds upon Panel primitives, low level components to build responsive layouts. These components are used to build the application frame, responsive panels for both content and sidebars. They come with a minimum styles and are meant for advanced use-cases.
  • Layout State Centralization: Centralized layout state management using React context. This allowed layout components to communicate and synchronize state changes.
  • Layout Insets and Safe areas: Main layout components now support insets for safe areas. This allows to avoid content being hidden behind the browser's UI elements (e.g. address bar, etc.).
  • Modal Experience Enhancement: Enhanced modal components by refining their appearance, animations, and interactions. Incorporated CSS transitions and JavaScript logic to create a more polished user experience.
  • Standardized Color Palettes: Implemented a standardized color palette across various layout components. Utilized consistent color definitions to maintain visual cohesion throughout the application.
  • LayoutSlot Customization: Introduced LayoutSlots to customize layout components' behavior and appearance. These slots allow developers to tailor layouts based on specific requirements.

Breaking Changes

  • CSS Changes: Several CSS custom properties have been renamed or removed to improve consistency and avoid naming conflicts. Affected users should review and update their custom styles accordingly.
  • Remove react-textarea-autosize package: The react-textarea-autosize package has been re-implemented via useAutoHeightTextArea() hook, which might affect components or code that rely on this package for textarea auto-sizing behavior.
  • Move general-use hooks to react-utils: Some hooks that were previously located in the layout package (introduced in pre-release) have been moved to the react-utils package. This could affect how hooks are imported and used in your code.
  • Update theme palettes to current brand colors: The update of theme palettes might affect the visual appearance of components using these themes. It's possible that colors and styling could change.
  • Deprecate seamless box distinction: The deprecation of seamless box distinction might impact how certain components or styling implementations handle seamless boxes. In most use-cases, this change should not affect the visual appearance of components. However, it's recommended to review and update any custom styling that relies on seamless boxes.
  • Subletting CMS Layout package: The CMS Layout package has been created for this release and was later abstracted into the LayoutKit package. The CMS Layout package has been deprecated and will be removed in a future release. Affected users should transition to the LayoutKit package.
  • Deprecate unused isMeta in SectionTabs: The deprecation of isMeta in SectionTabs might require you to update your code to use alternative approaches.
  • Move StyleProvider outside of Layout: The move of StyleProvider outside of Layout could impact how styles are applied to layout components.

Miscellaneous

  • TypeScript Type Fixes: Resolved TypeScript type discrepancies across the admin codebase. Corrected incorrect type annotations, ensuring accurate type checking and improved code robustness.

  • Documentation Enhancement: Conducted thorough documentation updates to provide comprehensive explanations for APIs, components, and utility functions. Expanded usage examples for improved developer guidance.

  • TypeScript Documentation Improvement: Revised TypeScript documentation to include detailed type annotations and explanations. Updated TypeScript definitions to accurately reflect usage patterns.

  • Accessibility Improvements: Conducted accessibility audits and implemented changes to ensure compliance with accessibility standards. This included improving some keyboard navigation and focus management.

  • Deprecated Code Implementation: Introduced the deprecate() utility function to mark deprecated code. Enhanced developer awareness of deprecated code by emitting console warnings upon usage.

  • Improved assertions, error handling and type checking throughout the codebase.

  • Cleaned up unused code and removed some of the deprecated functionality.

  • Updated various scripts and configuration files.

Note: For a full understanding of these changes, it's recommended to refer to the Documentation. We encourage you to dive into the updated documentation and explore code examples. To make the most of these advancements, make sure to follow the migration guide to ensure a smooth transition. Although we've taken great care to ensure backward compatibility, we could not avoid some breaking changes in order to fix and improve the product overall.

Assets 2
Loading