NEW Add VersionedBadge for displaying versioning states in the CMS

[robbieaverill]

Replacement PR for #817 which adds a new wrapper component for versioning state badges, instead of adding more props to the Badge component.

Originally raised in silverstripe/silverstripe-campaign-admin#77 since we're displaying the wrong badges for versioning in campaign admin.

Parent issue

• Table view doesn't show modified files in list silverstripe-assets#286

Related PRs

• API Add reference to new VersionedBadge component webpack-config#37
• BUG Add a status column to the table view silverstripe-asset-admin#980

[maxime-rainville]

I've rebased, remove the message (since this can be inferred from the status), added an archived status and functionalise the component.

Here's what the pattern lib looks like.

@silverstripeux Can you let us know if you are happy with those badges? For context, this component will eventually be use everywhere we display a stage label.

[maxime-rainville]

I'm happy but please wait for design review before merge.

[robbieaverill]

The only thing with removing the message and inferring it from the status is we'll need to still allow people to add their own states I guess, Fluent for example adds its own to the site tree

[sachajudd]

I think you might be using the incorrect variable sheet. I see you're using _bootstrap-variables rather than using the "Extra state colours" in _variables.scss. Which include the correct state-draft and state-modified colours. Not sure if this is the same with the live and archived colours but you might want to check incase 🙂

[maxime-rainville]

The only thing with removing the message and inferring it from the status is we'll need to still allow people to add their own states I guess, Fluent for example adds its own to the site tree

Shouldn't other modules be using the Badge component directly instead?

[sachajudd]

Just a side note from Max's screenshot the type face almost looks a little off and the letter spacing. Not sure what's going on there (would be good to compare) but I understand once it's in the pattern library we can tweak it.

Pattern lib:

Demo:

E.g the 'D' in MODIFIED looks quite spaced in the first screenshot. What browser were you using @maxime-rainville ?

[maxime-rainville]

E.g the 'D' in MODIFIED looks quite spaced in the first screenshot. What browser were you using

I've got the same gap in the CMS tree. It might just be that I'm looking at it on Ubuntu and you are looking at it on a Mac. Mine is falling back to Arial because I don't have Helvetica Neue or Helvetica.

[robbieaverill]

Nice! Can't approve my own PR but I can say this instead

[robbieaverill]

We need to follow up on @sachajudd's comments first, and remove the use of the old variable in Badge.scss (doing this now)

[robbieaverill]

@sachajudd this PR makes $state-archived: $gray-700. Originally .status-archived { color: $text-muted; } evaluates $text-muted to $gray-600. Which should be used?

[sachajudd]

Yeah lets leave this to a separate PR as I've noticed all of the colours are a bit out. Stick with $gray-700 for now and I'll take a look next week. Happy for the PR to be merged 👍