ProductDetails should have a translation independent class name on the <li> element

[helgatheviking]

Is your feature request related to a problem? Please describe.

The output of ProductDetails renders an unordered list

<ul class="wc-block-components-product-details">
    <li class="wc-block-components-product-details__includes"><span class="wc-block-components-product-details__name">Includes:</span> <span class="wc-block-components-product-details__value">Chocolate Chip Cookie × 1</span></li>
    <li class="wc-block-components-product-details__includes"><span class="wc-block-components-product-details__name">Includes:</span> <span class="wc-block-components-product-details__value">Macadamia Nut Cookie × 1</span></li>
    <li class="wc-block-components-product-details__includes"><span class="wc-block-components-product-details__name">Includes:</span> <span class="wc-block-components-product-details__value">Oatmeal Raisin Cookie × 1</span></li>
</ul>

The wc-block-components-product-details__includes class is generated from a translatable string (in this example "Includes"). That means the class will change depending on the translation.

Describe the solution you'd like

I'd like to see the CSS class be static and separate from the name that is displayed... likely need to not use name for both class and display.

[senadir]

Thank you! this seems like a bug more than an enhancement request, I labeled it correctly.

[helgatheviking]

You're probably right! I just wasn't sure. If key and name both are in the props, I think key could be used as the class? And then display name which seems more likely to be translated?

[github-actions[bot]]

This issue has been marked as stale because it has not seen any activity within the past 60 days. Our team uses this tool to help surface issues for review. If you are the author of the issue there's no need to comment as it will be looked at.

Internal: After 10 days with no activity this issue will be automatically be closed.