Currently the selected item's check icon is wrapped by an <i> element that has the class .pf-c-options-menu__menu-item-icon. To match the structure in core, we should remove the <i> and apply .pf-c-options-menu__menu-item-icon to the SVG itself.
Support for this change was added in patternfly/patternfly#2341
The current structure looks like this:
<button tabindex="-1" type="button" class="pf-c-options-menu__menu-item" id="">
Option 1
<i class="pf-c-options-menu__menu-item-icon" aria-hidden="true">
<svg fill="currentColor" height="1em" width="1em" viewBox="0 0 512 512" aria-hidden="true" role="img" style="vertical-align: -0.125em;">...</svg>
</i>
</button>
It should look like this instead:
<button tabindex="-1" type="button" class="pf-c-options-menu__menu-item" id="">
Option 1
<svg class="pf-c-options-menu__menu-item-icon" fill="currentColor" height="1em" width="1em" viewBox="0 0 512 512" aria-hidden="true" role="img" style="vertical-align: -0.125em;">...</svg>
</button>
Reactions are currently unavailable
Currently the selected item's check icon is wrapped by an <i> element that has the class .pf-c-options-menu__menu-item-icon. To match the structure in core, we should remove the <i> and apply .pf-c-options-menu__menu-item-icon to the SVG itself.
Support for this change was added in patternfly/patternfly#2341
The current structure looks like this:
<button tabindex="-1" type="button" class="pf-c-options-menu__menu-item" id=""> Option 1 <i class="pf-c-options-menu__menu-item-icon" aria-hidden="true"> <svg fill="currentColor" height="1em" width="1em" viewBox="0 0 512 512" aria-hidden="true" role="img" style="vertical-align: -0.125em;">...</svg> </i> </button>It should look like this instead: