Слияние кода завершено, страница обновится автоматически
.slds-has-focus.max-width из аккордеона при фокусе/наведении.margin-left в варианте «Переполнение меню».v10.8.3:
account_score, aggregate, app_form_participant, app_form_product_participant, cost_model, labels, list_fee, list_rate, party_profile, path_experiment, people_score, price_adjustment_schedule, price_adjustment_tier, program_cohort, program_cohort_member, rate_adjustment, record_consent, whatsapp.aggregate, array, bottom_group_alignment, cant_sync, center_group_alignment, columns, fully_synced, inner_join, join, left_join, not_in_sync, not_saved, outer_join, path_experiment, program_cohort, program_cohort_member, record_consent, right_join, skill, sync_in_progress, top_group_alignment.role="option" на div, оборачивающем индикатор загрузки.button до div.tabindex="0" к вышеуказанному div, чтобы сделать его фокусируемым.aria-describedby и title.slds-wcag в область видимости корневого селектора.v10.8.2:
custody_chain_entry, custody_entry_verification, custody_override, обновлены data_cloud, добавлены digital_verification_config_group, digital_verification_config, linked, prompt_builder, real_time, scheduling_workspace_territory, обновлено story, добавлены title_party, work_summary.add_above, add_below, обновлены apex_alt, asset_repossessed, data_cloud, einstein_alt, добавлен locked_with_additions. payment_deferred
Добавлено: plane, prompt_builder, real_time, record_collection, sparkle.
Обновлено состояние disabled для всех компонентов.
Добавлен атрибут aria-label="disabled" к компоненту RichTextEditor, который похож на RteToolbar.
Для компонента Pill добавлена кнопка для функции удаления. Теперь кнопка удаления фокусируема и кликабельна.
Обновлены стили RTL для компонента setup-assistant.
Добавлена новая тень для реализации нового стиля фокуса.
Компоненты
Release 2.22.2 — 9 ноября 2023 года
Компоненты
Release 2.22.1 — 2 ноября 2023 года
Компоненты
Release 2.22.0 — 16 августа 2023 года
Набор действий:
Набор утилит:
Обновления бренда для следующих цветов палитры:
— Обновлён атрибут role глобального значка справки о действии с «presentation» на «img» для лучшего соответствия требованиям доступности.
— Добавлен tabindex к точке индикатора непрочитанных сообщений в примере для использования в случае программного фокуса.
— Для примера без футера добавлен tabindex для использования в программном фокусе.
— Добавлен пример для состояния «Успех».
— К точке индикатора непрочитанных сообщений добавлен атрибут role="img" для соответствия правилам доступности при использовании aria-label.
— Исправлены опечатки в чертежах: — компоненты/флажок; — компоненты/вертикальная навигация.
— Из кода SCSS файлов удалён shorthand &_ из многочисленных селекторов. — Иконки обновлены до версии 10.3.0. — Стандартный набор: — добавлены slack, tableau и dashboard_component; — Набор утилит: — обновлены serialized_product_transaction и serialized_product; — добавлены data_model, slack, tableau, video_off.
— Ошибка компиляции sass из-за неопределённой операции исправлена. — Некорректные правила вычисляемого CSS-поля исправлены.
— Добавлена поддержка Large варианта для встроенных значков кнопок с помощью slds-button_icon-large.
— Убрана вертикаль выравнивания из не базовых вариантов кнопок для создания единообразия вертикального выравнивания всех кнопок.
— Легенда справа налево выровнена по правому краю и соответствует выравниванию содержимого. — Поля флажка правильно поддерживают RTL.
— Метка элемента формы поддерживает RTL макет путём удаления левого отступа и размещения его на противоположной стороне.
— Пример дополнен классом slds-modal__content_footless для ясности. — Добавлены пояснения относительно фокуса модального окна и заголовка для обеспечения доступности, а также изменён пример без футера для отображения tabindex.
— Аннотация @noflip удалена из нуббинсов. make RTL behavior consistent
.slds-input_faux > span для комбобокса только для выбора без заполнителя.--slds-c-icon-color-foreground Стилизация крючка для кнопки с вариантом значка для точного применения обновлений цвета значка..slds-einstein-header__figure).&_ из многочисленных селекторов в файлах SCSS.slds-пространственных имён Крючков.slds с резервными вариантами sds для Стилизации Крюков.slds по умолчанию с резервными вариантами sds для стилистических крючков.slds добавлено по умолчанию с резервными вариантами sds для Стилизации Крюков.slds добавлено по умолчанию с резервными вариантами sds для Стилизации Крюков.slds добавлено по умолчанию с резервными вариантами sds для Стилизации Крюков.Стилизация Крюков для Stateful Button и Dual Stateful Button.
Недостающие данные. Компоненты
Progress Ring: добавлена форма к кольцу прогресса, чтобы лучше визуально отображать значение не только цветом.
Radio Group: добавлено slds в качестве пространства имён по умолчанию с резервными вариантами sds для Styling Hooks. Добавлены переназначения пользовательских свойств CSS для вариантов и состояний. Изменён текст меток: теперь он не переносится под радиокнопку, а переходит на новую строку после предыдущей.
Rich Text Editor: добавлено slds как пространство имён по умолчанию с sds в качестве резервного варианта для Styling Hooks.
Select: добавлено slds как пространство имён по умолчанию с sds в качестве резервного варианта для Styling Hooks.
Slider: добавлено slds как пространство имён по умолчанию с sds в качестве резервного варианта для Styling Hooks. Переназначены пользовательские свойства CSS для вариантов и состояний (например, фокус, активное состояние, наведение).
Tabs: добавлено slds как пространство имён по умолчанию с sds в качестве резервного варианта для Styling Hooks. Переопределены Styling Hooks для состояний компонента.
Textarea: добавлено slds как пространство имён по умолчанию с sds в качестве резервного варианта для Styling Hooks. Переназначены пользовательские свойства CSS для вариантов и состояний.
Toast: добавлено slds как пространство имён по умолчанию с sds в качестве резервного варианта для Styling Hooks.
Tooltips: добавлено slds как пространство имён по умолчанию с sds в качестве резервного варианта для Styling Hooks.
Trees: добавлено slds как пространство имён по умолчанию с sds в качестве резервного варианта для Styling Hooks.
Версия 2.16.2 от 22 сентября 2021 года
Компоненты
Combobox: удалено свойство display: flex из .slds-combobox__form-element, которое было недавно добавлено для соответствия ARIA 1.2.
Input: удалено свойство width из .slds-input_faux, которое было добавлено недавно для соответствия ARIA 1.2.
Версия 2.16.1 от 25 августа 2021 года
Версия 2.16.0 от 12 августа 2021 года
В соответствии с рекомендациями ARIA 1.2 элемент input был заменён на button в следующих компонентах, содержащих только выбираемые поля со списком:
Добавлен инструмент настройки области действия SLDS: npm run slds:customizer.
Добавлена новая стандартная цветовая палитра для нейтральных цветов (чёрный/белый/серый).
Обновлён пакет @salesforce-ux/icons до версии 10.1.1.
Компоненты
Accordion: добавлен линк на руководство по взаимодействию с клавиатурой для обеспечения доступности.
Buttons: добавлено slds как пространство имён по умолчанию с sds в качестве резервного варианта для Styling Hooks. Переназначены пользовательские свойства CSS для вариантов и состояний (например, фокус, активное состояние, наведение).
Combobox: изменено slds-combobox__input с элемента input на элемент button согласно рекомендациям ARIA 1.2 для выбираемых полей со списком. Обновлено для соответствия ARIA 1.2, где эти атрибуты перемещены на ввод или кнопку в случае выбираемого поля со списком: role="combobox", aria-expanded, aria-haspopup="listbox". Изменено ограничение @restrict аннотации .slds-combobox__input: с .slds-combobox input на .slds-combobox__form-element input, .slds-combobox__form-element button. Аннотация .slds-combobox__input-value от .slds-combobox input к .slds-combobox__input
aria-label для предоставления полного текста даты в формате ДД ММ ГГГГ.aria-current="date", когда сегодняшняя дата попадает внутрь выбранного диапазона.aria-label для предоставления полного текста даты в формате ДД ММ ГГГГ;slds-input_faux для стилизации доступных только для чтения «входов», где это необходимо для обеспечения доступности, например, в комбинированном списке.aria-label в div с ролью progressbar для удовлетворения требований доступности.aria-label в div с ролью progressbar для удовлетворения требований доступности.aria-label в div с ролью progressbar для удовлетворения требований доступности.COLOR_BACKGROUND_SELECTION для лучшего цветового контраста.BRAND_BACKGROUND_PRIMARY.aria-pressed в кнопку переключения панели.aria-pressed к вариантам кнопок с отслеживанием состояния.aria-label и, альтернативно, aria-labelledby для добавления дополнительного контекста таблицы для программ чтения с экрана.aria-live со значения assertive на значение polite.aria-expanded к триггерам меню со значением, зависящим от состояния меню.color-background-success-dark.$color-background-inverse..slds-builder-header__item-action:
background-color на $color-background-inverse
color на $color-gray-1
aria-expanded в раскрывающийся элемент.slds-button_icon-warning для правильного стиля значков состояния Warning.line-height в стилях касания для использования назначения Styling Hook --sds-c-button-line-height.flex-basis на auto для метки зоны перетаскивания, чтобы исправить проблему макета в IE11..slds-section__title-action-icon.product_quantity_rules с голубого на зелёный (#04844B)..slds-page-header__col-title, .slds-page-header__col-actions, .slds-page-header__col-meta, .slds-page-header__col-controls. ### Панели.slds-panel__header-actions в заголовок панели для размещения вторичных действий, которые влияют на всю панель. В новом элементе можно найти кнопку закрытия.filterList), которая переключает панель с фильтрующим содержимым, двухколоночный макет содержимого и поведение переключения панели.aria-expanded и aria-controls добавлены к кнопке, которая переключает панель.open as a drawer) с filterList на toggle_panel_left. Новый значок лучше отражает действие, вызываемое значком кнопки.drilled-in state), который возвращает вас к предыдущей панели, с back на chevronleft. Это обновление делает значок согласованным между состояниями углубления.$color-background.slds-popover__header перемещён в slds-popover__body, добавлена оболочка объекта мультимедиа (Media Object) для соответствия варианту всплывающего окна с подсказкой.slds-popover__header..slds-popover_brand, .slds-popover_brand-dark, .slds-popover_brand-top, .slds-popover_brand-left, .slds-popover_brand-bottom, .slds-popover_brand-right.aria-selected заменён на aria-current="page".background-color из .slds-tabs_default, чтобы показать цвет поверхности родительского контейнера вкладок.chevronleft. Это унаследованное изменение от панелей, которое делает значок согласованным между состояниями углубления..slds-datepicker__filter_month. levels to 5 levels deep.
--sds-c-alert-color-text => --sds-c-alert-text-color.--sds-c-avatar-initials-color-text => --sds-c-avatar-initials-text-color.--sds-c-badge-color-text => --sds-c-badge-text-color.--sds-c-button-color-text => --sds-c-button-text-color.--sds-c-pill-color-text => --sds-c-pill-text-color.--sds-c-tabs-scoped-color-text => --sds-c-tabs-scoped-text-color.--sds-c-tabs-item-color-text => --sds-c-tabs-item-text-color.--sds-c-tooltip-color-text => --sds-c-tooltip-text-color.Добавлено:
Изменено:
Исправлено:
Изменено:
Изменено:
Добавлено:
Добавлено:
Добавлено:
Добавлено:
Изменено:
Добавлено:
Изменено:
Изменено:
Исправленное:
Изменённое:
<span class="slds-assistive-text">Текущий выбор:</span> из опций Listbox.Добавленное:
Исправленное:
Изменённое:
Добавлено:
Добавлено:
Добавлено:
Добавлено:
Добавлено:
Добавлено:
Исправлено:
Добавлено:
Добавлено:
Добавлено:
Изменено:
slds-truncate на специфический селектор slds-accordion__summary-content, чтобы содержимое обрезалось только на больших экранах.Добавлены примеры для отображения состояний успеха, предупреждения и ошибки.
Добавлено:
Добавлено:
Добавлено:
Добавлены примеры информационных, успешных, предупреждающих и ошибочных состояний.
Псевдоэлементы .slds-spinner, .slds-spinner__dot-… получили правило will-change: transform, которое ранее было у точек, чтобы исправить визуальное обрезание точек.
Исправленное:
— Удалён класс области видимости slds-is-mobile. Стили, связанные с касанием, теперь будут применяться автоматически через медиа-запрос функции обнаружения.
— В Blueprint теперь используются специальные файлы _touch.scss для стилизации контекста касания.
— Обновлены зависимости узлов для устранения уязвимостей. — Обновлено руководство проекта, чтобы рекомендовать использование среды разработки Storybook.
— Добавлены префиксы -moz и -webkit к правилам appearance: none.
— Создана санированная версия SLDS в .dist, которая не содержит обозначения BEM -- для модификаторов, удаляет устаревший код и импортирует только поддержку Lightning Web Components.
— Установлено значение access: global для следующих токенов:
— brandPrimary
— brandPrimaryActive
— brandPrimaryTransparent
— brandLight
— brandLightActive
— brandDark
— brandDarkActive
— brandAccessible
— brandAccessibleActive
— brandDisabled
— brandContrast
— brandContrastActive
— brandBackgroundPrimary
— brandBackgroundDark
— brandTextLink
— brandTextLinkActive.
— Теперь примитивные токены по умолчанию используют нашу тёплую серую цветовую палитру:
— PALETTE_GRAY_1: #ffffff
— PALETTE_GRAY_2: #fafaf9
— PALETTE_GRAY_3: #f3f2f2
— PALETTE_GRAY_4: #ecebea
— PALETTE_GRAY_5: #dddbda
— PALETTE_GRAY_6: #c9c7c5
— PALETTE_GRAY_7: #b0adab
— PALETTE_GRAY_8: #969492
— PALETTE_GRAY_9: #706e6b
— PALETTE_GRAY_10: #514f4d
— PALETTE_GRAY_11: #3e3e3c
— PALETTE_GRAY_12: #2B2826
— PALETTE_GRAY_13: #080707.
— Добавлено display: inline-flex и align-items: center к значку для центрирования содержимого по вертикали.
— Для сенсорных устройств обновите высоту строки токена .slds-button, чтобы использовать сенсорный токен $height-tappable (2,75rem), который является общесистемным сенсорным токеном, вместо использования токена, специфичного для компонента.
— Добавлено display: flex в .slds-card__header-title, чтобы включить усечение на содержащейся ссылке, которая уже имеет slds-truncate.
— Исправлена проблема, из-за которой некоторые контейнеры текстовых сообщений имели ширину, равную метасообщению сообщения, хотя контейнер содержал меньше текста и должен был иметь меньшую ширину.
— Представлен новый базовый план для кнопки-флажка под названием .slds-checkbox-button, который улучшает настройку значков, обработку состояний и составление плана.
— .slds-checkbox_add-button устарел в пользу .slds-checkbox-button (см. «Добавления» выше).
— Документация обновлена, чтобы отразить новый план .slds-checkbox-button.
— Обновили цвет фона выбранного состояния кнопки-флажка с $color-background-success на $color-brand-darker, поскольку кнопка-флажок предназначена для передачи выбранного состояния, а не успеха.
— На мобильных устройствах группы кнопок-флажков располагаются вертикально, чтобы учесть ограниченное горизонтальное пространство мобильных экранов. Фиксированный
.slds-checkbox-button вместо устаревшего .slds-checkbox_add-button.<div> сгруппированного поиска:
role="combobox"aria-haspopup="listbox"aria-expanded="true"<input> сгруппированного поиска aria-controls, установленный на идентификатор соседней таблицы.<input> сгруппированного поиска с combobox на textbox.slds-media вокруг slds-media__figure и slds-media__body, чтобы исправить выравнивание значков.$height-tappble (2rem) для повышения удобства использования..slds-tabs-mobile__item, поэтому цвет текста не меняется при нажатии для мобильных устройств (цвет фона всё ещё меняется при нажатии)..slds-line-clamp — ограничивает 3 строки, значение задаётся токеном line-clamp..slds-line-clamp_small — ограничивает 3 строки..slds-line-clamp_medium — ограничивает 5 строк..slds-line-clamp_large — ограничивает 7 строк.slds-is-mobile. Класс области видимости должен быть применён к элементу html/body.slds-accordion__summary-action-icon, позволяющий вращать значок в правильном направлении в языках с письмом справа налево.:hover и :active состояний..slds-app-launcher__tile использует $brand-accessible для своего состояния :hover и $brand-accessible-active для своего состояния :active.slds-button, который является дочерним компонентом группы кнопок.slds-button_icon с изменением display: inline-flex на slds-button.slds-button на inline-flex.display: inline-flex на slds-button..slds-button_stretch применяется justify-content: center, чтобы обеспечить центрирование текста после добавления inline-flex в slds-button.$button-line-height-touch (2.65rem)..slds-button__icon равным $square-icon-medium-content (1rem)..slds-card__header-title равным $var-font-size-6 (1.125rem)..slds-card__header-title всегда жирным, независимо от того, содержит он ссылку или нет..slds-chat-event__rule больше не используется и помечен как устаревший..slds-chat-list..slds-chat-bookend, чтобы компенсировать отрицательные поля, используемые для того, чтобы конец охватывал всю ширину.$square-tappable-x-small (1,5rem)..slds-checkbox__label до $height-tappable (2,75rem) и отцентрируйте с помощью свойств flex.font-size встроенной метки до $font-size-5 (1rem)..slds-checkbox_standalone до $height-tappable (2,75rem), чтобы он соответствовал увеличенному целевому размеру тапа..slds-checkbox_standalone, увеличьте целевой размер тапа ввода флажка.opacity: 0.$square-tappable (2,75rem) и выровняйте дочерние элементы с помощью свойств flex..slds-checkbox_button до $height-tappable (2,75rem).font-size текста метки на $font-size-5 (1rem).font-size .slds-checkbox_faux_container до $font-size-2 (0,75rem).text-transform: uppercase из стандартных и пользовательских вкладок.body.slds-th__action-button, теперь используется margin-top вместо transform: translateY.aria-disabled="true", чтобы улучшить доступность и помочь пользователям. Заголовок, добавлен класс slds-modal__title для объявления стилей заголовка модального окна.Для сенсорных устройств:
$font-weight-bold;$height-tappable (2.75rem).$height-tappable (2.75rem);.slds-picklist input[readonly] для исправления стиля устаревшей разметки;.slds-pill до $height-tappable-small (2rem) и изменено горизонтальное заполнение на $spacing-small (0.75rem);$spacing-xx-small (0.25rem);$spacing-xx-small (0.25rem);.slds-pill__label на $font-size-4 (0.875rem);.slds-pill__action;@noflip к селекторам левого и правого нуббинов.как вертикальный вариант обрабатывает компоновку своих индикаторов, так что смещение пикселей становится устаревшим (например, margin-left: 1px на .slds-progress__item.slds-is-completed .slds-progress__marker_icon);
для сенсорных устройств увеличен размер таргета содержащихся кнопок .slds-button до высоты, равной $height-tappable (2,75rem), с использованием псевдоэлемента :before;
увеличены размеры иконки и маркера до $square-tappable-xx-small (1.25rem);
для вертикального варианта увеличен размер шрифта до $font-size-4 (0,875rem).
.slds-radio__label до $height-tappable(2.75rem);$square-tappable-x-small (1,5rem);slds-rich-text-editor__select_x-small и slds-rich-text-editor__select_xx-small)..slds-tabs-mobile__item изменён на Gray Color 12;.slds-tabs-mobile__item, чтобы цвет текста не менялся при нажатии (цвет фона всё ещё меняется при нажатии).slds-tree__item для размещения тени блока в правильном месте в языках справа налево;slds-tree__item slds-button__icon для поворота значка в нужном направлении в языках справа налево.slds-nav-vertical__action_overflow slds-button__icon, чтобы позволить значку вращаться. Откорректированы псевдоэлементы, чтобы события кликов проходили через них
— Исправлена проблема, из-за которой элемент навигации терял цвет фона при активации и/или наведении курсора.
— Убрана анимация при вызове активной вкладки.
— Скорректирован z-индекс для состояний наведения и фокусировки, чтобы они не перекрывали модальные оверлеи и глобальный заголовок.
— Исправлен сбой сворачивания при применении slds-assistive-text к slds-card__header.
— Решена проблема, когда метки флажков с выравниванием по левому краю становились сжатыми.
— IE11: проблемы с макетом в модальном окне.
— Вертикальное выравнивание содержимого slds-welcome-mat__info-content в IE11.
— Обновлён заголовок аккордеона, чтобы он реагировал на настройки плотности пользователя.
— Добавлен slds-button_icon-small к кнопке закрытия предупреждений, чтобы исправить размер цели клика. — Улучшен контраст состояний фокуса и наведения на ссылки и кнопки в предупреждениях.
— Добавлена новая схема и документация для компонента «Группа аватаров», который используется для информирования пользователей о том, что с элементом связано более одного человека.
— Примеры для всех цветовых вариантов с размещением слева и справа. — Обтекание элемента slds-badge__icon для позиционирования и окрашивания значков.
— Увеличен размер шрифта до 12 пикселей, применён жирный шрифт и удалён верхний регистр в .slds-badge.
— Применён жирный шрифт к '.slds-breadcrumb__item`.
— Удалено '.slds-text-title_caps` из списка элементов хлебных крошек.
— Классы slds-button_first, slds-button_middle и slds-button_last, которые нацелены на положение каждой кнопки внутри группы кнопок.
— Поддержка состояния отключённых кнопок с иконками.
— Новая вариация Dual Stateful, которая действует аналогично Toggle Button, используя класс slds-button_dual-stateful. — Эта вариация переключается между стилем нейтральной кнопки и кнопкой бренда. — Модификатор slds-button_stretch для адаптации любого стиля кнопки под 100% ширину контейнера. — Примеры ссылок, похожих на кнопки (использовать умеренно).
— Обновлена стилизация отключения для кнопок успеха, деструктивных и контурных брендов, чтобы она была одинаковой для всех вариантов.
— Предотвращено наведение курсора на кнопки успеха при отключении.
— Добавлен aria-hidden="true" к аватару для входящих сообщений чата, чтобы избежать дублирования имени пользователя для пользователей программ чтения с экрана. unchecked image based checkbox example view mode checkbox - unchecked
Добавлен пример чекбокса на основе изображения в непроверенном состоянии [view mode checkbox — проверено] (/components/checkbox/?state=view-mode-checked&variant=form-element).
Combobox Добавлено: — добавлено slds-listbox__option-header для увеличения размера шрифта до 14 пикселей и применения жирного начертания шрифта к заголовкам опций списка. — добавлен новый вариант для combobox, который использует диалоговое окно для выпадающего списка для ситуаций, таких как множественный выбор.
Удалено: — удалено slds-text-title_caps из заголовков опций списка.
Data Tables Изменено: — применено жирное начертание шрифта к элементам th в заголовках таблиц.
Удалено: — удалено slds-text-title_caps из заголовков таблиц.
Dynamic Menu Добавлено: — добавлено slds-dynamic-menu__header для увеличения размера шрифта до 14 пикселей и применения жирного начертания шрифта.
Удалено: — удалено slds-text-title_caps из заголовков динамических меню.
Files Исправлено: — выровнены состояния hover и focus, чтобы они имели одинаковые стили. — добавлено «Предварительный просмотр:» в качестве доступного текста через утилиту slds-assistive-text.
Form Element Добавлено: — добавлены классы форм для строк и столбцов, slds-form__row и slds-form__item. — добавлено slds-form-element_stacked для управления сложенными элементами формы. — добавлено slds-form-element_horizontal для управления горизонтальными элементами формы. — добавлено обозначение класса slds-is-edited, если элемент формы был отредактирован, но не сохранён. — добавлено оформление кнопки отмены slds-form-element_undo для переноса значка кнопки отмены, когда элемент формы был отредактирован, но не сохранён. — добавлена поддержка одностолбцовых горизонтальных элементов формы с использованием slds-form-element_1-col, используемых для перераспределения соотношения метки и элемента управления. — добавлено управление составными элементами формы slds-form-element_compound. — добавлено использование slds-form-element_address для конкретных составных элементов формы адреса. — добавлен чекбокс на основе изображений для записи формы.
Изменено: — добавлено пространство вокруг slds-form-element в зависимости от настроек уплотнения. — теперь метки форм переносятся при превышении доступного пространства контейнера меток без пробелов в слове.
Устарело: — устарело slds-form_stacked в пользу slds-form-element_stacked. — устарело slds-form_horizontal в пользу slds-form-element_horizontal. — устарело slds-form_compound в пользу slds-form-element_compound.
Global Header Удалено: — удалено slds-text-title_caps из меню заголовков.
Global Navigation Добавлено: — панель навигации с вкладками теперь может отображать 3 различных статуса для оповещения пользователей — ошибка, успех и предупреждение.
Удалено: — удалено slds-text-title_caps из меню заголовков.
Input Исправлено: — решена проблема, когда элементы slds-input__icon_left и .slds-input__icon были расположены над метками в горизонтальных элементах формы.
Menus Добавлено: — 3 уровня статуса для пунктов меню, чтобы предупредить пользователя — ошибка, успех и предупреждение.
Изменено: — увеличен размер шрифта до 14px и применено жирное начертание в slds-dropdown__header.
Удалено: — удалено slds-text-title_caps из подзаголовков меню.
Page Headers Изменено: — обновлено заполнение для slds-page-header с использованием направленно-зависимых переменных токенов заполнения. — обновлены поля «Запись дома» на slds-page-header__detail-row для правильного использования направленно-зависимых переменных токенов заполнения.
Path
Изменено:
— увеличены размер шрифта до 14px, применено жирное начертание и удалено. slds-modal. Чтобы обновить существующий welcome mat, в slds-modal замените slds-welcome-mat на slds-modal_small, а также удалите slds-welcome-mat__content из slds-modal-container. Необходимо внести изменения в структуру разметки существующего кода. Сначала оберните существующее содержимое <div class='slds-modal-container'> в <div class='slds-welcome-mat__content slds-grid'>. Затем оберните <div class='slds-welcome-mat__content slds-grid'> в <div class='slds-welcome-mat'>.
— Исправлено вертикальное выравнивание slds-welcome-mat__info-content в IE11.
— Добавлена документация с подробным описанием значений классов переменной плотности в режимах Comfy и Compact.
— Добавлена документация с подробным описанием значений классов переменной плотности в режимах Comfy и Compact.
— Теперь метки форм будут переноситься при переносе слов без пробелов, если слово превышает доступное пространство контейнера метки.
— Устранена проблема неправильного переноса элементов таблицы внутри редактора форматированного текста.
— Добавлен slds-form-element_address для адресных составных элементов формы.
— Решена проблема, когда пустые элементы формы сворачивались в режиме просмотра.
— Решена проблема, когда содержимое Rich Text выходило за пределы контейнера элемента формы в IE11.
— Исправлена проблема, когда отсутствующие cssProperties вызывали проблемы компиляции.
— Удалено font-weight: 300 из заголовка приложения для улучшения читаемости.
— Уменьшен размер шрифта slds-page-header__title до 18 пикселей.
— Переработан дизайн страницы Design Tokens с добавлением обозначений GA и Internal и значков «Новый». — Добавлены примечания к выпуску на отдельные страницы компонентов. — Улучшена доступность ссылок на нашем сайте. — Добавлены новые рекомендации по дизайну для Builders и Empty States. — Деревья перенесены в отдельную категорию, вместо того чтобы быть включёнными в Trees. — Добавлены токены переменного интервала для поддержки новых настроек уплотнения.
— Из элемента slds-accordion__summary-heading удалён класс размера текста с жёстко заданной утилитой, slds-text-heading_small.
— HTML изменён таким образом, что значок кнопки можно вставить в элемент slds-notify__close.
— Кнопки с новым синтаксисом BEM, используемые в компонентах с инвертированной тематикой, больше не имеют переопределённого цвета текста.
— Обновлена разметка плитки для повышения доступности и добавлены функции.
— Внешний элемент заменён с <a/> на <div/>, и aria-describedby удалён.
— Схват заменён на кнопку состояния, которая теперь является клавиатурой. Доступный элемент управления с возможностью перетаскивания. Пожалуйста, ознакомьтесь с новым разделом в документации о конкретных деталях реализации (https://www.lightningdesignsystem.com/components/app-launcher/#Reordering-tiles-via-drag-and-drop).
— Изменён HTML, чтобы компонент Avatar можно было вставить внутрь href вместо того, чтобы быть элементом href.
— Вложенные элементы inline и inline-block теперь получают правильное вертикальное выравнивание.
— Обновлены рекомендации по дизайну и примечания к дизайну.
— При использовании фирменной кнопки и значка фирменной кнопки в группе кнопок теперь появляется разделитель 1px. — Добавлен компонент Button Group Row (https://www.lightningdesignsystem.com/components/button-groups/?variant=row), который обеспечивает интервал между каждым элементом, содержащим кнопку.
— Добавлены заголовок и вспомогательный текст к большинству примеров значков кнопок.
— Модификатор slds-button_text-destructive, который оформлен как инвертированная кнопка slds-button_descructive. — Селектор для псевдокласса :disabled.
— Устарел класс slds-button__icon_stateful, который находился на svg внутри кнопки. Вместо этого используйте компонент Button Icon с модификатором размера small, slds-button__icon slds-button__icon_small.
— Заменены токены интервала переменными токенами интервала для реагирования на настройку уплотнения пользователя.
— Поменяны значения aria-hidden на панелях карусели. В предыдущих версиях значения true и false для aria-hidden были случайно поменяны местами — aria-hidden: true была помещена на открытые панели, и наоборот. Теперь это исправлено с использованием правильных значений для открытых и закрытых панелей. — Исправлена ошибка, из-за которой панели карусели неправильно отображались в IE11.
— Теперь компонент файла (изображения и типы содержимого файлов) изначально поддерживается во входящем и исходящем сообщении.
— Исходящее сообщение, содержащее строку текста короче максимальной ширины, больше не имеет ненужного пробела. — Удалено ненужное пространство при отправке сообщений с небольшим количеством текста (.например, «Привет».).
— Добавлена версия для флажка внутри стандартного элемента формы (https://www.lightningdesignsystem.com/components/checkbox/?variant=form-element).
— Решена проблема №556 путём увеличения размера шрифта на метках флажков, чтобы они соответствовали меткам радиокнопок.
— Добавлен пример отмеченной и отключённой кнопки флажка.
— Повышен контраст между символом плюса и цветом фона для отключённой кнопки флажка.
— Добавлен slds-listbox__option-icon для использования в качестве контейнера, сохраняющего размеры значка при его удалении из HTML.
— Увеличен z-индекс значка сущности, когда сделан выбор, чтобы значок всегда был поверх поля ввода. — Исправлено выравнивание значка выпадающего списка в переключателе объектов. — События щелчка больше не предотвращаются в сгруппированном комбинированном списке в Firefox. Добавлено:
Добавлена скрытая вариация заголовка таблицы данных. Это включает в себя добавление класса slds-table_header-hidden к тегу <table> и использование класса slds-assistive-text для тега <thead>, чтобы обеспечить доступность таблицы.
Для таблиц данных с множественным выбором теперь требуется применять атрибут aria-multiselectable="true" к элементу table как для вариантов расширенного, так и для встроенного редактирования.
Теперь для таблиц данных с множественным выбором необходимо устанавливать атрибут aria-selected в значение false для каждой строки, которая не выбрана.
Изменено:
Исправлено:
Добавлено:
Изменено:
Элемент slds-dueling-list обёрнут элементом slds-form-element__control.
Метка больше не имеет класса slds-text-title_caps.
Изменено:
Добавлено:
Изменено:
Изменено:
Промежуточные токены заменены на переменные промежуточные токены, которые реагируют на настройку уплотнения пользователя.
Высота уменьшена, чтобы минимизировать пробелы.
Добавлено:
Новый класс sld-file_loading для состояния загрузки. В попытке предотвратить применение стилей при наведении курсора мыши к состоянию загрузки, slds-file_loading теперь добавляется к slds-file.
Класс slds-has-title используется, когда к файлам применяется заголовок. slds-has-title теперь добавлен к slds-file, чтобы гарантировать, что значок предварительного просмотра (отображаемый в состоянии наведения) правильно центрирован. Этот класс не следует добавлять при использовании slds-file_overlay.
z-index добавлен к заголовкам и действиям для состояний без загрузки. Это попытка сохранить новые стили наложения при наведении мыши от покрытия заголовка и действий, чтобы они оставались доступными для нажатия.
Изменено:
Новое оформление дизайна для состояния наведения. box-shadow и transition были заменены наложением и абсолютно центрированным значком предварительного просмотра. Это состояние наведения не отображается на устройствах, которые его не поддерживают (например, мобильных). Обратите внимание, что это влияет на устройства, поддерживающие как наведение (например, сенсорное), так и ввод без наведения (например, мышь), такие как Microsoft Surface.
Новая опция для состояния загрузки. Добавлен вариант загрузки для файлов с заголовком и без него.
Улучшено:
Добавлено:
Поддержка выравнивания по левому краю для меток компонентов с иконкой справки и обязательным символом «звёздочка».
Поддержка выравнивания по левому краю меток для элементов fieldset и legend.
Применён класс slds-form-element__readonly для применения соответствующего стиля, когда элемент формы находится в режиме просмотра.
Изменено:
Общая высота всех элементов формы в режиме просмотра уменьшена.
Метки выровнены по левому краю при использовании slds-form_horizontal.
HTML изменён таким образом, что составная форма slds-form-element__group заключена в slds-form-element__control.
Изменён HTML, переместивший обязательный символ «звёздочка» внутрь элемента legend.
Изменён HTML, переместивший иконку справки рядом с меткой. Элемент legend
Глобальный заголовок (Global Header)
Изменения:
Глобальная навигация (Global Navigation)
Изменения:
Исправления:
Иконки (Icons)
Добавления:
Исправление:
Иллюстрация (Illustration)
Добавление:
Конструктор списков (List Builder)
Добавления:
Изменение:
Карта (Map)
Добавления:
Исправления:
Заголовки страниц (Page Headers)
Дополнения:
Изменения:
Устаревшие:
slds-panel__header_align-center.flex-shrink.slds-path_has-coaching на элемент контейнера slds-path для добавления поддержки различий в интервалах между коучингом и отсутствием коучинга.slds-flip_vertical из открытого состояния slds-path__trigger и вместо этого используйте наш новый класс slds-path__trigger_open, чтобы задать направление открытого состояния кнопки со стрелкой.slds-nubbin_*-corner добавлены для размещения элементов нуббинов в углу всплывающего окна.word-wrap: break-word.slds-popover_small увеличиваться больше ожидаемой ширины.display: none.border-radius в текстовой области.slds-form-element__control, чтобы можно было выровнять метки по левому краю.slds-tabs_medium и slds-tabs_large для изменения размера шрифта и интервалов элементов вкладок.slds-tabs_scoped__overflow-button для вкладок с переполнением, чтобы компонент меню кнопок мог быть вставлен внутрь элемента вкладки.Setup Assistant Изменённое: — Обновлены шаги помощника настройки для использования нового кольца заполнения прогресса (https://lightningdesignsystem.com/components/progress-ring/?example=progress-ring-partially-filled&variant=base).
Slider Исправленное: — Исправлена ошибка, из-за которой фон слайдера не отображался в IE11.
Split View Изменённое: — Заменяющие токены интервала на переменные токены интервала для реагирования на настройку уплотнения пользователя.
Tabs Добавленное: — Добавлены slds-tabs_medium и slds-tabs_large для изменения размера шрифта и интервала элементов вкладки. — Добавлена анимация при активации элемента вкладки. — Добавлен slds-tabs_default__overflow-button к вкладкам с переполнением, чтобы компонент кнопки меню можно было вставить внутрь элемента вкладки. — Расширена документация по мобильным вкладкам, включая панели. При переходе к мобильной вкладке панель скользит, показывая содержимое этой вкладки. Подробнее см. раздел «Вкладки на мобильных устройствах» (https://lightningdesignsystem.com/components/tabs/#On-Mobile). — Анимации и переходы для состояний :hover и slds-is-active. Изменённое: — Заменяющие токены интервала на переменные токены интервала для реагирования на настройку уплотнения пользователя. — Убраны заглавные буквы в элементах вкладок. — Убрано межбуквенное расстояние в элементах вкладок. — Увеличена высота полосы, когда вкладка активна. — Изменён HTML на примере «Переполненные элементы» (https://lightningdesignsystem.com/components/scoped-tabs/?example=overflowing-items&variant=base), так что компонент меню кнопок является триггером меню переполнения. Исправлено: — Обновлено slds-tabs-mobile, чтобы по умолчанию иметь белый фон вместо прозрачного. — Улучшен цветовой контраст текста подвкладки, когда она находится в фокусе. — Ошибка проверки HTML в индикаторах подвкладок, заменён div на span.
Textarea Исправлено: — Удалено box-shadow, добавленное Firefox для всех обязательных полей. По умолчанию Firefox добавлял box-shadow ко всем полям, помеченным как обязательные. Теперь это нормализовано, чтобы соответствовать стилю во всех других браузерах.
Toast Изменённое: — Поменяны значения роли тостов с alert на status. Исправлено: — Повышена контрастность между значками и жёлтым фоном в предупреждающих тостах. — Кнопки с новым синтаксисом BEM, используемые в компоненте с инверсной тематикой, больше не имеют переопределённого цвета текста.
Tree Grid Добавлен: — Флажки в крайнем левом столбце были добавлены в древовидные сетки с множественным выбором. — Древовидные сетки с множественным выбором теперь требуют применения aria-multiselectable="true" к элементу table. — В древовидных сетках с множественным выбором теперь требуется установить aria-selected в значение false для каждой строки, которая не выбрана. — Были добавлены древовидные сетки с одиночным выбором в качестве примеров. — Были добавлены безголовые древовидные сетки. — Были добавлены древовидные сетки без границ. Изменено: — Древовидная сетка теперь лучше согласуется с компонентом молнии, который является расширением расширенной таблицы данных (https://www.lightningdesignsystem.com/components/data-tables/?modifiers=.slds-table_bordered&variant=advanced).
Trees Изменено: — Удалён aria-selected из примеров, поскольку это необходимо только в том случае, если дерево поддерживает множественный выбор. — Удалён role="application" из дерева верхнего уровня. Исправлено: — Заменено slds-size_1-of-1, окружающее метку дерева, на slds-has-flexi-truncate, чтобы предотвратить переполнение метки границей дерева.
Trial Bar Исправлено: — Кнопки с новым синтаксисом BEM, используемые в компоненте с инверсной тематикой, больше не имеют переопределённого цвета текста. Из текста запроса:
of Warning and Error icons. (cd98ab6) 1) Research showed that the ban icon best represented an error for our users, so we switched the error and ban icons. The new error icon is the circle with a diagonal slash through it. 2) We also realized that we used the same icon for both error and warning states in many components, so we updated components that were using the warning icon in red as an error state to use the new error icon.
Перевод:
О значках Warning и Error. (cd98ab6): 1. Исследования показали, что значок запрета лучше всего представляет ошибку для наших пользователей, поэтому мы поменяли значки ошибки и запрета местами. Новый значок ошибки — это круг с диагональной чертой через него. 2. Мы также поняли, что использовали один и тот же значок как для состояния ошибки, так и для предупреждения во многих компонентах, поэтому обновили компоненты, которые использовали значок предупреждения красным цветом в качестве состояния ошибки, чтобы использовать новый значок ошибки. ### Button Icon
Path:
slds-is-active и slds-is-complete, чтобы предотвратить переопределение.Radio Group и Radio Button Group:
value.Rich Text Editor:
slds-form-element__help.slds-rich-text-editor__spacing-wrapper, добавлена к slds-rich-text-editor__select.Trees:
Utilities:
slds-hide и slds-hidden получили значение !important.Vertical Tabs:
Visual Picker:
Токены
$color-text-success изменено.$color-text-link изменено.Изменения в версии 2.5.3 от 13 марта 2018 года
Изменения в версии 2.5.2 от 8 февраля 2018 года
Изменения в версии 2.5.1 от 19 января 2018 года
Изменения в версии 2.5.0 от 9 января 2018 года
Новые функции:
Дуэльный список выбора:
Расширяемый раздел:
Глобальная навигация:
slds-has-sub-tabs (d99332b).Ввод:
slds-input__icon (cb3fe60).Поиск:
Меню:
slds-dropdown_xx-small использован правильный токен (0569d6d).Модальное окно:
Таблетки:
Всплывающие окна:
Редактор форматированного текста:
Табы:
Деревья:
role=gridcell добавлен к элементам TD дерева (f94d3dd).Утилиты:
slds-text-link_faux (#505).Вертикальная навигация:
$size-xxx-small для компонентов пользовательского интерфейса (69d0eb2).Версия 2.4.6 — 22 ноября 2017 г.
Версия 2.4.5 — 14 ноября 2017 г.
Версия 2.4.4 — 17 октября 2017 г.
padding-left и padding-right исправлены для вложенных slds-card__header и slds-card__footer с slds-card_boundary.Версия 2.4.3 — 19 сентября 2017 г.
Добавлен компонент «Аккордеон» — Аккордеон.
Кнопка
Классу stateful button добавлен класс slds-is-selected-clicked для обработки события клика на кнопке с отслеживанием состояния — Кнопка с отслеживанием состояния.
Комбобокс
Добавлен компонент комбобокса — Комбобокс.
Закреплённая служебная панель
Добавлена поддержка двухстрочных элементов закреплённой служебной панели.
Дуэльный пиклст
Переименован из мультиселекта в «дуэльный пиклст» — Дуэльный пиклст.
Динамические иконки
Расширяемый раздел
Ввод
slds-has-input-focus, который обеспечивает стили фокуса на элементе.Поиск
Используется новый HTML комбобокса.
Меню
slds-dropdown—fluid, чтобы ширина выпадающего меню соответствовала ширине контейнера..slds-rich-text-editor__output.slds-pill_link добавлен для изменения таблетки, когда мы хотим, чтобы гиперссылка занимала 100 % доступной таблетки.slds-pill—link добавлен атрибут slds-pill__action.Путь
Переименован в «Процесс».
Пиклст
Использует новый HTML комбобокса.
Таблетки
Всплывающее окно
slds-popover_walkthrough-alt, чтобы изменить фон всплывающего окна с обзором — Всплывающее окно с обзором.Индикатор выполнения
Добавлен индикатор выполнения — Индикатор выполнения.
Редактор форматированного текста
Счётчик
Вариант счётчика XXS — Счётчик.
Разделенный список просмотра
Добавлен разделенный просмотр — Разделенный просмотр.
Визуальный выбор
Добавлен визуальный выбор — Визуальный выбор.
Вертикальная навигация
Видимость
Улучшены классы видимости для адаптивного дизайна — #429 (спасибо @3den!).
Следующие проблемы теперь решены:
Исправлен ::-ms-clear, чтобы удалить встроенную кнопку очистки в IE.
Теперь требуется использовать slds-truncate вместе с атрибутом [title].
Значок компонента «Предупреждение» теперь содержится в slds-icon_container.
К компоненту значка кнопки теперь необходимо применять slds-button—icon к элементу <button />. Раньше использовались slds-button—icon-inverse, slds-button—icon-container, slds-button—icon-border, slds-button—icon-border-filled, slds-button—icon-border-inverse, slds-button—icon-more и slds-button—icon-error в сочетании с классом slds-button, но теперь требуется, чтобы slds-button—icon был частью этой группы классов.
К компоненту кнопки с отслеживанием состояния теперь необходимо применять slds-button—stateful к элементу <button/>.
Значок компонента тоста теперь содержится в slds-icon_container.
Значок «сущность» компонента заголовка страницы теперь содержится в slds-icon_container.
Примеры компонента ленты «Пост» были... Обновлено для включения в список slds-feed
Пример макета составной формы был обновлён, чтобы каждый fieldset правильно использовал класс slds-form-element, и вся форма теперь содержится в slds-form—compound.
Если HTML-вывод представлен в виде списка — ul, ol или dl — все примеры были обновлены, чтобы использовать slds-bottom—[position] вместо slds-has-divider—[position].
Всякий раз, когда используется slds-dropdown, он должен содержаться внутри элемента с именем класса slds-dropdown-trigger.
Когда используются slds-form—stacked, slds-form—horizontal и slds-form—compound, они должны использоваться вместе с slds-form.
При использовании slds-icon-text-default, slds-icon-text-warning или slds-icon-text-error они должны использоваться совместно с slds-icon.
Исправлена ошибка, из-за которой имя класса, соответствующее значку task2, было неправильно названо «task-2».
Стиль :focus для таблиц данных ограничен slds-table.
Устранена проблема, при которой вспомогательный текст в родительском элементе с text-transform: uppercase читался как полный регистр (например, «Отсортировано по возрастанию» в заголовках таблиц данных читалось как «СОРТИРОВАНО ПО ВОЗРАСТАНИЮ»).
Скруглённые углы были удалены из служебных значков, чтобы они больше не обрезались неправильно.
Хлебные крошки теперь переносятся должным образом.
Состояние фокуса для таблеток было перенесено на содержащий элемент, а не только на текст внутри таблетки.
Обновлён z-индекс закреплённой панели инструментов до 4, чтобы она хорошо сочеталась с другими элементами.
Предотвращено сворачивание закреплённого содержимого композитора в Safari.
Обновили стиль курсора для отключённого состояния групп радиокнопок.
Следующие функции отмечены как устаревшие в этом выпуске и будут удалены через три выпуска:
В дизайн компонентов внесены следующие обновления:
Были внесены следующие изменения в токены:
Были сделаны следующие изменения, чтобы сделать наш продукт более доступным:
Обновлена разметка элемента «listbox», чтобы сделать заголовки групп опций доступными, в соответствии с требованиями Picklist:
Исправлена ошибка в разметке элементов «option» списка, чтобы не оборачивать элементы «div» элементами «span».
Далее в тексте идёт описание изменений в меню, модальных окнах, панелях и других элементах интерфейса. Однако без контекста сложно понять, о чём именно идёт речь. Добавлено:
Атрибут role="textbox" добавлен к элементу input.
Из элемента input удалён атрибут aria-owns, так как элемент listbox не является дочерним элементом для роли combobox.
В элементе input изменён атрибут type на text.
Изменён атрибут title кнопки триггера расширения, чтобы он соответствовал тексту кнопки.
Идентификатор перемещён из slds-dropdown__list в slds-dropdown с ролью listbox.
Реализован компонент Listbox of Pills для состояний Multi Select.
Таблетки (Pills):
title ко всем значкам или аватарам в таблетке.Всплывающие окна (Popovers):
Всплывающим окнам без заголовков применяется атрибут aria-label к диалоговому окну.
Заголовок панели «Tesla Motors» изменён на h2.
Ко всем всплывающим окнам добавлены кнопки закрытия.
Обновлены рекомендации по реализации.
Индикатор прогресса (Progress Indicator):
Атрибут aria-describedby применяется к маркерам только при отображении всплывающей подсказки.
Во примере модального окна порядок DOM фиксирован для соответствия визуальному порядку.
Обновления для slds-progress-bar:
role="progressbar";aria-valuemin="0", aria-valuemax="100" для того, чтобы сделать индикатор прогресса процентным;aria-valuenow для отслеживания текущего прогресса.Запрос (Prompt):
alertdialog добавлен идентификатор к slds-modal__content для работы aria-describedby.Издатель (Publisher):
Определение списка «To: My Followers» стало частью поля комментария label как строки для создания более понятной метки.
Действия издателя не фокусируются, когда скрыты.
Выбор (Select):
required.Вкладки (Tabs):
tabpanels во вкладках.Вертикальная навигация (Vertical Navigation):
Теперь использует элемент <nav /> в качестве родительского.
Элементу nav добавлен атрибут aria-label, чтобы его можно было легко идентифицировать среди других навигационных областей на той же странице.
Активной ссылке добавлен атрибут aria-current="page".
Утилиты — список (Utilities — List):
slds-table_resizable-cols в качестве модификатора для slds-table. Используется, если таблица поддерживает изменение размера столбцов.slds-table_fixed-layout с базовой таблицей — #396.Доступны следующие компоненты:
Доступны улучшения сайта:
Доступны новые компоненты:
Доступны следующие классы:
slds-float_none — Утилиты › Плавающие элементы › Float None;slds-button_icon-container-more — Кнопки с иконками › Кнопка с выпадающим списком и иконкой;slds-button_icon-more-filled для кнопок, которым требуется фон;slds-text-color_inverse — Утилиты › Текст › Цвет;slds-text-color_inverse-weak — Утилиты › Текст › Цвет;slds-is-absolute для переопределения стандартного позиционирования компонента — Утилиты › Позиционирование › Абсолютное;slds-border_bottom — Утилиты › Границы › Нижняя граница;slds-border_left — Утилиты › Границы › Левая граница;slds-border_right — Утилиты › Границы › Правая граница;slds-border_top — Утилиты › Границы › Верхняя граница;slds-box_xx-small — Утилиты › Темы › Box;slds-dropdown с помощью модификатора slds-dropdown_inverse;Изменения
В этом выпуске были внесены следующие изменения:
slds-type-focus — утилиты › Взаимодействие;slds-button_icon-container;Исправлено
Были решены следующие проблемы:
slds-card__body, чтобы учесть пробелы, когда нижний колонтитул пуст;Устарело
Следующие функции помечены как устаревшие в этом выпуске и будут удалены через три выпуска:
Удалено
Следующие функции удаляются в этом выпуске:
$css-prefix больше не доступен для изменения префикса имён классов slds- по вашему выбору. В качестве альтернативы используйте этот плагин PostCSS для настройки префиксов имён классов: postcss-slds-prefix.slds--scrollable-.Файлы токенов, ранее доступные в пакете @salesforce-ux/design-tokens npm, теперь доступны в design-tokens/dist в пакете @salesforce-ux/design-system (то же самое относится к загрузке zip).
В этом выпуске были добавлены, удалены или объявлены устаревшими следующие токены:
force-base/fill.json:
FILL_HEADER_BUTTON.FILL_HEADER_BUTTON_HOVER.force-base/text-transform.json.
TEXT_TRANSFORM.FONT_FAMILY_TEXT.FONT_FAMILY_HEADING.Z_INDEX_STICKY.Были решены следующие проблемы:
.slds-button—icon-border-inverse..slds-button_icon..slds-not-selected из разметки .slds-button_icon с отслеживанием состояния и скорректирована документация.Были решены следующие проблемы:
@support для прогрессивного улучшения mix-blend-mode для состояний active/hover в глобальной навигации..slds-text-align_center из .slds-card__body.Настройка имён классов CSS путём настройки $css-prefix устарела и будет удалена в версии 2.2. В качестве альтернативы используйте этот плагин PostCSS для настройки префиксов имён классов. ### ПостCSS-SLDS-префикс
Доступны следующие улучшения сайта:
Доступны следующие компоненты:
Доступны следующие классы:
В этом выпуске были внесены следующие изменения:
Раздел Использование SLDS в Lightning был обновлён и теперь включает информацию о Lightning Out, компонентах Lightning для Visualforce и приложениях Lightning.
Нуббины на всплывающих окнах были перемещены ближе к соответствующему краю всплывающего окна на 0,5rem/8px, чтобы соответствовать спецификации.
Таблетки были обновлены с более доступным DOM. Они больше не создаются из якоря, а вместо этого содержат якорь. Документация обновлена. (Старые таблетки не будут ломаться.)
У переключателя флажков обновлённый дизайн с возможностью добавления пользовательских слов под переключателем.
Флажки и радиокнопки были обновлены с новой, более доступной структурой DOM. (Ваш старый DOM не будет ломаться.)
Жёлтый фон элемента mark стал ярче.
Текст, выделенный мышью, стал светло-голубым.
Панель «slide-out» была переименована в «details» — компонент панели сведений.
Базовая таблица данных была переименована в базовую таблицу данных — компонент таблицы данных.
Сложные функции таблицы данных были абстрагированы в вариант под названием «расширенная» таблица данных — компонент расширенной таблицы данных.
Были внесены улучшения в .slds-text-link_reset — раздел утилиты «Взаимодействие» «Сбрасывание ссылки».
Лёгкий шрифт-вес текста утилиты .slds-text-heading_small был удалён — раздел «Текст» утилиты «Заголовок» «Маленький».
Позиция: относительная из .slds-grid была удалена.
Каналы теперь адаптивны.
Была добавлена кнопка закрытия к всплывающему окну ошибки, чтобы программа чтения с экрана могла получить доступ к всплывающему окну.
В глобальную навигацию был добавлен анимированный значок вафли — глобальная навигация.
Каналы:
— Меткам комментариев поста было присвоено строчное написание.
— Был добавлен намёк-зависание к значку переполнения действий комментария поста.
— Текст «ссылка» в комментарии поста использует .slds-color-link_weak.
— Пунктирная линия разделителя из полезной нагрузки вложения поста была удалена.
— URL вложения поста был перемещён в нижнюю часть порядка содержимого.
— Усечение из преамбулы было удалено.
— Белое пространство между элементами канала было уменьшено.
Был обновлён пример электронного письма временной шкалы активности, чтобы показать усечение «от» и «до».
Были решены следующие проблемы:
Доступность домашней вертикали:
— К кнопкам переполнения действий было добавлено aria-haspopup="true".
— Для иконки был добавлен вспомогательный текст.
— Из кнопок переполнения действий были удалены ненужные роли aria.
— Улучшен вспомогательный текстовый оборот.
— Поле множественного значения стало полностью кликабельным, чтобы вызвать раскрывающийся список.
Глобальный заголовок:
— Порядок табуляции глобальных действий заголовка был изменён.
— Атрибут title был добавлен к глобальным действиям заголовка.
— Оболочка аватара была изменена с привязки на кнопку.
— Разрешено .slds-assistive-text, чтобы стать видимым при фокусировке, если используется .slds-assistive-text_focus.
— Роли aria были добавлены к глобальному поисковому вводу.
— Параметры списка глобального поиска были изменены, чтобы они не были активными.
— Опции «нажмите Enter для поиска» и «перейти» были возвращены в <ul>, чтобы их могли обнаружить программы чтения с экрана.
— Добавлен .slds-has-focus, чтобы применить состояние фокуса к параметрам списка, когда используются взаимодействия с клавиатурой.
— Кнопка очистки была перемещена вправо от ввода, чтобы визуально соответствовать порядку табуляции.
Поиск/Глобальный поиск:
— Семантика выпадающих меню была улучшена.
— Роль separator была применена к элементам списка выпадающего меню, которые не имеют активного элемента.
— Роль presentation была применена к элементам выпадающего списка меню.
— Элементы выпадающего меню были заключены в <span> вместо <p>.
— Элементам выпадающего меню был присвоен tabindex="-1" по умолчанию, элементы с фокусом табуляции были изменены на tabindex="0".
Панель утилит:
— Был добавлен ориентир role="footer". Вместо.
.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-expanded больше не поддерживается. Вместо него используйте .slds-is-expanded.Правило, скрывающее кнопку закрытия в Notification Prompt .slds-modal_prompt .slds-modal__close, больше не требуется, так как HTML должен быть удалён. Пожалуйста, удалите кнопку из заголовка диалога.
В этом выпуске удаляются следующие функции:
— Удалена конфигурационная переменная $static-icon-path, поскольку она нигде не использовалась в кодовой базе.
— Удалён slds-button_small, так как это то же самое, что и новый размер кнопки по умолчанию.
— Удален slds-input_small, поскольку это то же самое, что и новый размер ввода по умолчанию.
— Удалено slds-tile__title, поскольку оно не применяло никаких стилей.
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 Design System.title к контейнерам значков, заметно улучшая доступность для пользователей указывающих устройств, таких как мыши. Компонент
Tree был полностью перестроен и теперь является новым компонентом.
Мобильные устройства:
Теперь доступны следующие классы:
.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 для использования на значках при ошибках валидации;В этом выпуске были внесены следующие изменения:
dl с одиночными парами dt и dd, заменён на span;em вместо px;.slds-input__icon, поэтому теперь дополнительно требуется класс цвета значка;.slds-m-top_x-small в заголовке страницы и заменён новым классом .slds-page-header__info;.slds-form_stacked, .slds-form_horizontal и .slds-form_inline;480px для маленького, 768px для среднего, 1024px для большого и 1280px для очень большого;.slds-text-longform теперь сохраняет нижнее поле.Следующие проблемы теперь решены:
dt и dd теперь могут принимать утилиты размера;!default;Следующие функции помечаются как устаревшие в этом выпуске и будут удалены через три выпуска:
.slds-card_empty. Используйте .slds-text-align_center вместо — компонент [Card];.slds-section-title. Используйте .slds-section__title вместо — [Section Title] для получения полной информации;.slds-button_icon-bare. Используйте .slds-button_icon вместо — [Button Icon];.slds-tabs_default > slds-tabs__item. Выпуск 0.12.2 — 8 февраля 2016 г.
SITE IA:
Изменения:
Выпуск 0.12.1 — 16 декабря 2015 г.
SITE IA:
Изменения:
Новые компоненты:
Выпуск 0.12.0 — 18 ноября 2015 г.
SITE IA:
Критические изменения:
Изменения:
Новые компоненты:
Добавлены утилиты для растягивания кнопок для полноширинных кнопок на устройствах с небольшими форм-факторами.
Диалоговые меню для устройств с небольшим форм-фактором:
Добавлено диалоговое окно редактирования для сенсорных устройств.
— Кнопки больше не имеют стандартного горизонтального интервала и требуют использования класса или обёртки для обеспечения интервала.
— Изменение названия: адаптивная кнопка стала называться горизонтальной кнопкой.
— slds-modal-backdrop и slds-modal-backdrop_open устарели в версии 0.12.0, вместо них следует использовать slds-backdrop и slds-backdrop_open.
— Селекторы потомков на вкладках были изменены на синтаксис BEM:
* 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 > a устарел в версии 0.12.0, следует использовать slds-tabs_default__link.
* slds-tabs_scoped > slds-tabs__item устарел в версии 0.12.0, следует использовать slds-tabs_scoped__item.
* slds-tabs_scoped > slds-tabs__content устарел в версии 0.12.0, следует использовать slds-tabs_scoped__content.
* slds-tabs_scoped > a устарел в версии 0.12.0, следует использовать slds-tabs_scoped__link.
— Селектор потомков для .slds-input__icon цвет заливки устарел в версии 0.12.0, используйте slds-icon-text-default (или любой класс цвета значка) на значке в дополнение к исходному классу.
— Уведомления > модальное окно изменено на уведомления > модальный тост.
— Модальные окна > заголовки больше не имеют селектора slds-modal__header p. Вместо этого slds-m-top_x-small применяется к самому p.
— У кнопки с состоянием есть состояние [disabled].
— Если группам кнопок требуется, чтобы их конечный значок вниз скрывался при [отключении], следует добавить .slds-toggle-visibility к значку. (Это влияет на все заголовки страниц и карточки > базовые.)
— Тени нуббинов теперь имеют правильный источник света.
— Интерактивные выпадающие списки удалены из примеров заголовков страниц.
— Добавлен Google Analytics.
— Всплывающие подсказки перемещены в поповеры, раздел устаревших всплывающих подсказок удалён.
— Выпадающие списки перемещены в меню, раздел устаревших выпадающих списков удалён.
— Меню выбора перемещено в меню.
— Многоуровневое меню выбора перемещено в формы.
— Варианты компонентов меню теперь более явные: * Выпадающий список. * Выпадающий список с иконками. * Позиционирование выпадающего списка. * Список выбора. * Переполнение действиями. * Поиск переполнения.
— Изменён .slds-tooltip на .slds-popover_tooltip, .slds-tooltip станет устаревшим (*).
— Устарел .slds-has-divider (*), теперь требуется добавление верхнего или нижнего направления, например .slds-has-divider_top, .slds-has-divider_bottom.
— Вариант выпадающего меню «Меню с иконками» устарел:
* Больше не зависит от имён классов, которые связаны с позиционированием значков.
* .slds-dropdown__item по умолчанию установлены на display: flex с justify-content: space-between. Это позволяет расположить значок + текст по левой стороне, а одиночный значок — по правой. Значок + текст, расположенный слева, требует HTML-элемента, такого как <p> с применённым классом .slds-truncate.
* Устарели .slds-has-icon, .slds-has-icon_left, .slds-has-icon_right и дочерние классы .slds-icon_left, .slds-icon_right, но останутся в кодовой базе (*).
* Если пользователь выбирает элемент раскрывающегося списка и хочет получить обратную связь, такую как галочка, этот SVG теперь требует класса .slds-icon_selected. Сайт
Компоненты
Компоненты изменены на готовые к разработке: группы кнопок, карточки, плитки, значки.
Поиск:
.slds-lookup__control устарел, теперь используется .slds-form-element__control.Добавлен контейнер для таблеток .slds-pill-container.
.slds-lookup.Таблицы данных
.slds-is-selected) и наведение курсора на строку при выборе.Вкладки
aria-controls с тем же идентификатором в контейнере содержимого вкладки.Плитки > Автор и с иконкой имеют добавленный пустой атрибут alt.
Выбор даты > множественный выбор и формы > составная форма имеют элемент small, изменённый на span.
Карточка > Все варианты имеют изменения в DOM (заголовок, раздел, нижний колонтитул заменены на div).
Таблицы данных > Все варианты имеют обновления доступности для th role="row".
Формы > состояние проверки теперь имеет дополнительные ошибки, отображаемые для радио и флажка.
Выбор даты > Все варианты
role="button" aria-labelledby="bn_prev-label".div#month на H2 и удалён role="heading".span#bn_prev-label и span#bn_next-label.Выпадающие списки > Все варианты имеют aria-haspopup="true", перемещённое в кнопку (действующий элемент).
Заголовки страниц > Все варианты имеют добавленную роль banner.
Списки быстрого поиска > временно удалены до обновления DOM.
Множество исправлений ошибок и улучшений.
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )