Add CSS display-none utility (#1120)

* Update _utility.scss Signed-off-by: Shahriar Shatil <52494840+ShatilKhan@users.noreply.github.com> * Update CHANGELOG.md Signed-off-by: Shahriar Shatil <52494840+ShatilKhan@users.noreply.github.com> * Add `oui-displayNone` to `utility_classes.js` Signed-off-by: Shahriar Shatil <52494840+ShatilKhan@users.noreply.github.com> * Update utility_classes.js Co-authored-by: Josh Romero <rmerqg@amazon.com> Signed-off-by: Shahriar Shatil <52494840+ShatilKhan@users.noreply.github.com> * Fix typo in utility_classes.js Co-authored-by: Josh Romero <rmerqg@amazon.com> Signed-off-by: Shahriar Shatil <52494840+ShatilKhan@users.noreply.github.com> * Fix Indentation in utility_classes.js Co-authored-by: Josh Romero <rmerqg@amazon.com> Signed-off-by: Shahriar Shatil <52494840+ShatilKhan@users.noreply.github.com> * fix lint Signed-off-by: Shahriar Shatil <52494840+ShatilKhan@users.noreply.github.com> * Add displayNone to oui-next Signed-off-by: Shahriar Shatil <52494840+ShatilKhan@users.noreply.github.com> --------- Signed-off-by: Shahriar Shatil <52494840+ShatilKhan@users.noreply.github.com> Co-authored-by: Josh Romero <rmerqg@amazon.com>
opensearch-project · Jan 13, 2024 · 5e7ac43 · 5e7ac43
1 parent 96af93e
commit 5e7ac43
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -17,6 +17,7 @@
 - Update ouiTextSubduedColor in `next` dark theme ([#973](https://github.com/opensearch-project/oui/pull/973))
 - Add slugs to markdown headers ([#1051](https://github.com/opensearch-project/oui/pull/1051))
 - Add `crossInCircleEmpty` and `power` icons ([#1044](https://github.com/opensearch-project/oui/pull/1044))
+- Add CSS `display-none` utility ([#1120](https://github.com/opensearch-project/oui/pull/1120))
 - Add `Figma` icon and link to OUI Figma resources ([#1064](https://github.com/opensearch-project/oui/pull/1064))
 - Rename `crossInACircleFilled` asset files and ensure backward compatibility ([#1113](https://github.com/opensearch-project/oui/pull/1113))
 - Implement validation for icon input source & set default icon to `Beaker` ([#1137](https://github.com/opensearch-project/oui/pull/1137))

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;