From 5e7ac4338d226e7fd5d88c2fd414996d1ae5330b Mon Sep 17 00:00:00 2001 From: Shahriar Shatil <52494840+ShatilKhan@users.noreply.github.com> Date: Sat, 13 Jan 2024 07:38:28 +0600 Subject: [PATCH] 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 Signed-off-by: Shahriar Shatil <52494840+ShatilKhan@users.noreply.github.com> * Fix typo in utility_classes.js Co-authored-by: Josh Romero Signed-off-by: Shahriar Shatil <52494840+ShatilKhan@users.noreply.github.com> * Fix Indentation in utility_classes.js Co-authored-by: Josh Romero 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 --- CHANGELOG.md | 1 + .../views/utility_classes/utility_classes.js | 18 ++++++++++++++++++ src/global_styling/utility/_utility.scss | 1 + .../global_styling/utility/_utility.scss | 1 + 4 files changed, 21 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 754720fdba..6b0e2ad6dd 100644 --- 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 index 71a24adca4..529d916251 100644 --- 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={` /* Your content */ +`} + /> + + + Changes the element’s display property to{' '} + display: none; +

+ } + example={ + + Displaying none + + } + snippet={` + /* Your content */ `} /> diff --git a/src/global_styling/utility/_utility.scss b/src/global_styling/utility/_utility.scss index e522b1ea3e..b2c4a0100c 100644 --- 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 index e522b1ea3e..b2c4a0100c 100644 --- 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;