From 5894367c612a4bdaacc96eb6f8e0e5ba2412b4e9 Mon Sep 17 00:00:00 2001 From: Tobias Date: Wed, 20 Feb 2019 15:24:15 +0100 Subject: [PATCH] extend the description about the dnb-code-style --- .../src/pages/uilib/usage/customisation/styling.md | 4 ++-- packages/dnb-ui-lib/src/patterns/helper-classes/Example.js | 7 +++++++ packages/dnb-ui-lib/src/patterns/helper-classes/details.md | 1 + 3 files changed, 10 insertions(+), 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 index 3f24135165b..94dddb46362 100644 --- 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 ``. 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 ``` -### 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 index ed42644cdb8..9286dad2908 100644 --- 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 { {/* @html */ ` +
+

Wrapper with the DNB Body Style (CSS reset)

+
+ `} + + + {/* @html */ `
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 index 4bba54ef8d6..4e3c09588d8 100644 --- 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` |