extend the description about the dnb-code-style

dnbexperience · Feb 20, 2019 · 5894367 · 5894367
1 parent 452a31b
commit 5894367
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 2 deletions.
diff --git a/packages/dnb-design-system-portal/src/pages/uilib/usage/customisation/styling.md b/packages/dnb-design-system-portal/src/pages/uilib/usage/customisation/styling.md
@@ -44,7 +44,7 @@ The following Diagram gives an overall overview how the packages are structured.
 
 The **dnb-ui-core** package includes some styles witch effects the global scope (body and CSS reset). To avoid interference with existing styles, let's say a header or a menu, You could only use the **dnb-ui-basis** package in combination with other packages like **dnb-theme-ui** and **dnb-ui-components**.
 
-### Use Body Styles
+### Use Body Style elsewhere
 
 If You neither include the **dnb-ui-core** nor the **dnb-ui-body** package, then You ending up having no Eufemia styles for the Document `<body>`. To having them inside a wrapper anyway, simply use the following helper class: `.dnb-core-style`
 
@@ -54,7 +54,7 @@ If You neither include the **dnb-ui-core** nor the **dnb-ui-body** package, then
 </div>
 ```
 
-### Example imports
+### Example import
 
 ```js
 import 'dnb-ui-lib/style/basis'

diff --git a/packages/dnb-ui-lib/src/patterns/helper-classes/Example.js b/packages/dnb-ui-lib/src/patterns/helper-classes/Example.js
@@ -23,6 +23,13 @@ class Example extends PureComponent {
         </CodeBlock>
         <CodeBlock reactLive hideCode>
           {/* @html */ `
+<div class="dnb-core-style">
+  <h3 className="dnb-h3">Wrapper with the DNB Body Style (CSS reset)</h3>
+</div>
+        `}
+        </CodeBlock>
+        <CodeBlock reactLive hideCode>
+          {/* @html */ `
 <details>
   <summary className="dnb-tab-focus">
     Try to focus me with the Tab key

diff --git a/packages/dnb-ui-lib/src/patterns/helper-classes/details.md b/packages/dnb-ui-lib/src/patterns/helper-classes/details.md
@@ -1,6 +1,7 @@
 | Selector                | Description                                                                                                                                                                                                                                                                              |
 | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `dnb-section`           | Wraps content inside a visual section banner. Use additionally `dnb-section--content` to get the default padding inside                                                                                                                                                                  |
+| `dnb-core-style`        | In order to be able to have the core Body Style inside a wrapper and available for all its children. The Body Style contains among others stlyes, both the correct line-height and a CSS reset.                                                                                          |
 | `dnb-app-content-inner` | Adds simply a `overflow:hidden` to cut everything outside of our "content-inner"                                                                                                                                                                                                         |
 | `dnb-tab-focus`         | Removes default focus outline from a focusable element and adds a custom visual focus state when is focused by a tab key. There is also: `dnb-mouse-focus`, `dnb-focus-ring` and `dnb-no-focus`                                                                                          |
 | `dnb-form-group`        | Use it to wrap forms elements vertically or horizontally. This is not meant for production forms. But more for a small and quick solution to get labels and form elements aligned nicely. There is also, `dnb-form-group__position--vertical` and `dnb-form-group__position--horizontal` |