Слияние кода завершено, страница обновится автоматически
Обновление скрипта Gulp
Да пребудет с вами сила!
Создан новый компонент Setup Assistant (26be78c).
Summary Detail
Создан новый компонент Summary Detail (245492e).
Welcome Mat
Создан новый компонент Welcome Mat (5d2d818).
Button
Обновлены примеры, чтобы показать отключённые состояния всех вариантов (013b16d).
Combobox
Dueling Picklist
Добавлен пример, подробно описывающий, как добавить метку группы в дуэльный список выбора (b5e0083).
Form Element
Добавлен пример, демонстрирующий элемент записи (73989b0).
Global Header
Документация обновлена, чтобы показывать анимированные примеры (399da9c).
Grid
Добавлены примеры и документация для классов slds-col-bump_* (a095cba).
Icon
Добавлен пример использования slds-current-color (2ef3489).
Rich Text Editor
Примеры обновлены, чтобы правильно обернуть редактор форматированного текста в slds-form-element (b6df0b0).
Button
Добавлен модификатор slds-button_outline-brand (0dec41e).
Chat
Поддержка сообщений о неудачной доставке и неподдерживаемых типах сообщений (14aa268).
Combobox
Введены сгруппированные комбобоксы с текстовыми и иконными вариантами (6c79edd).
Dueling Picklist
Документы обновлены, чтобы добавить неперемещаемые и режим просмотра вариантов дуэльного списка выбора для множественного выбора (c336057).
Добавлен класс slds-is-grabbed.
Добавлен slds-dueling-picklist__column_responsive для добавления отзывчивости (lightningdesignsystem.com/components/dueling-picklist/#Responsive). Глобальный заголовок
Добавлена поддержка фирменных ссылок для пропуска (789aa99).
Ввод
Добавлен вариант ввода с счётчиком (0b20b85).
Панель
Добавлен вариантный тип панели, закреплённой на экране (e88713e).
Всплывающее окно
Добавлено всплывающее окно с вариантами предупреждения и ошибки (60a628d).
Индикатор выполнения
Добавлен пример описательного индикатора выполнения с меткой и процентом выполнения над полосой (dbd0db1).
Вертикальный индикатор выполнения
Добавлен новый вертикальный вариант (118b520). Добавлен slds-progress__marker_icon-success для обозначения завершённого этапа.
Кольцо прогресса
Добавлен модификатор slds-progress-ring_large для создания кольца размером 32x32 пикселя (26be78c). Добавлен модификатор slds-progress-ring_active-step для изменения цвета кольца прогресса.
Спиннер
Добавлен новый встроенный вариант спиннера (c05738f).
Табы
Добавлен новый мобильный вариант свёрнутых табов (9d7b861).
Текст
Добавлен новый шрифт моноширинного семейства (7a41fd6).
Аватар
Добавлен эффект тени текста к slds-avatar__initials для улучшения контраста (3f43dfa). Добавлен slds-avatar__initials_inverse для тёмных начальных букв на светлом фоне.
Группа кнопок
Добавлен slds-dropdown_actions в группу кнопок переполнения выпадающего списка (8ab08fe).
Иконка кнопки
Добавлен выбранный стиль к варианту с границей и инверсией (2624d4f).
Карта
Добавлен slds-card__footer-action, чтобы ссылка нижнего колонтитула занимала всю ширину карты (89c6a28).
Чат
Изменён slds-chat-message__text-sneak-peak на slds-chat-message__text-sneak-peek (cdaabbf).
Чекбокс
Обновлены примеры, чтобы иметь уникальные атрибуты value (cdf72cd).
Составная форма
Исправлена ошибка переполнения макета (#530). Таблица (https://lightningdesignsystem.com/components/data-tables/?state=row-error-and-selected&variant=inline-edit)
Изменён стиль отредактированных и ошибочных ячеек при выборе строки (9ed087a).
Обновлены флажки и радиогруппы в таблицах данных, чтобы они были сгруппированы с общей меткой с помощью aria-labelledby и скрытой групповой метки в заголовке столбца (f8f8801).
Datepicker (https://lightningdesignsystem.com/components/datepickers/?state=datepicker-with-error&variant=base)
Dueling Picklist (https://lightningdesignsystem.com/components/dueling-picklist/)
Form Element (https://lightningdesignsystem.com/components/form-element/#Compound)
slds-form-element__legend_has-tooltip, позволяющий разместить значок подсказки рядом с легендой (f3c5b48).Global Header (https://lightningdesignsystem.com/components/global-header/)
Обновили цвета глобальных действий (58d68e1).
Поиск теперь использует новую группу комбинированных списков (9bddfde).
Input (https://lightningdesignsystem.com/components/input/)
Убрали красную тень блока от обязательных полей ввода в Firefox (069a3c8).
Использовали aria-labelledby вместо aria-describedby для связывания добавленного и добавленного фиксированного текста с вводом (25d51d7).
Переупорядочили стили slds-input:required, чтобы предотвратить переопределение (ba3ac5b).
Убрали событие указателя, когда значок находится над вводом (84b650b).
Добавили slds-input-has-icon_group-right, чтобы исправить проблемы с интервалом для нескольких значков справа (9bddfde).
Path (https://lightningdesignsystem.com/components/path/)
Добавлено оформление фокуса для завершённых этапов (f197b4a).
Поменяли порядок slds-is-active и slds-is-complete, чтобы предотвратить переопределение.
К кнопке действия добавили минимальную ширину (1b8e6b8).
Radio Group и Radio Button Group (https://lightningdesignsystem.com/components/radio-group/ и https://lightningdesignsystem.com/components/radio-button-group/)
Rich Text Editor (https://lightningdesignsystem.com/components/rich-text-editor/?state=error&variant=base)
Для сообщения об ошибке добавлен белый фон с модификатором slds-form-element__help (8033c22).
Удалён нижний отступ из slds-rich-text-editor__spacing-wrapper и добавлен в slds-rich-text-editor__select (bf907ed). Деревья
Добавлен недостающий вспомогательный текстовый диапазон для ветви дерева с метатекстом (a407e58).
Утилиты
!important к утилитам видимости slds-hide и slds-hidden (16bf902).Вертикальные вкладки
Визуальный подборщик
Текст
Общие замечания
Временная шкала активности
Брендовая полоса
Хлебные крошки
Иконки кнопок
Карты
Карусель
Чат
Флажок
Таблицы данных
Глобальный заголовок
Сетки
slds-gutters и slds-gutters_* для размеров (b6d7fd5).Значки
slds-current-color добавлен для установки значка, использующего текущий цвет. Map
Меню
Уведомления
Всплывающие окна
Редактор форматированного текста
Спиннеры
Деревья
Утилиты
Вертикальная навигация
Доступны следующие исправления:
Аккордеон
Средство запуска приложений
Группы кнопок
Кнопки
Палитра цветов
Комбинированный список
Таблицы данных
Выбор даты
Дуэльный список выбора
Расширяемый раздел
Глобальная навигация
Ввод
Поиск
Меню
Модальное окно
Таблетки
Всплывающие окна
Редактор форматированного текста
Вкладки
Деревья
Утилиты
Вертикальная навигация
Размер
Цвета
Кнопки
Карты
Размеры
Кнопки
Группа флажков/радиокнопок
Модальное окно
Путь
Мы внесли несколько улучшений в выпуске Winter ’18, которые могут повлиять на ваши компоненты и страницы.
Что мне нужно знать как дизайнеру об изменениях дизайна в выпуске Winter ‘18?
Что разработчику нужно знать об изменениях в дизайне в релизе Winter ’18?
При изменении цвета фона страницы вы можете заметить, что некоторые из ваших пользовательских компонентов стали прозрачными, и текст на тёмном фоне стал нечитаемым. Вы можете легко это исправить, добавив класс .slds-card к внешней оболочке вашего компонента.
Если вам нужны стандартные вкладки, которые будут выглядеть как карточки, вы можете поместить класс .slds-tabs_card в узел DOM .slds-tabs_default. Это придаст набору вкладок отступы и тени, как у карточки.
Когда класс .slds-card используется внутри .slds-tabs_default, .slds-modal или другого .slds-card, они больше не имеют внешнего вида с тенью от карточки. Вместо этого они просто белые. В некоторых ситуациях вам может потребоваться отличить вашу карточку от окружающего её контента. Вы можете добавить класс .slds-card_boundary к классу .slds-card, чтобы получить закруглённую границу.
На некоторых страницах вы заметите, что заголовок прикреплён к списку просмотра. Если у вас есть собственная страница, где вы хотите прикрепить заголовок к компоненту ниже, добавьте класс .slds-has-bottom-magnet к slds-page-header. Затем добавьте .slds-has-top-magnet к компоненту ниже. Это визуально соединит компоненты друг с другом.
Если вы использовали SLDS в Visualforce через тег <apex:slds />, ваши страницы Visualforce также унаследуют новый стиль в Winter ’18.
Для получения более подробной информации посетите этот блог разработчика: «Подготовьте свои компоненты Lightning к зиме ’18».
Карты
slds-card_boundary, чтобы обеспечить внешний вид карты, когда компонент находится внутри набора вкладок.Магнит
slds-has-top-magnet и slds-has-bottom-magnеt.Теперь доступны следующие возможности:
Значки
Динамическое меню
Индикатор выполнения
Кольцо прогресса
Ограниченное уведомление
Слайдер
spans внутри label, чтобы дать возможность визуально скрыть один или оба.Следующие проблемы теперь решены:
Предупреждения
Группа кнопок
Кнопки
pointer-events:none к SVG в кнопке.Карты
Выбор цвета
tabindex на образцах.Комбинированный список
role=none к div, который оборачивает ввод.Средство выбора даты
Дуэльный список выбора
— Исправлена маркировка ввода селектора файлов.
Global Navigation
— Добавлена анимация при наведении курсора и при активном состоянии элемента списка глобальной навигации (074771a).
Grids
— Решена проблема с размером в IE путём добавления max-width (00a0e35).
Modals
— Удалён лишний класс .slds-modal__header из примера модального окна без заголовка.
Normalize
— Удалено [hidden] { display: none; } для решения проблемы с исчезновением диаграмм Visual Force при добавлении SLDS.
Notifications
— Обновлён вспомогательный текст для кнопки закрытия уведомления, добавлен тип события в заголовок и живой регион (d96535d).
— Обновлена стилизация для добавления цвета границы и более тёмной тени (f977ee6).
Path
— Стилизация активной вкладки упрощена и исправлена во всех состояниях этапа (3f9fbd4).
Responsive Tables
— Примеры использования адаптивных таблиц теперь можно найти на сайте (d427148).
Colors
— Количество оттенков серого сокращено и обновлено до 12 (ff582b0).
Cards
— Цвет фона изменён на белый. — Добавлена тень для улучшения глубины и иерархии. — Тень у карт внутри набора вкладок удалена.
Data Tables
— Высота строк уменьшена для повышения плотности содержимого.
Split View
— Изменён цвет фона.
Static/Read Only Inputs
— Размер шрифта, его вес и цвет обновлены (ce7b275).
Default Tabs
— Табы выглядят как карты.
Изменение именования BEM
Изначально мы использовали стиль двойного тире для обозначения BEM (--). Из-за того, что двойные тире проблематичны в среде XML (которая не допускает двойные тире в комментариях), мы обновили синтаксис, чтобы использовать стиль одинарного подчёркивания (_). Это изменение обратно совместимо в течение 18 месяцев. Но все компоненты, созданные в будущем, будут строиться с использованием стиля BEM с одинарным подчёркиванием.
Следующие проблемы были решены:
abbr, которую Chrome представил в версии 58.slds-form-element__static, когда вывод был многострочным.Теперь доступны следующие функции:
Аккордеон
Кнопка
slds-is-selected-clicked добавлен для обработки события клика на кнопке с состоянием — Кнопка с состоянием.Комбобокс
Закреплённая служебная панель
Дуэльный список выбора
Динамические иконки
Расширяемый раздел
Ввод
slds-has-input-focus для предоставления стилей фокуса на элементе.Поиск
... Убраны скруглённые углы у служебных иконок, чтобы они больше не обрезались неправильно
Хлебные крошки теперь переносятся правильно.
Состояние фокуса для пилюль перенесено на содержащий элемент, а не только на текст внутри пилюли.
Обновлён z-индекс закреплённой служебной панели до 4 для лучшей совместимости с другими элементами.
Предотвращено схлопывание закреплённого содержимого композитора в Safari.
Обновлён стиль курсора для отключённого состояния групп радиокнопок.
Следующие функции помечены как устаревшие в этом выпуске и будут удалены через три выпуска:
В дизайн компонентов были внесены следующие обновления:
Выпадающие меню:
Закреплённый композитор:
Ленты новостей:
Файлы:
Всплывающие окна
Были внесены следующие изменения в токены:
TASK_2 был переименован в TASK2.ENTITLEMENT.LIVE_CHAT.s1-base/sizing
MAX_HEIGHT_ACTION_OVERFLOW_MENU.MAX_WIDTH_ACTION_BAR.MAX_WIDTH_ACTION_BAR_ITEM.UTILITY_BAR_COLOR_BACKGROUND_NOTIFICATION_FOCUS.VERTICAL_NAVIGATION_COLOR_BACKGROUND_SHADE_ROW_HOVER.VERTICAL_NAVIGATION_COLOR_BACKGROUND_SHADE_ROW_ACTIVE.Были сделаны следующие изменения, чтобы сделать наш продукт более доступным:
Временная шкала активности
title к иконкам элементов.Средство запуска приложений
Элемент slds-modal изменён на элемент <section/>.
Элемент slds-modal__header изменён на элемент <header/>.
Иконки плиток приложений изменены в соответствии с новой моделью Avatar Fallback Entity Initials, добавлен тег <abbr/>.
Удалена вспомогательная информация из изображения ручки перетаскивания, поскольку она не имеет отношения к пользователям программ чтения с экрана.
Реализован новый шаблон расширяемого раздела для расширяющихся разделов.
aria-expanded="true|false" для отражения состояния.aria-controls="id_of_expanding_section" для связи кнопки с содержимым, которым она управляет, и присвоения идентификатора тому же содержимому.Добавлено три новых состояния для доступного перетаскивания.
aria-describedby="id-of-span-containing-instructional-text".Добавлены недостающие атрибуты title.
Кнопка
Карточка
Группа кнопок-флажков
Выбор даты
Закреплённый композитор
Закреплённый композитор — задача
Закреплённый композитор — голос
Нижний колонтитул закреплённой формы
Панель закреплённых утилит
Панель закреплённых утилит
Расширяемый раздел
Каналы
Макет формы
Глобальный заголовок
Добавлен атрибут aria-describedby в диалог уведомлений.
Обновлена разметка ARIA Combobox в соответствии со спецификацией ARIA 1.1. Подробности см. в разделе «Примечания к поиску».
Обновлено описание listbox, чтобы заголовки групп опций были доступны, как в Picklist. Подробности см. в разделе «Примечания к поиску».
Исправлена ошибка в разметке Listbox option: элементы div больше не оборачиваются элементами span.
Кнопка Favorites Button теперь сообщает о нажатом состоянии с помощью паттерна ARIA Toggle Button с использованием атрибута aria-pressed.
Глобальная навигация
Ссылка App Launcher теперь представлена элементом , так как она запускает модальное окно.
Исправлено некорректное значение атрибута title элемента App Name.
Значение атрибута title ссылки Object Switcher приведено в соответствие с визуальным текстом.
Значение атрибута title кнопки меню Object Switcher исправлено.
Глобальная навигация — навигационная панель
Атрибуты title пунктов меню исправлены.
Удалено значение aria-haspopup=true из выпадающего списка li.
Из slds-context-bar__icon-action удалён tabindex="0".
Из кнопки slds-context-bar__icon-action убран tabindex="-1".
В кнопку slds-context-bar__icon-action добавлено значение aria-haspopup="true".
Для активного элемента текущей страницы добавлен вспомогательный текст.
Глобальная навигация — панель вкладок
Исправлен атрибут title на кнопке Split View Toggle.
Убрано значение aria-haspopup из кнопки Split View Toggle.
На кнопке Split View Toggle реализован простой паттерн Expanding Section ARIA. Добавлены значения aria-expanded="true|false" для отражения состояния и aria-controls="id_of_expanding_section" для связи кнопки с управляемым ею контентом.
Добавлено значение aria-controls к каждому элементу role="tab".
Создана tabpanel для каждого элемента tab. Каждому присвоен уникальный ID, соответствующий значению атрибута aria-controls. Также каждому присвоено значение aria-labelledby, соответствующее ID элемента tab.
Текст кнопки «Новая вкладка» обновлён в соответствии с её функцией.
Обновили атрибут title кнопки «Новая вкладка».
Убрали атрибут aria-haspopup у кнопки «Новая вкладка».
Добавили значение aria-label к диалогу New Tab.
Скрытые кнопки удаления в закреплённых вкладках больше не фокусируются.
Ввод — помощь на уровне поля
Переместили значение aria-describedby из элемента input в триггер Tooltip .
Убрали значение aria-live из Tooltip.
Конструктор списков
Элемент role="dialog" стал элементом .
slds-modal__header стал элементом .
slds-modal__footer стал элементом .
Выбранные пилюли заменены новым списком пилюль.
Разметка поиска обновлена в соответствии с новой структурой. См. раздел «Примечания к поиску».
Поиск
Обновление разметки ARIA Combobox согласно спецификации ARIA 1.1:
Улучшена разметка listbox для обеспечения доступности заголовков групп опций, аналогично Picklist:
Ошибка в разметке Listbox option исправлена: элементы div больше не обернуты элементами span. Издатель
Сделал определение списка «Кому: Мои подписчики» частью поля комментария в виде строки, чтобы создать более понятную подпись.
Убрал возможность фокусировки действий издателя при скрытом состоянии.
Выбрать
Вкладки
Вертикальная навигация
Теперь использует элемент <nav /> в качестве родительского элемента.
Добавляет атрибут aria-label к элементу nav, чтобы его было легко идентифицировать среди других навигационных областей на той же странице.
Добавляет атрибут aria-current="page" к активной ссылке.
Утилиты — список
Добавлено
Теперь доступны следующие классы:
Исправлено
Следующие проблемы теперь решены:
Сайт IA/улучшения
Новый выпуск iOS (3.0.0)
Существенное переписывание скрипта для обработки будущих изменений токенов.
Токен теперь можно использовать в Swift.
Токены обновлены до Spring ’17.
Подробные примечания к выпуску доступны в файле CHANGELOG.md для design-system-ios.
Улучшения сайта IA
Новые компоненты и варианты
Доступны следующие компоненты:
Улучшение сайта IA
Доступны следующие улучшения сайта:
Новые компоненты и варианты
Доступны следующие компоненты:
Добавлены глобальные навигационные вкладки (Workspace Tabs).
Добавлена кнопка добавления флажка.
Добавлен список кнопок группы.
Добавлен редактор форматированного текста.
Добавлены уведомления глобального заголовка.
Добавлен заголовок всплывающего окна.
Добавлен нижний колонтитул всплывающего окна.
Добавлен индикатор прогресса.
Добавлены всплывающие окна пошагового руководства.
Добавлен заголовок пошагового руководства.
Добавлена успешная кнопка.
Добавлены подвкладки.
Добавлен динамический список выпадающего меню.
Добавлено
Доступны следующие классы:
Добавлено slds-float_none.
Добавлено slds-button_icon-container-more.
Добавлено slds-button_icon-more-filled для кнопок, требующих фона.
Добавлено slds-text-color_inverse.
Добавлено slds-text-color_inverse-weak.
Добавлено slds-is-absolute для переопределения позиционирования компонентов по умолчанию. Добавлено:
Добавлено:
Устарело:
Перемещено:
Новые компоненты и варианты:
средство запуска приложений — компонент средства запуска приложений;
глобальная навигация — стандартная контекстная панель. Компоненты
Глобальный заголовок — Global Header Component.
Прикреплённая служебная панель — Docked Utility Bar Component.
Панель фильтрации — Filtering Panel Component.
Файлы — File Components.
Селектор файлов — File Selector.
Лента новостей версии 2 — Feeds Component.
Неопределённый флажок — Indeterminate checkbox component.
Иконка кнопки с рамкой — Button Icon Inverse with Border.
Подсказка при наведении на иконку кнопки — Button Icon with Hint Hover.
Ошибка иконки кнопки — Button Icon Error.
Фигурные карточки — Figure Card Component.
Соотношение сторон изображения — Figure Ratio Component.
Вариант цвета вертикальной навигации — Vertical Navigation.
Добавлено
Доступны следующие классы:
Изменения
В этом выпуске были внесены следующие изменения:
Были решены следующие проблемы:
Исправления вертикальной доступности дома:
aria-haspopup="true" к кнопкам переполнения действий.Глобальные исправления доступности заголовка:
.slds-assistive-text становиться видимым при фокусировке, если используется .slds-assistive-text_focus.<ul>, чтобы их могли обнаружить программы чтения с экрана..slds-has-focus для применения состояния фокуса к параметрам списка при использовании клавиатуры.Поиск/Глобальный поиск:
role=separator применена к элементам списка выпадающего меню, которые не имеют активного элемента.role=presentation применена к элементам списка выпадающего меню.<span> вместо <p>.tabindex="-1", элементы с фокусом табуляции изменены на tabindex="0".Утилиты:
role="footer".aria-label="Utility Bar" добавлено к утилитарной панели.role=dialog и aria-labelledby добавлены к панели утилиты.aria-labelledby.<ul>.Файлы:
.slds-image_overlay.Карты:
<header> теперь содержит только текст заголовка карты, а не текст и меню переполнения.<p> с усечением в связанной разметке списка заменены на теги <span>.Другие изменения:
Основные метки составных полей написаны с заглавной буквы.
Выпадающие списки появляются при фокусировании на значке в глобальной навигации.
Диалог помечен заголовком модального окна с использованием aria-labelledby="id_of_heading" в компоненте запуска приложения.
Все таблицы теперь используют один и тот же метод усечения, когда текст в ячейке слишком длинный, и показывают полный текст при необходимости. Исправления в области доступности:
Улучшения в компоненте «Конструктор списков» для обеспечения доступности.
Устранена проблема, при которой примеры содержали один и тот же идентификатор несколько раз.
Исправления в доступности каналов:
Исправления в доступности меню и списка выбора, включая меню, используемые в составных компонентах SLDS:
aria-expanded из контейнеров.role="presentation" к элементам списка, чтобы исключить их из дерева доступности.menuitemcheckbox и aria-checked вместо aria-selected.role="separator".Другие исправления:
aria-describedby к элементу textarea для отображения идентификатора сообщения об ошибке.aria-live к кнопке состояния со значком.aria-describedby к элементу select для отображения идентификатора сообщения об ошибке.aria-haspopup к кнопкам меню временной шкалы активности, и каждый элемент списка использует тег <h3>.Устарело:
Следующие функции помечены как устаревшие в этом выпуске и будут удалены через три выпуска:
Удалено:
В этом выпуске удаляются следующие функции или демонстрации:
Исправлено:
Решены следующие проблемы:
article.header.aria-haspopup="true", поскольку она вызывает выпадающее меню.<h2>.aria-labelledby="id_of_heading", а aria-hidden="false" удалён из модального окна.slds-table_striped в базовом примере таблицы данных.<legend> были выделены жирным шрифтом — исправление #216.aria-describedby добавлен к компоненту всплывающей подсказки.Изменения:
Сайт IA/улучшения:
Изменения:
Были внесены следующие изменения:
Исправлено:
Устранены следующие проблемы:
<th> оставался белым на полосатой строке при применении slds-table_striped — исправление https://github.com/salesforce-ux/design-system/issues/232.slds-form-element__label m-bottom-- › slds-form-element__label slds-m-bottom_none) — Вариант флажка-переключателя. Версия [2.0.1] — 6 июня 2016 года
УЛУЧШЕНИЯ САЙТА
Доступны следующие улучшения сайта:
— Система сеток перемещена в утилиты и переименована в «Grid». — Медиаобъект перемещён в утилиты. — Добавлены новые состояния для групп кнопок, показывающих выпадающее меню переполнения. — Улучшена навигация по вариантам карточек. — Улучшена навигация по варианту таблиц данных. — Улучшена навигация по варианту поиска. — Улучшена навигация по списку вариантов.
НОВЫЕ КОМПОНЕНТЫ И ВАРИАНТЫ
Теперь доступны следующие компоненты:
— Переключатель флажков — компонент переключателя флажков. — Альтернативный флажок — альтернативный компонент флажка. — Карта — Связанный список с плитками — связанный компонент списка карт с плитками. — Таблица данных — Базовая и расширенная — компонент таблицы данных. — Панель подробностей с формой редактирования — компонент панели подробностей. — Пристыкованный композитор — Голосовая интеграция — пристыкованный компонент композитора голоса. — Модальное окно без заголовка и/или нижнего колонтитула — модальный компонент. — Обновлена спецификация поиска — Одиночный и полиморфный — поисковый компонент. — Обновлено описание заголовков страниц — заголовок страницы. — Вертикальная навигация для навигации на странице — вертикальный навигационный компонент. — Альтернативная радиогруппа — альтернативная радиогруппа. — Сетка деревьев — сетка деревьев.
ДОБАВЛЕНО
Добавлены следующие классы:
— Утилита выравнивания — Абсолютный центр — утилита выравнивания. — Утилиты взаимодействия — Сброс ссылки — взаимодействие утилит. — Текстовая утилита — Заголовок метки нормальный — нормальная метка заголовка. — Цветовая утилита темы — Лёгкая версия текстуры темы — текстура темы. — Позиция входных значков на обеих сторонах контейнера ввода — вход. — Позиционные утилиты — Относительная и статическая — позиционные утилиты.
ИЗМЕНЕНИЯ
В этом выпуске были внесены следующие изменения:
— В целом всё будет выглядеть более компактно.
— Добавлено дополнительное пространство между кнопками в нижнем колонтитуле модального окна.
— Уменьшены размеры шрифтов.
— Визуально уменьшены заголовки страниц.
— Детали заголовков страниц теперь на белом фоне и выровнены по левому краю.
— Модальности стали визуально более компактными.
— Все кнопки визуально меньше.
— Элементы форм визуально меньше.
— Размер и интервал временной шкалы активности уменьшен.
— Изменения визуальной плотности в карточках.
— Изменения визуальной плотности во всплывающих окнах.
— Ссылки «Просмотреть все» в карточках и панелях всплывающих окон теперь выровнены по правому краю.
— slds-modal_content должен использовать дополнительные классы slds-p-vertical_large и slds-p-horizontal_x-large, вместо slds-p-around_medium.
— Удалено первое и последнее заполнение ячеек из таблиц данных, чтобы разрешить вложение. Новый класс .slds-table_cell-buffer можно добавить к таблице или .slds-cell-buffer_left и .slds-cell-buffer_right для индивидуального применения к ячейке.
— Значок справки уровня поля перемещён вправо от метки ввода.
— Убраны стили a:focus из-за недавнего изменения FFOX.
— Теперь заголовки сортируемых таблиц данных имеют область действия, поэтому они могут быть сфокусированы.
— Улучшено взаимодействие для изменения размера элемента в таблицах данных.
— Компонент Docked Composer имеет улучшенную разметку, фокусируясь на семантической структуре и правильно идентифицируя компонент как диалог для вспомогательных технологий.
— Datepicker имеет улучшенную разметку, фокусируясь на семантической структуре и определяя правильные роли aria для дат.
— Решена семантическая ошибка путём превращения контейнера Pill в <span>. <a> перемещено внутрь и рядом с кнопкой закрытия.
— Уведомление Prompt имеет улучшенную доступность. Улучшено определение компонента для программ чтения с экрана с помощью aria-role="alertdialog", aria-labelledby и aria-describedby. Также была удалена избыточная кнопка slds-modal__close.
ИСПРАВЛЕНО
Были решены следующие проблемы:
max-height и анимация на .slds-section__content, чтобы предотвратить конфликты с реализациями JavaScript.УСТАРЕЛО
Следующие функции помечаются как устаревшие в этом выпуске и будут удалены через три выпуска:
Обновлены поисковые запросы. Версия 1.0.0 устарела. Будет продолжать работать, но обновите до новой разметки — компонент поиска.
Обновлены заголовки страниц. Версия 1.0.0 устарела. Будет продолжать работать, но обновите до новой разметки — заголовок страницы.
.slds-toggle-visibility больше не нужен в группах кнопок. Последняя кнопка больше не будет исчезать, если это иконка кнопки, а вместо этого будет серой, как обычная отключённая кнопка.
Больше не поддерживается .slds-button-space-left. Пожалуйста, используйте утилиты для интервалов.
.slds-button_icon-bare больше не требуется. Пожалуйста, используйте .slds-button_icon вместо.
.slds-card_empty больше не требуется. Вместо этого используйте служебный класс .slds-text-align_center.
Кнопка .slds-button внутри .slds-is-sortable больше не нужна. Теперь вся ячейка является гиперссылкой, кнопка не нужна.
Не поддерживается .slds-form-element__helper.
.slds-input__icon больше не поддерживает цвет по умолчанию. Используйте .slds-icon-text-default на SVG-иконке.
Не поддерживается .slds-icon__container. Используйте .slds-icon_container вместо.
Не поддерживается .slds-icon-custom-XX. Используйте .slds-icon-custom-customXX вместо.
Не поддерживается .slds-dropdown_nubbin-top. Используйте .slds-nubbin_top вместо.
В выпадающих списках больше не нужны .slds-has-icon_left, .slds-has-icon_right и .slds-has-icon_left-right. Иконки можно разместить в потоке элемента .slds-dropdown__item.
Не поддерживается .slds-modal-backdrop. Используйте .slds-backdrop вместо.
Не поддерживается .slds-notify-container. Используйте .slds-notify_container вместо.
Не поддерживаются .slds-pill-container и .slds-pill__container. Вместо них используйте .slds-pill_container.
Не поддерживается .slds-pill__container_bare. Используйте .slds-pill_container_bare вместо.
Не поддерживается .slds-tabs__item. Вместо этого используйте конкретные селекторы элементов, такие как .slds-tabs_default__item или .slds-tabs_scoped__item.
Не поддерживаются .slds-tooltip и .slds-tooltip__body. Вместо них используйте .slds-popover и .slds-popover__body.
Не поддерживается .slds-tree-container. Вместо него используйте .slds-tree_container.
Не поддерживаются .slds-col-rule_left, .slds-col-rule_right, .slds-col-rule_top и .slds-col-rule_bottom. Вместо них используйте .slds-col_rule-left, .slds-col_rule-right, .slds-col_rule-top и .slds-col_rule-bottom.
Не поддерживаются .slds-nowrap_small, .slds-nowrap_medium и .slds-nowrap_large. Вместо них используйте .slds-small-nowrap, .slds-medium-nowrap и .slds-large-nowrap.
Не поддерживается .slds-align-content-center. Вместо него используйте .slds-align_absolute-center.
Не поддерживается .slds-has-dividers. Вместо него используйте .slds-has-dividers_{position}.
Не поддерживается .slds-has-divider. Вместо него используйте .slds-has-divider_{position}.
Не поддерживается .slds-has-cards. Вместо него используйте .slds-has-divider_around.
Не поддерживается .slds-has-cards_space. Вместо него используйте .slds-has-divider_around-space.
Не поддерживается .slds-section-title. Вместо него используйте .slds-section__title.
Не поддерживается .slds-collapsed. Вместо него используйте .slds-is-collapsed. Удалено:
Правило, которое скрывает кнопку закрытия в окне уведомлений .slds-modal_prompt .slds-modal__close, больше не требуется, так как HTML должен быть удалён. Пожалуйста, удалите кнопку из заголовка диалога.
Удалённые функции:
$static-icon-path, поскольку она нигде не использовалась в кодовой базе.slds-button_small, так как это то же самое, что и новый размер кнопки по умолчанию.slds-input_small, так как это то же самое, что и новый размер ввода по умолчанию.slds-tile__title, так как оно не применяло никаких стилей.🗒 Примечания о файлах CSS с ограниченной областью действия, неуправляемом пакете, компонентах Visualforce и Lightning:
CSS Lightning Design System теперь автоматически включается для компонентов Lightning, работающих в Lightning Experience и мобильном приложении Salesforce S1 (через app.css). Больше нет необходимости добавлять статический ресурс для компонентов Lightning, работающих в этих средах.
Начиная с версии 2.0.x, Lightning Design System больше не доступен в виде неуправляемого пакета. Кроме того, файлы CSS с ограниченной областью видимости (salesforce-lightning-design-system-vf.css и salesforce-lightning-design-system-ltng.css) больше не распространяются как часть zip-файла Design System (доступного на странице Downloads). В качестве альтернативы вы можете создать свой собственный zip-файл Design System с ограниченной областью действия с помощью нового инструмента CSS Scoping Tool и загрузить его как статический ресурс, как описано на странице инструмента. Однако мы настоятельно рекомендуем вам не устанавливать SLDS в качестве статического ресурса при создании для Lightning.
Ресурсы:
slds-icon-custom-customXX (например, slds-icon-custom-custom25), вместо slds-icon-custom-XX (устарело). Это изменение устраняет проблему #203.@font-face по умолчанию. Чтобы отключить метод загрузки шрифтов по умолчанию, установите $slds-load-webfonts: false; перед импортом файла Sass системы дизайна.title к контейнерам значков, заметно улучшая доступность для пользователей указывающих устройств, таких как мыши и трекпады.npm install завершался сбоем в Windows — что справедливо для наших друзей-разработчиков, которые используют ПК.С днём рождения! Системе Lightning Design исполняется 1 год...
Изменения:
... Улучшена доступность в варианте компонента заголовка страницы «record home» (убрать несколько элементов <dl> и использовать вместо них один элемент <ul>) — заголовки страниц.
ИСПРАВЛЕНО
Следующие проблемы были решены:
— Используются относительные пути для указания на ресурсы, что устраняет ошибку, когда в определённых средах при работе с SLDS не загружались ресурсы — исправляет design-system/issues/83;
— Точки останова для элементов формы теперь срабатывают на небольшой точке останова, а не на большой — исправляет design-system/162;
— Исправлена ошибка в компоненте «Дерево», которая возникала в ограниченной версии SLDS и мешала правильному отступу вложенных ветвей — исправляет design-system/issues/91 и design-system/issues/164;
— Изменена структура именования файлов, чтобы стандартные реализации Sass могли отслеживать весь проект и компилировать нужные файлы фреймворка на лету;
— Устранена ошибка, из-за которой компиляция завершалась неудачно при использовании Ruby Sass — исправляет design-system/issues/173.
УЛУЧШЕНИЯ САЙТА IA/ENHANCEMENTS
Теперь доступны следующие улучшения сайта:
— Компоненты и их варианты теперь могут быть созданы с состояниями и будут отображаться в навигации по вариантам компонентов справа, если доступно;
— Улучшенные таблицы обзора компонентов для более узкой читаемости;
— Улучшены метки статуса. Теперь они связаны с цветами и содержат больше информации;
— Руководство по разметке и стилю с информацией BEM — Руководство по разметке и стилю;
— Ресурсная информация — Ссылки на статьи;
— Обновлённая документация и информация о доступности для вкладок — Вкладки;
— Улучшенная документация по системе сеток — Система сеток.
НОВЫЕ КОМПОНЕНТЫ И ВАРИАНТЫ
Доступны следующие компоненты:
— Пристыкованный композитор — Компонент пристыкованного композитора;
— Меню множественного выбора из списка — Компонент множественного выбора из списка;
— Фиксированный текст с входами — Состояние ввода;
— Встроенное справочное руководство — Встроенный компонент справочного руководства;
— Путь продаж — Путь продаж;
— Мастер настройки — Мастер настройки;
— Добавлен элегантный способ добавления интервалов между определёнными элементами сетки — автоматическая функциональность в flexbox. Вариант смещения элемента;
— Добавлены цветовые темы всплывающих окон — Темы всплывающих окон;
— Дерево — Базовый компонент дерева — дерево было полностью перестроено и теперь является новым компонентом.
Для мобильных устройств:
— Диалоговые меню для небольших форм-факторов — Подсказки для сенсорных экранов;
— Переполнение действий для сенсорного экрана — Переполнение действий;
— Добавлено диалоговое окно редактирования для сенсорных устройств — Диалоговое окно редактирования.
ДОБАВЛЕНО
Добавлены следующие классы:
— Добавлена максимальная ширина для утилит размера — Максимальная ширина;
— Добавлены нулевые промежутки для классов утилит — Классы утилит;
— Дополнительные классы системы сеток:
* добавлен .slds-grid_align-end для горизонтального выравнивания по основной оси сетки;
* добавлены .slds-grid_vertical-align-end и .slds-grid_vertical-align-center для вертикального выравнивания по поперечной оси сетки;
* добавлен .slds-grid_stretch для поддержки многорядного вертикального растяжения;
* добавлены .slds-grid_reverse и .slds-grid_vertical-reverse, чтобы изменить направление сетки. .slds-text-error для использования на значках при ошибках проверки
— Добавлен цвет к выбору пользователя, чтобы обеспечить хороший контраст на тёмных фонах.
Изменения
В этом выпуске были внесены следующие изменения:
— Удалены гифки Spinner и переработаны как CSS — [компонент Spinners].
— Изменён порядок источников как Reversed, так и Double Media Objects. Они больше не переупорядочиваются с использованием свойства порядка flexbox. [Компонент Media Objects].
— Временная шкала активности отражает изменения в медиаобъектах. Также удалены dl с одиночными парами dt и dd и заменены на span.
— Обновление токена цвета фона всплывающего окна справки на уровне поля — [цвета Popover].
— Переключены медиазапросы на использование em вместо px.
— Удалён цвет значка из .slds-input__icon, поэтому теперь дополнительно требуется класс цвета значка.
— Реорганизованы токены, чтобы приоритет отдавался большому форм-фактору.
— Тема верхнего колонтитула страницы перемещена из раздела «Утилиты» в категорию компонентов верхнего уровня [компонент верхнего колонтитула страницы].
— В верхнем колонтитуле страницы удалён .slds-m-top_x-small и заменён новым классом .slds-page-header__info.
— Скорректировано вертикальное расстояние на маленьком окне просмотра для .slds-form_stacked, .slds-form_horizontal и .slds-form_inline.
— Ширина контейнера сетки изменяется на 480 пикселей для маленького, 768 пикселей для среднего, 1024 пикселей для большого и 1280 пикселей для x-большого.
— Последний элемент внутри .slds-text-longform теперь сохраняет нижнее поле.
Исправлено
Теперь решены следующие проблемы:
— Исправлена проблема с областью видимости вкладок и активным состоянием — ошибка. Повышена специфичность активного состояния вкладки.
— Обновлены списки > описание по горизонтали с использованием flexbox. Изменение класса не требуется. dt и dd теперь могут принимать утилиты размера. Изменить отступ на отступ.
— Исправлена ошибка доступности с обязательными элементами формы.
— Некоторые токены, которые невозможно было переопределить из-за отсутствия флага !default, были решены.
— Обновлено форматирование составных полей, которое вызывало проблемы с отображением [составные поля].
— Исправлена ошибка с обратным значком группы кнопок.
Устарело
Следующие функции помечаются как устаревшие в этом выпуске и будут удалены через три выпуска:
— Устаревший .slds-card_empty. Используйте .slds-text-align_center вместо [компонент карты].
— Устаревший .slds-section-title. Используйте .slds-section__title вместо [раздел заголовка].
— Устаревший .slds-button_icon-bare. Используйте .slds-button_icon вместо [значок кнопки].
— Устаревшие селекторы потомков вкладок [компонент вкладок]:
— .slds-tabs_default > slds-tabs__item используйте .slds-tabs_default__item вместо.
— .slds-tabs_default > slds-tabs__content используйте .slds-tabs_default__content вместо.
— .slds-tabs_default > a используйте .slds-tabs_default__link вместо.
— .slds-tabs_scoped > slds-tabs__item используйте .slds-tabs_scoped__item вместо.
— .slds-tabs_scoped > slds-tabs__content используйте .slds-tabs_scoped__content вместо.
— .slds-tabs_scoped > a используйте .slds-tabs_scoped__link вместо.
— Устаревшее .slds--tooltip. Используйте .slds-popover_tooltip вместо.
— Устаревшие адаптивные классы .slds-nowrap_{size} из-за непоследовательного именования. Используйте .slds-{size}_nowrap вместо.
— Устаревший .slds-modal-backdrop и .slds-modal-backdrop_open в пользу .slds-backdrop и .slds-backdrop_open, чтобы повторно использовать в других компонентах.
— Устаревший .slds-col-rule_{position} классы из-за несогласованного именования. Вместо этого используйте .slds-col_rule-{position}.
Сайт IA — Добавьте начало работы > разметка и стиль руководства с информацией BEM.
Изменения — Скопируйте обновления компонентов, чтобы представить рекомендации по голосу и тону. Изменения:
Решено использование флага !default.
Изменён порядок токенов, чтобы приоритет отдавался большому форм-фактору.
Исправлена проблема с областью видимости для вкладок и активного состояния (ошибка #106).
Повышена специфичность активного состояния вкладки.
Выпуск 0.12.1 — 16 декабря 2015 года
SITE IA:
Изменения:
.slds-text-body_small наследует цвет темы (исправляет https://github.com/salesforce-ux/design-system/issues/123).dt и dd теперь могут принимать размеры утилит. Изменено поле на отступ.Новые компоненты:
<select> в различных браузерах (исправляет https://github.com/salesforce-ux/design-system/issues/122).Выпуск 0.12.0 — 18 ноября 2015 года
SITE IA:
Критические изменения:
dl с одиночными парами dt & dd. Заменены на spans.slds-modal-backdrop и slds-modal-backdrop_open устарели в пользу slds-backdrop и slds-backdrop_open, поскольку они используются в других компонентах..slds-input__icon, поэтому требуется дополнительный класс цвета значка.Изменения:
em вместо px.slds-text-error для ошибок проверки.Новые компоненты:
Устаревшее:
slds-modal-backdrop и slds-modal-backdrop_open устарели в версии 0.12.0, используйте slds-backdrop и slds-backdrop_open вместо них.slds-tabs_default > slds-tabs__item устарело в версии 0.12.0, вместо этого используйте slds-tabs_default__item.slds-tabs_default > slds-tabs__content устарело в версии 0.12.0, вместо него используйте slds-tabs_default__content. slds-tabs_default__content вместоОписание изменений в релизах.
Release 0.11.0 — 29 октября 2015 года
SITE IA
Критические изменения
(*) Код всё ещё находится в кодовой базе, но будет объявлен устаревшим, TBD, но предварительное удаление в выпуске 0.20.0.
Новые компоненты
Release 0.10.2 — 29 октября 2015 года
Release 0.10.1 — 21 октября 2015 года
Release 0.10.0 — 20 октября 2015 года
изменено .slds-button__icon для заливки цветов на использование значения currentColor для соответствия изменениям цвета текста;
обновлена демонстрация .slds-button_icon- и исправлено имя класса. Изменения
Добавлен новый вариант кнопки: .slds-button_destructive.
Убрано ограничение максимальной ширины (960px) для модальных окон > Large.
Добавлено новое состояние уведомлений в модальных окнах Notifications > Modal.
В Notifications > Toast добавлен класс .slds-no-flex к SVG (необходимо для применения модального приложения).
Изменены метка списка выбора и сам список на фиксированную ширину. Применено ограничение в 5 опций с максимальной высотой и переполнением списка.
Обновлён пакет @salesforce-ux/design-tokens до версии 1.3.1.
Пакет @salesforce-ux/design-system теперь включает каталоги /assets/icons и /assets/images.
Критические изменения
.slds-button_icon-border-small изменён на .slds-button_icon-x-small. Это согласуется с другими нашими именами иконок, которые отделяют размер от стиля..slds-button добавлен класс .slds-button_icon-inverse. Класс .slds-button__icon_inverse удалён из SVG внутри.Исправления ошибок
.slds-button_icon-* можно размещать на теге a, они выравниваются по центру..slds-button_icon-bare добавлены состояния :hover и :focus..slds-button_icon-border-small и .slds-button_icon-bare.overflow: auto;.Новые компоненты
Обновления SASS
<use xlink:href="..."></use>..slds, были добавлены или обновлены для следующих разделов:-vf)-ltng)-scoped)Множество обновлений доступности
Компоненты приведены в состояние готовности к разработке: группы кнопок, карточки, плитки, значки.
Поиск:
.slds-lookup__control устарел, теперь используется элемент управления .slds-form-element__control.Добавлен контейнер таблеток .slds-pill-container.
.slds-lookup.Таблицы данных
.slds-is-selected) и наведение курсора на строки исправлены.Табы
aria-controls с тем же ID в контейнере содержимого вкладки.Плитки > Автор и с иконкой имеют добавленный пустой атрибут alt.
Выбор даты > множественный выбор и формы > составная форма имеют элемент small, изменённый на span. Нижеследующий текст является переводом исходного текста.
Изменения в футере на div.
Множество исправлений ошибок и улучшений.
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )