State tags use different styling in the campaigns section

[clarkepaul]

The badges for draft/modified in the campaigns sections use an older style and need to updated to reflect the style without a background as per gridfields.

If there isn't a reusable style for the newer style one should be created so it can be used throughout the CMS.

Was:

Should be:

[robbieaverill]

@clarkepaul here's the badge variations: https://silverstripe.github.io/silverstripe-admin/?knob-message=Hello%20World&knob-status=default&selectedKind=Admin%2FBadges&selectedStory=Badge&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybooks%2Fstorybook-addon-knobs

I think what you're referring to here is a legacy badge style - the ones in the storybook are React badge component states. We may need to add a new one that has a transparent background while still using the same text colours before we can implement this in campaign-admin - thoughts? Perhaps like the inverted state but with a transparent bg

[robbieaverill]

PR at silverstripe/silverstripe-admin#817 for the transparent badges. I think the orange used in the screenshot is different from the badges in the pattern library, so we may need to add a new state, or update the "warning" state to use that colour instead

[clarkepaul]

Yeah having a transparent set would work well so cheers!

The way I see it, we would be able to set the background as either: no class (slightly rounded square) , badge-pill, or badge-transparent (I'd imagine in Storybook there is a radio to toggle between the three options if possible for testing).

.badge-transparent could then be used to start replacing all of the older status-flag's through out the CMS. Not sure if you've done this @robbieaverill but can the transparent version have no padding left and right please?
I can review the orange colour separately as that more of a accessibility concern.

[robbieaverill]

I can add no left and right padding, but a little unsure how that works with the terminology of "transparent". We could add another modifier like padding={false}, but then you end up with three variations - inverted, padding, and transparent. As @ScopeyNZ mentioned on the PR, you'd then use the component for versioned statuses like <Badge message="Hello" status="warning" inverted transparent padding={false} /> which might be fine but could also be seen as a bit excessive to achieve a core design pattern. I don't think it's a good idea to create another equivalent of Badge though, maybe we should just add new variants so you could use it like <Badge message="Hello" status="state-modified" /> or <Badge status="status-published" />, then wrap the padding and transparency rules up in the status rules baked into the component?

[clarkepaul]

Bootstrap already uses different left/right padding for the badge-pills, for me this is just another variant of that. The reason for no padding left and right is that it needs to align with other text when used on a new line.
For example

I don't like using the padding as a separate modifier as you have more chance of breaking the other badges, and it only needs to go with the transparent background. Instead of using "Transparent" which isn't really a good class name, could you use badge-state? as it is going to be used to display the state of a page.

[robbieaverill]

So I'm going to update the PR at silverstripe/silverstripe-admin#817 to use stateBadge as a boolean modifier instead of transparent. Example usage:

• <Badge message="PUBLISHED" status="success" inverted stateBadge /> - published
• <Badge message="MODIFIED" status="warning" inverted stateBadge /> - modified

(example code only, colours may need adjusting)

[robbieaverill]

I've made a new PR which adds a new versioned badge component, essentially a lightweight wrapper around Badge with some specific styles for this use case. See silverstripe/silverstripe-admin#861

[robbieaverill]

PR at #140

[robbieaverill]

Admin PR is merged, so we can now implement the new VersionedBadge component in campaign-admin for SS 4.5