Мы с гордостью объявляем, что Clarity 2.0 теперь доступна, которая включает в себя ряд новых функций, исправления ошибок и поддержку Angular 8. Это наш второй крупный выпуск с нашим новым циклом выпуска и поддержки, который отражает Angular цикл выпуска.

Ниже приведены подробные сведения о новых функциях и улучшениях, инструкции по обновлению и планы на будущее!

Новые функции и улучшения

Мы много работали над рядом замечательных новых компонентов и шаблонов, а также получили большой вклад от внешних участников.

Компоненты аккордеона и шагового двигателя

Две наши самые большие новые функции - это компоненты Accordion и Stepper, которые разработаны, чтобы помочь вам сгруппировать контент в осмысленные шаги.

Аккордеон - это общий групповой контейнер, каждая из панелей которого складывается. Он имеет ряд конфигураций, таких как разрешение открывать только одну панель, условное предотвращение открытия панели и отслеживание состояния того, открыта панель или нет.

Stepper - это расширенная версия Accordion для случаев, когда вам нужно отобразить сложную форму с различными группами. Фактически, он требует использования шаблонных или реактивных форм Angular и без проблем работает с нашими компонентами форм. Если у вас есть недопустимые входы, Stepper укажет на состояние ошибки.

У Clarity уже есть мастер, который является модальным интерфейсом, позволяющим пользователю выполнить ряд шагов, и это остается вариантом, когда вам нужно иметь опыт наложения.

См. Документацию для Accordion по адресу https://clarity.design/documentation/accordion и Stepper по адресу https://clarity.design/documentation/stepper.

Вертикальные вкладки

Мы представили новую опцию вертикальный макет вкладок для размещения содержимого с вкладками сбоку от области вкладок, а не сверху. Это может хорошо работать в некоторых сценариях, когда список вкладок длинный, но вы хотите отобразить его полностью.

Этим легко воспользоваться, просто добавив правильную разметку на свои вкладки. Вы просто оборачиваете свои вкладки элементом, к которому применен класс tabs-vertical для изменения режима макета.

См. Документацию по адресу https://clarity.design/documentation/tabs.

Цифровой фильтр в Datagrid

Clarity поддерживает возможность добавления пользовательских фильтров для столбца Datagrid, но по умолчанию в Clarity встроен только строковый фильтр. Сейчас мы добавляем поддержку встроенной числовой фильтрации, которую вы можете использовать для определения минимального или максимального значения для фильтрации вашего списка.

Например, если у вас есть столбец Datagrid, содержащий число (например, цену продукта), теперь вы можете фильтровать по числам, которые являются минимальным значением, максимальным значением или и тем, и другим.

Поскольку Clarity продолжает расширять свое сообщество с открытым исходным кодом, члены сообщества вносят исправления, улучшения и даже новые функции. Например, эту новую функцию внес Alex Mellnik, и мы очень ценим его усилия!

См. Документацию по адресу https://clarity.design/documentation/datagrid/built-in-filters.

Поддержка Angular 8

Clarity v2.0 была обновлена ​​для поддержки Angular 8. Это означает, что вы получите все улучшения и преимущества Angular 8 в своих приложениях, например, дифференциальную загрузку.

Улучшенная доступность

Поддержка доступности - важнейшая цель Clarity. Мы продолжаем вкладывать значительные средства в обеспечение того, чтобы Clarity оставалась платформой для создания доступных приложений для всех. По мере продолжения нашей работы нашей целью является поддержка WCAG 2.1 AA, и этот выпуск приносит нам ряд улучшений.

Мы также работаем над обновлением документации по мере необходимости, добавляя примечания о тех случаях, когда приложениям потребуется обрабатывать специальные возможности на своей стороне или где возможно нарушить доступность из-за неправильного использования компонентов.

Устаревание и удаление

В версии 2 мы должны объявить несколько устаревших рекомендаций, которые планируется удалить в версии 3.0, если не указано иное.

  • Функция clrRowSelection Datagrid устарела из-за проблем с доступностью, связанных с тем, что вся строка может быть выбрана, а вспомогательные технологии не могут обрабатывать ее должным образом. Рекомендуется продолжать удалять это свойство, и выбор флажка или переключателя будет продолжать работать должным образом.
  • Подход clrDgColumnToggleTitle и clrDgColumnToggleButton для настройки языковых строк таблицы данных не рекомендуется в пользу использования решения с общими строками, которое было добавлено совсем недавно. Это упростит перевод и сделает перевод единообразным. Если вы добавляете языковые строки в службу общих строк, вы можете просто удалить эти компоненты из своих Datagrids.

В рамках каждого основного выпуска мы стараемся удалить любые устаревшие версии, которые были запланированы на этом этапе. Они будут включать следующее.

  • Были полностью удалены старые стили форм .row и .col классы типов. Используйте обновленные варианты .clr-row и .clr-col из документации.
  • Полностью удалены старые стили формы. Вам следует обновить свои формы до новых макетов и компонентов.
  • Мы полностью удалили все остатки старого CSS-кода Bootstrap, который некоторое время был частью нашего процесса сборки. Это не должно повлиять на большинство проектов, если у вас нет настраиваемых инструментов сборки и они по какой-то причине не зависят от них.

Как обновить

Если вы используете Angular, вам нужно обязательно сначала обновить Angular, а затем Clarity с помощью команды ng update.

ng update @clr/angular

Если вы не используете Angular CLI, вам нужно будет обновить Clarity с помощью NPM, как показано ниже.

npm install @clr/angular@latest @clr/ui@latest @clr/icons@latest

Если у вас есть собственные переводы, обратите внимание, что есть новые строки перевода, которые вам нужно будет добавить в свою службу перевода. Вы можете увидеть весь список строк в нашей документации по интернационализации.

Политика поддержки v2

Clarity 2 будет поддерживаться в течение следующих 18 месяцев, как и Angular 8. Он будет активно разрабатываться в течение следующих 6 месяцев, что означает, что он получит новые функции, а также исправления, пока мы не достигнем Clarity 3.0. Затем он перейдет в режим обслуживания на следующие 12 месяцев для исправлений ошибок и исправлений безопасности.

Это часть нашей обычной политики поддержки, которую вы можете прочитать полностью здесь.

Марш вперед

Ясность продолжает развиваться, и в ближайшие 6 месяцев мы работаем над рядом дополнительных важных функций и улучшений. Ожидается, что любые завершенные неразрывные изменения будут отправлены как часть ветки выпуска 2.x, а любые критические изменения будут отложены до Clarity 3.0, что ожидается ближе к концу этого года.

Мы очень рады тому, что нас ждет впереди, и вот предварительный обзор основных направлений и функций, которые мы ожидаем воплотить в жизнь.

  • Доступность. Мы хотели бы устранить некоторые дополнительные незначительные пробелы в области специальных возможностей, и в настоящее время это основная работа. Мы планируем переносить каждое исправление на версии 1.x и 2.x, если не будет критических изменений.
  • Combobox - Combobox находится в активной разработке, и мы ожидаем, что он появится в ближайшие месяцы, возможно, до того, как будет выпущена версия 3.0. Это более интеллектуальное поле выбора со встроенными функциями поиска и фильтрации.
  • Панель сведений - Datagrid имеет функцию расширяемой строки для отображения большего количества содержимого в строке Datagrid, но панель сведений представляет собой новый шаблон, который позволяет панели открываться в сторону для отображения дополнительных сведений. о записи.
  • Темы. За последние несколько выпусков мы медленно работали над несколькими улучшениями тем, и мы планируем продолжить, чтобы упростить создание пользовательских тем.

Вы можете узнать больше о Clarity на нашем сайте https://clarity.design и в нашем проекте GitHub https://github.com/vmware/clarity. Вы можете связаться с нами через Twitter @VMwareClarity или задать вопросы в StackOverflow с помощью тега vmware-clarity!

Благодарим вас за то, что вы являетесь частью сообщества Clarity, и просим вас сообщить нам, как вы используете Clarity и как мы можем продолжать его улучшать!