Add oui-displayNone CSS utility

[BSFishy]

Is your feature request related to a problem? Please describe.

Currently, there is no way to apply display: none in OUI. This is important for scenarios when we need access to the DOM elements without actually showing them. For example:

const ref = useRef(null);
const [show, setShow] = useState(false);

useEffect(() => {
  // populate ref with DOM elements after some lengthy operation

  setShow(true);
}, [ref]);

return (
  <div ref={ref} style={{ display: show ? 'block' : 'none' }} />
);

Describe the solution you'd like

The simplest and cleanest way to achieve this would be to add a new CSS utility class called oui-displayNone. This would be the same as the other display utilities, but with display set to none.

Other display utilities:

oui/src/global_styling/utility/_utility.scss

Lines 21 to 24 in 71dc4bd

	// Display
	.oui-displayBlock {display: block !important;}
	.oui-displayInline {display: inline !important;}
	.oui-displayInlineBlock {display: inline-block !important;}

Proposed new utility:

.oui-displayNone {display: none !important;}

Describe alternatives you've considered

I also considered creating a utility component to achieve this. It might look something like this:

return (
  <OuiConditionalRender condition={/* boolean value */}>
    {/* content that is display: none when condition is false */}
  </OuiConditionalRender>
);

However, given the simplicity of the need, I think having an entire component for this would be extremely overkill and not worth the maintaining effort.

Additional context

This gap was identified in an OUI compliance audit: opensearch-project/OpenSearch-Dashboards#4122

[ShatilKhan]

I'd like to work on this
I've raised PR for my currently assigned issue on OUI

[ShatilKhan]

PR is up