Released: Dec 13, 2023

23.2.3 での更新項目

機能

• Look and Feel
  • New Fluent Theme - DevExtreme v23.2 ships with a new Microsoft Fluent inspired web theme. The theme includes the following capabilities:
    • Accessible components with contrast color support.
    • Two size modes: Standard and Compact.
    • New icon package.
  • ThemeBuilder Enhancements - Introduced numerous enhancements to the DevExtreme ThemeBuilder tool. Enhancements include:
    • Integration of the new Fluent theme.
    • Advanced ThemeBuilder settings were expanded to incorporate all possible states of Button and ButtonGroup.
    • Added a new set of variables for editors.
  • Material Theme Enhancements - This release includes the following changes to Material theme:
    • To address accessibility-related issues, the disabled state for the Button component now includes a higher contrast color combination.
    • Updated the appearance of the ButtonGroup component to ensure consistency with Google's Material Design guidelines.
    • Different text editor (type) boxes are now the same height. Thanks to higher contrast color combinations, the content of label and placeholder elements are also accessible.
    • Multiple changes have been introduced within the DevExtreme Accordion component. The spin icon uses a higher contrast color combination. The component's overall style is more consistent with those outlined in Google's Material Design guidelines.
    • To avoid help text overlapping with nearby items, the validation message now uses a contrasting background.
    • Two icons were changed to make the overall icon set consistent.
    • Changed the Slider's tooltip to make it more consistent with Material guidelines.
    • The List component also better matches Material guidelines (no accent colors).
    • The Form was improved to avoid vertical item misalignment between groups.
    • The PivotFieldChooser includes full-fledged DevExtreme font icons (in previous versions, icons were SVG based).
• Scheduler
  • Work Shift Support - In v23.2, the DevExtreme Scheduler introduces an offset display option, allowing you to configure enterprise work day offsets and accommodate work shift variations, time zones, and other related usage scenarios.
• Calendar
  • Multi-Selection of Discrete Days - The new Calendar selectionMode option offers three modes: single, multiple, or range selection. You can set a single date or an array of dates as the initial value. You can also use the selectWeekOnClick option to allow selection of an entire week by clicking on associated week numbers.
• Tabs and TabPanel
  • Vertical Tabs Orientation - For Tabs, a new orientation option was added that allows you to arrange tabs either horizontally or vertically.
  • Custom Tabs Position - For TabPanel, the new tabsPosition option allows you to locate tabs on the right, left, top, or bottom of the panel.
  • Custom Icon Position - Both Tabs and TabPanel now include an iconPosition option, allowing you to define where icons are displayed within Tabs (start, end, top, or bottom position).
  • Secondary Styling Mode - You can now specify a styling mode for the active tab. The following styling modes are available:
    • Primary - the width of the underline is fixed.
    • Secondary - the width of the underline depends on tab content.
• Form and Editors
  • Change Detection (Dirty State) - v23.2 includes the following changes:
    • Renamed the reset method to clear for uniformity and introduced a new reset method for editors to maintain reset functionality.
    • Deprecated the Form's resetValues method, replacing it with clear, and introduced a new reset method for the entire Form.
    • Added the isDirty flag for both editors and Form. `isDirty` helps detect changes in Form items or editors.
  • DateRangeBox Support - You can now use editorType: 'dxDateRangeBox' to add the DateRangeBox component to a Form.
  • 'Outside' Label Mode - v23.2 includes a new 'outside' label mode for editors.
  • DropDownButton - New 'Type' Option - The DevExtreme DropDownButton includes a type option like its Button counterpart.
  • Accessibility - The following accessibility-related enhancements have been introduced in this release cycle (WCAG and Section 508 standards):
    • Data Grid:
      • Improved color contrast.
      • All checker errors (Axe, WAVE, Lighthouse) were fixed.
      • Adaptive rows can now be expanded/collapsed using keyboard navigation.
      • Added the ability to focus on total summary and group footer summary.
    • Enhanced the reading experience for screen reader users. The following elements are now supported:
      • Modified cells and deleted rows in DataGrid batch edit mode.
      • Delete confirmation messages in DataGrid.
      • Sort header indexes in DataGrid.
      • Items in Lookup.
      • Dialog titles in HtmlEditor.
      • Validation messages in various components, such as DataGrid, HtmlEditor, DropDownBox, NumberBox, DateBox.
      • Global rework of aria-* attributes.
      • Improved keyboard navigation support for multiple components, including enhanced focus in the Calendar component.
      • Updated visual focus indication in the Popup and other components.
• Performance
  • Vite Tree Shaking Support - Addressed Vite support restrictions that previously lead to a larger JS bundle size. You no longer need to disable Vite's Tree Shaking feature in your DevExtreme-based JS applications.
  • Reduce CSS Size - The DevExtreme package includes all Generic and Material themes. Reduced theme set size as follows:
    • 30% for Generic themes.
    • 37% for Material themes.
    • 34% overall.
• Demos and TypeScript
  • React Demos - TypeScript and React Hooks - Migrated the React demo examples to TypeScript, providing you with two choices: JavaScript and TypeScript. Additionally, made the switch from Class Components to Function Components.
  • Vue Demos - TypeScript and Vue Composition API - Transferred all the Vue demo code to TypeScript. Also transitioned from Options API to Composition API.
• TypeScript Enhancements
  • Angular component properties now support literal union types. IntelliSense supplies hints to identify misuse of such types in code.
  • DevExtreme Angular allows you to specify generic type parameters to define instances of data-aware components like DataGrid.