RuxClassificationMarking Questions

[wschaf]

Hi everyone, apologies for what are probably basic questions.

1. Is there a way to change the color of the RuxClassificationMarking component in React to something other than what comes out of the box? For example, my product occasionally calls for a black banner with white text.

2. Is there a recommended way to get the classification banner to be fixed at both the top and bottom of the page?

[micahjones13]

Hey @wschaf, thanks for the questions!

1. There is a way to change the banner color, and that's through CSS shadow parts. You can see an example of this in the attached codesandbox. You can also add custom text using the label prop on RuxClassificationMarking, which is also in the attached codesandbox.
2. There is a way to have the banner's fixed at both the top and the bottom! If you wrap the content that the banner's should encapsulate within the RuxClassificationMarking component, it will render both a header and footer banner. This is also in the codesandbox.

All that being said, the RuxClassificationMarking component is meant to serve the specfic purpose of marking an app or pages of an app as the appropriate classification level. Any changes made to the background colors or text of the banners would most likely put you out of compliance with Astro (see https://www.astrouxds.com/components/classification-markings/#compliance-requirements), so be sure to keep that in mind, especially if your project requires compliance.

Codesandbox example: https://codesandbox.io/p/devbox/tender-silence-sj364r?file=%2Fsrc%2FApp.tsx%3A14%2C2
We also have documentation located at https://astro-components.netlify.app/?path=/docs/astro-uxds-start-here--page should you need it.

Also, if you have any feedback on this component (or any other components) please let us know!

[wschaf]

Thanks for all the help @micahjones13 !! Question: Is there a way to manipulate CSS shadow parts through inline React style props?
Something akin to <RuxClassificationMarking style={{part-footer-background: 'black'}} /> or something like that?

[micahjones13]

Not that I'm aware of, unfortunately. You'd probably have to look for 3rd party libraries that handle that.

[dmcalester]

Hi there. I wanted to ask about the first part of your question. We lock down the classification marking banner based on the guidance from ISOO about color used for markings. We haven’t encountered the black bar/white text variant and I was wondering if you could share the use case for that particular request? Is is in addition to classification markings or a classification we don’t account for?

[wschaf]

Hi @dmcalester , sure - occasionally websites might pull data from multiple places such as different APIs that are of different classification levels. For example, some times a page might be totally unclassified, but sometimes that API might serve data that has been classified higher (sorry for the vagueness on this open forum haha).

Anyways, instead of having to track this explicitly, DoD permits web apps to display a banner that says "DYNAMIC PAGE - HIGHEST POSSIBLE CLASSIFICATION IS "

Here is one reference I was able to find of what I mean: (see page A-8) https://media.defense.gov/2021/Jul/02/2002755747/-1/-1/0/POLICY_MANUAL_1-52.PDF

I did also send an email from my work email to Astro's support email requesting access to the Astro slack, happy to discuss more there if you're interested!