Enterprise: トップレベル要素の構成をサポート

作成日 2018年11月09日  ·  17コメント  ·  ソース: infor-design/enterprise

機能リクエストは問題に関連していますか?
IDSの使用は、ページ全体ではなく、ページのセクションに限定されています。 したがって、これを使用するために、この仮定を行う多くのコンポーネントをフォークし、bodyセレクターへの参照を指定したセレクターに置き換えました。
たとえば、tabsコンポーネントでは、次の行を置き換えました。
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などのすべてのコンポーネントにプレフィックスを付けることもできます。 これはより多くの作業になる可能性がありますが、より柔軟になる可能性があります

追加のコンテキスト
これは、GTNexusフロントエンドフレームワークチームからのリクエストです。

[5] refactor status type type

最も参考になるコメント

あなたはこのプロジェクトを監視することができますhttps://github.com/infor-design/enterprise-wc->それは道のりですが、来年のいつか何かがリリースされるはずです

全てのコメント17件

他の場合にはこれが必要だと思うので、トリックはids-enterpriseトップレベルクラスを追加し、その後のみカスケードさせることです。 簡単に軽減できる重大な変更になります。 それを呼び出すときにinitialize()に追加することもできます(人々がそれを使用する場合)。

要素を無視するためのサポートを追加するためにソーホーのサポートを追加することは可能でしょうか?
私たちのユースケースでは、ソーホーに従ってアプリのスタイルを設定する必要がありますが、ソーホーcssに特定の要素とその子孫を無視するように指示する方法が必要です

たとえば、クラスを持つ要素は無視されます

.soho-ignore

おそらく:not()セレクターが役に立ちますか?

それが簡単かどうかはわかりませ

これを行う別の方法は、その最上位要素の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の1年前のフォークバージョンを使用しています)ので、これは大きな助けになります。

はい、これを追加するのに十分なユースケースをクールにしてください。 すぐに調べます。 トップレベルの要素が必要なだけだと思いますが、わずかな変更を加えたセマンティックバージョニングに従うためだけに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-enteprisecssが「some-component-with-own-styles」を台無しにしないようにするにはどうすればよいでしょうか。

私の観点からは、カスケードcssにルート要素を追加することから始めるのは良い考えですが、エンタープライズcssを使用可能にするには、アプリの他の部分をいじらないようにする方法が必要です。 notセレクターはオプションではありません。すべてのids-enterpriseクラスの前にids-enterpriseを付けるのはどうですか?

ええ、私はすべてのオプションの前にids-付けることを考えましたが、それははるかに大きな変更です。 また、 ids-accordion-contentと呼ばれるようにしただけで、この正確なケースが解決されるかどうかもわかりません。

この正確なケースでは、アコーディオンコンテンツのスタイリングを無効にする何かを思い付くことができると思いますが、それは別の問題になると思います。 そして、このコンポーネントをコンポーネントごとに実行する必要があります。

どこに置いても、コンポーネント全体で機能するnot-idsクラスを作成する良い方法があるのではないかと疑っています。 ですから、そのためのケースバイケースのことになるでしょう。

もっと簡単なリセットが役立つかどうか疑問に思いますか? Fx ... ids-reset

  • フォント、パディング、マージン、その他いくつかのものをドキュメントルートに戻しますか?

逆リセットのようなものですか? 場合によっては役立つかもしれませんが、すべてではありませんか?

それはトリックをするかもしれません

これと一緒に見ていきます。 それは私が最初に期待していたほど悪くはありません。

ID付きのプレフィックスのアイデアが好きです。 実際、それは「ブランディング」の概念と呼ばれています。 間違いなくこれは重大な変更ですが、将来的にはids-enterprisdcss構造を採用する方法になるはずです。

私は、破壊的な変化よりも価値を重視しなければならないことに同意します。

これをさらにチェックしました。 ルートにプレフィックスを追加しないと実行できません。 私が道を見つけることができることを望んでいた。
次世代プロジェクトでは、すべてにプレフィックスがあり、自己完結型であるため、これは問題になりません。 今のところこれを棚上げしますが、メジャーバージョンでこれを行う必要があるかもしれないので閉じません

次のバージョン5.0には、各コンポーネントがカプセル化されたcssを持つWebコンポーネントであり、すべてのcssに名前空間が付けられているソリューションがあります。 これでこの問題が解決するので、終了します

@tmcconechyそれは素晴らしいニュースです! これが一般に利用可能になる時期を追跡する良い方法はありますか?

あなたはこのプロジェクトを監視することができますhttps://github.com/infor-design/enterprise-wc->それは道のりですが、来年のいつか何かがリリースされるはずです

本当に有望に見えます!

このページは役に立ちましたか?
0 / 5 - 0 評価