Skip to content

Commit

Permalink
Add CSS display-none utility (#1120)
Browse files Browse the repository at this point in the history
* 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]>
  • Loading branch information
ShatilKhan and joshuarrrr authored Jan 13, 2024
1 parent 96af93e commit 5e7ac43
Show file tree
Hide file tree
Showing 4 changed files with 21 additions and 0 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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))
Expand Down
18 changes: 18 additions & 0 deletions src-docs/src/views/utility_classes/utility_classes.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>`}
/>
</>
Expand Down
1 change: 1 addition & 0 deletions src/global_styling/utility/_utility.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
1 change: 1 addition & 0 deletions src/themes/oui-next/global_styling/utility/_utility.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down

0 comments on commit 5e7ac43

Please sign in to comment.