Add CSS display-none utility (#1120) (#1210)

* Update _utility.scss Signed-off-by: Shahriar Shatil <[email protected]> * Update CHANGELOG.md Signed-off-by: Shahriar Shatil <[email protected]> * Add `oui-displayNone` to `utility_classes.js` Signed-off-by: Shahriar Shatil <[email protected]> * Update utility_classes.js Co-authored-by: Josh Romero <[email protected]> Signed-off-by: Shahriar Shatil <[email protected]> * Fix typo in utility_classes.js Co-authored-by: Josh Romero <[email protected]> Signed-off-by: Shahriar Shatil <[email protected]> * Fix Indentation in utility_classes.js Co-authored-by: Josh Romero <[email protected]> Signed-off-by: Shahriar Shatil <[email protected]> * fix lint Signed-off-by: Shahriar Shatil <[email protected]> * Add displayNone to oui-next Signed-off-by: Shahriar Shatil <[email protected]> --------- Signed-off-by: Shahriar Shatil <[email protected]> Co-authored-by: Josh Romero <[email protected]> (cherry picked from commit 5e7ac43) Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> # Conflicts: # CHANGELOG.md Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
opensearch-project · Jan 25, 2024 · b88b1e7 · b88b1e7
1 parent 8336436
commit b88b1e7
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 0 deletions.
diff --git a/src-docs/src/views/utility_classes/utility_classes.js b/src-docs/src/views/utility_classes/utility_classes.js
@@ -93,6 +93,24 @@ export default () => (
       }
       snippet={`<span className="oui-fullWidth">
   /* Your content */
+</span>`}
+    />
+    <OuiSpacer />
+    <UtilityClassesSection
+      code="oui-displayNone"
+      description={
+        <p>
+          Changes the element’s display property to{' '}
+          <OuiCode language="sass">display: none;</OuiCode>
+        </p>
+      }
+      example={
+        <OuiMark style={wrappingExampleStyle} className="oui-displayNone">
+          Displaying none
+        </OuiMark>
+      }
+      snippet={`<span className="oui-displayNone">
+  /* Your content */
 </span>`}
     />
   </>

diff --git a/src/global_styling/utility/_utility.scss b/src/global_styling/utility/_utility.scss
@@ -22,6 +22,7 @@
 .oui-displayBlock {display: block !important;}
 .oui-displayInline {display: inline !important;}
 .oui-displayInlineBlock {display: inline-block !important;}
+.oui-displayNone {display: none !important;}
 
 .oui-fullWidth {
   display: block !important;

diff --git a/src/themes/oui-next/global_styling/utility/_utility.scss b/src/themes/oui-next/global_styling/utility/_utility.scss
@@ -22,6 +22,7 @@
 .oui-displayBlock {display: block !important;}
 .oui-displayInline {display: inline !important;}
 .oui-displayInlineBlock {display: inline-block !important;}
+.oui-displayNone {display: none !important;}
 
 .oui-fullWidth {
   display: block !important;