Woocommerce-admin: Component: ViewMore

[timmyc]

Not sure the best name for this component, <ViewMore /> was the first name that popped in my head, but I will let the isotope that grabs this issue come up with their preferred name :)

This component will be used in the tabular data of reports to indicate there is more data to view associated with the record ( i.e. more products, more coupons ). The component should accept an array of objects - comprised of a label and href target which will populate the popover menu onClick() of the ViewMore button. The length of the array should then be used to populate the label of the component. Or something like that 🤷‍♂️

One random question I had about this was does the label + ${x} more translate well? Specifically the plus prefix. Maybe just ${x} more would avoid any issues with that.

[timmyc]

@LevinMedia to keep this a bit more simple, could the usage of showing additional products in the order link the full line of text. So for example "2x Automattic Fanny Pack" would all be one link. The design has the quantity un-linked.

[LevinMedia]

Yes!

[LevinMedia]

We should also use the design from the Gutenberg field token, without the [x] rather than the design in the screen shot above. I'm working on updating the design documentation.

[timmyc]

Hmmm I'm not sure we can use the token field component here - nor if we should as that is meant for use in forms. Additionally there is no way to remove the 'x'/remove button from the token-field component. Also looks like there isn't a built-in onClick handler for us to show the popover menu, so we'd have to shoehorn a solution in for that too.

[ryelle]

I'm pretty sure @LevinMedia meant the <Tag /> component, which is our extraction of the Token part out of FormTokenField (since it's not otherwise exported). For our component, the remove callback is optional & if omitted the X won't display. It sounds like this might be more complex (having a popover), but maybe we can extend our Tag component (and maybe we should rename it to token after all).

[timmyc]

Ahh, thanks for the clarification @ryelle - though he did just open an issue to no longer use <Tag /> in Advanced Filters too #423 - @LevinMedia is it okay if we use the current <Tag /> by extending it to support the Popover needed here?

[LevinMedia]

@timmyc @ryelle I think so - As long as we can update existing <Tag /> styling to match the new designs, above, we should be good to go.

[ryelle]

That issue is to update the design of our tag-- we all keep using Tag/Token/TokenField almost interchangeable leading to all this confusion 😆