Open clarkepaul opened 6 years ago
@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
PR at https://github.com/silverstripe/silverstripe-admin/pull/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
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.
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?
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.
So I'm going to update the PR at https://github.com/silverstripe/silverstripe-admin/pull/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)
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 https://github.com/silverstripe/silverstripe-admin/pull/861
Admin PR is merged, so we can now implement the new VersionedBadge
component in campaign-admin for SS 4.5
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:![image](https://user-images.githubusercontent.com/555033/32476121-542756f6-c3da-11e7-939d-bc92e55a4a6c.png)
Should be:![image](https://user-images.githubusercontent.com/555033/32476137-65c3f720-c3da-11e7-8c84-52fab7e3f10e.png)