Link copied!

Rule Builder Migration

New component to use

Rule List Benefits

  • It has everything what was benefit for rule builder. E.g.: it handles empty state, supports keyboard and screen reader accessibility.
  • It's use slots. This means we are providing places where you can put what you need.
  • It has the css and use shadow dom for the sake of consistency.

Side-by-Side Examples

<e-rule-builder>

  <e-rule-blueprint name="rule-a" label="Rule A">
    <e-rule-blueprint-template>
      <div class="e-field">
        <label class="e-field__label" for="text-input">Text Input Label</label>
        <input data-field="textInput" class="e-input" id="text-input" type="text" placeholder="Type text here">
      </div>
    </e-rule-blueprint-template>
  </e-rule-blueprint>

  <e-rule-blueprint name="rule-b" label="Rule B">
    <e-rule-blueprint-template>
      <div class="e-field">
        <label class="e-field__label" for="text-input">Select Label</label>
        <e-select data-field="textInput" placeholder="Select an option">
          <e-select-option value="option-1-value">Option 1</e-select-option>
          <e-select-option value="option-2-value">Option 2</e-select-option>
          <e-select-option value="option-3-value">Option 3</e-select-option>
        </e-select>
      </div>
    </e-rule-blueprint-template>
  </e-rule-blueprint>

</e-rule-builder>
<e-rulelist-group>
  <div slot="header">
    <e-icon icon="logic-and" color="neutral"></e-icon>
    <e-select>
      <e-select-option selected="selected">Match all (AND)</e-select-option>
      <e-select-option>Match any (OR)</e-select-option>
    </e-select>
  </div>
  <div slot="items">
    <e-rulelist-item>
      <div slot="summary">Rule A</div>
      <div slot="summary-action">
        <button class="e-btn e-btn-onlyicon e-btn-borderless">
          <e-icon icon="trash"></e-icon>
        </button>
      </div>
      <div slot="header">
        <b>Edit Rule:</b> Rule A
      </div>
      <div slot="content" class="e-field">
        <label class="e-field__label" for="input1">Input Label</label>
        <input class="e-input" id="input1" type="text" placeholder="Type text here"/>
      </div>
      <button slot="footer-action" class="e-btn">Cancel</button>
      <button slot="footer-action" class="e-btn e-btn-highlight">Save</button>
    </e-rulelist-item>
  </div>
</e-rulelist-group>