Enterprise: Поддержка настройки элемента верхнего уровня

Созданный на 9 нояб. 2018  ·  17Комментарии  ·  Источник: infor-design/enterprise

Ваш запрос функции связан с проблемой?
Наше использование IDS ограничено частью страницы, а не всем телом. Поэтому, чтобы использовать его, мы прибегли к разветвлению многих компонентов, которые делают это предположение, заменив ссылки на селектор тела на селектор, который мы указали.
Например, в компоненте вкладок мы заменили эту строку:
menuHtml = $(``<ul id="tab-container-popupmenu" class="tab-list-spillover${shouldBeSelectable}">``).appendTo('body');
с этим:
menuHtml = $(``<ul id="tab-container-popupmenu" class="tab-list-spillover${shouldBeSelectable}">``).appendTo(window.$FEF_TOP_LEVEL_ELEMENT_SELECTOR);

Опишите желаемое решение
Способ настройки элемента верхнего уровня, на который будет ссылаться IDS / Soho.

Опишите альтернативы, которые вы рассмотрели
Кроме продолжения форк, у нас ничего нет. Другой альтернативой является добавление префиксов ко всем компонентам, например, ids-grid, ids-dropdown и т. Д. Это может быть больше работы, но может быть более гибким

Дополнительный контекст
Это запрос от команды GT Nexus Front-End Framework.

[5] refactor status type type

Самый полезный комментарий

Вы можете следить за этим проектом https://github.com/infor-design/enterprise-wc -> это далеко, но в следующем году должно быть что-то выпущено

Все 17 Комментарий

Я думаю, нам это действительно нужно для других случаев, поэтому уловка будет заключаться в том, чтобы просто добавить класс верхнего уровня ids-enterprise и позволить ему каскадировать только после этого. Было бы серьезным изменением, которое мы можем легко смягчить. Также можно добавить его в initialize (), когда вы его вызываете (если люди его используют).

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

например, элементы с классом будут проигнорированы

.soho-ignore

возможно : селектор not () поможет?

Я не уверен, что это будет легко @Fruko Я думаю, нам придется добавить целую вторую таблицу стилей, где мы: not () КАЖДОЕ правило css? Например, что, если вы используете там древовидный класс, раскрывающийся список или что-то еще, это все равно может вызвать проблемы.

Я думаю, что другой способ сделать это - просто не накладывать правило ids-enterprise на этот элемент верхнего уровня, и это будет служить не так.

<div class='ids-enterprise'>
   <!-- Soho / IDS stuff -->
</div>
<div class='anything-else-but-ids-enterprise'>
   <!-- Not Soho / IDS stuff -->
</div>

Спасибо за внимание @tmcconechy ! Эта и пара других проблем (которые я запишу) не позволяют Infor Nexus перейти на IDS (мы используем разветвленную версию Soho, созданную годами), так что это было бы большим подспорьем.

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

@tmcconechy, а как насчет такого сценария?

    <div class="accordion ids-enterprise" data-demo-set-links="true" data-options="{'allowOnePane': false}">
      <div class="accordion-header">
        <a href="#"><span>Warehouse Location</span></a>
      </div>
      <div class="accordion-pane">
        <div class="accordion-content">
          <some-component-with-own-styles></some-component-with-own-styles>
        </div>
      </div>

учитывая приведенный выше код, как мы можем убедиться, что ids-enteprise css не будет связываться с «some-component-with-own-styles»?

С моей точки зрения, добавление корневого элемента в cascade css from - хорошая идея для начала, но я считаю, что для того, чтобы использовать enteprise css, должен быть способ заставить его не возиться с другими частями приложений, если: not selector - это не вариант, как насчет префикса для всех классов ids-enterprise с помощью ids-enterprise?

да, я думал о префиксе всех параметров с помощью ids- но это гораздо более серьезное изменение. Также не уверен, что это решит именно этот случай, если мы просто сделаем его вызовом ids-accordion-content .

Я думаю, что для этого конкретного случая мы могли бы придумать что-то, что отрицает любой стиль в контенте аккордеона, но я думаю, что это отдельная проблема. И пришлось бы делать это покомпонентно.

Я просто сомневаюсь, что есть хороший способ создать класс not-ids который работал бы с каждым отдельным компонентом, независимо от того, где вы его разместили. Так что это будет более индивидуальный подход.

Интересно, поможет ли более простой сброс? Fx ... ids-reset

  • установил бы шрифт, отступы, поля и, возможно, еще несколько вещей обратно в корень документа?

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

это может помочь

Хорошо, посмотрим вместе с этим. Это не так плохо, как я ожидал изначально.

Мне нравится идея префикса с идентификаторами. Собственно это и называется концепцией «брендинг». Определенно это критическое изменение, но оно должно стать подходящим вариантом для структуры CSS ids-enterprise в будущем.

Я согласен, что мне придется взвесить ценность над критическим изменением.

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

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

@tmcconechy , это отличные новости! Есть ли хороший способ отследить, когда это станет общедоступным?

Вы можете следить за этим проектом https://github.com/infor-design/enterprise-wc -> это далеко, но в следующем году должно быть что-то выпущено

Выглядит очень многообещающе!

Была ли эта страница полезной?
0 / 5 - 0 рейтинги