feat(Modal): remove deprecated mode prop (#1993)

BREAKING CHANGE:

- Modal: Remove deprecated `mode` prop – it will default to `custom` mode. Use rather the `Dialog` or the `Drawer` component.

packages/dnb-design-system-portal/src/docs/uilib/components/drawer/Examples.js

@@ -33,6 +33,54 @@ export const SimpleDrawerExample = () => (
     }
   </ComponentBox>
 )
+
+export const LeftPlacementDrawerExample = () => (
+  <ComponentBox data-visual-test="left-placement-drawer">
+    {
+      /* jsx */ `
+<Drawer 
+  title="Drawer title"
+  containerPlacement="left"
+> 
+  <P top>
+    Some informational content
+  </P>
+  <P top>
+    Elementum eu suspendisse sit platea elit porttitor magna
+    laoreet ad ultrices tempus urna curae parturient conubia
+    quisque viverra eget vestibulum neque pulvinar semper
+    vulputate id dis varius pellentesque nunc egestas risus amet
+  </P>
+</Drawer>    
+    `
+    }
+  </ComponentBox>
+)
+
+export const FullscreenDrawerExample = () => (
+  <ComponentBox data-visual-test="fullscreen-drawer">
+    {
+      /* jsx */ `
+<Drawer 
+  fullscreen
+  title="Drawer title"
+  triggerAttributes={{text: "Open drawer"}}
+> 
+  <P top>
+    Some informational content
+  </P>
+  <P top>
+    Elementum eu suspendisse sit platea elit porttitor magna
+    laoreet ad ultrices tempus urna curae parturient conubia
+    quisque viverra eget vestibulum neque pulvinar semper
+    vulputate id dis varius pellentesque nunc egestas risus amet
+  </P>
+</Drawer>    
+    `
+    }
+  </ComponentBox>
+)
+
 export const FullDrawerExample = () => (
   <ComponentBox
     data-visual-test="full-drawer"

packages/dnb-design-system-portal/src/docs/uilib/components/drawer/demos.md

@@ -5,6 +5,8 @@ showTabs: true
 import {
 SimpleDrawerExample,
 FullDrawerExample,
+FullscreenDrawerExample,
+LeftPlacementDrawerExample,
 DrawerCallbackExample,
 DrawerCustomTriggerExample,
 DrawerNoAnimationNoSpacing,
@@ -16,6 +18,14 @@ DrawerNoAnimationNoSpacing,
 
 <SimpleDrawerExample />
 
+### Basic Drawer left placement
+
+<LeftPlacementDrawerExample />
+
+### Basic Drawer in fullscreen
+
+<FullscreenDrawerExample />
+
 ### Drawer with custom content
 
 <FullDrawerExample />

packages/dnb-design-system-portal/src/docs/uilib/components/modal/Examples.js

@@ -14,14 +14,14 @@ export const ExampleCard = ({ children }) => (
     {children}
   </div>
 )
-export const ModalExampleModeCustom = () => (
-  <ComponentBox data-visual-test="modal-custom" scope={{ ExampleCard }}>
+export const ModalExampleStandard = () => (
+  <ComponentBox data-visual-test="modal-standard" scope={{ ExampleCard }}>
     {
       /* jsx */ `
-<Modal mode="custom">
+<Modal>
   <ExampleCard>
     <P>
-      This is a Modal mode that you can use to make custom variations
+      This is a Modal that you can use to make custom variations
     </P>
   </ExampleCard>
 </Modal>
@@ -49,7 +49,6 @@ const Component = () => {
         open_state={modalIsActive}
         labelled_by="custom-triggerer"
         on_close={() => setModalState(false)}
-        mode="custom"
       >
         <ExampleCard>
           <P>This Modal was opened by a custom trigger button.</P>
@@ -77,7 +76,6 @@ export const ModalExampleCloseByHandler = () => (
     const timeout = setTimeout(close, 3e3)
     return () => clearTimeout(timeout) 
   }}
-  mode="custom"
 >
   <ExampleCard>
     <P>This Modal will close in 3 seconds.</P>

packages/dnb-design-system-portal/src/docs/uilib/components/modal/demos.md

@@ -3,7 +3,7 @@ showTabs: true
 ---
 
 import {
-ModalExampleModeCustom,
+ModalExampleStandard,
 ModalExampleStateOnly,
 ModalExampleCloseByHandler
 } from 'Docs/uilib/components/modal/Examples'
@@ -12,11 +12,9 @@ ModalExampleCloseByHandler
 
 The following examples are to demonstrate the functionality of Modal. Please go to [Drawer demos](/uilib/components/drawer/demos) or [Dialog demos](/uilib/components/dialog/demos) for complete component demos.
 
-### Mode custom
+### Example
 
-Use `mode="custom"` in the Modal component to create other components with overlay.
-
-<ModalExampleModeCustom />
+<ModalExampleStandard />
 
 ### Open Modal by the state only
 

packages/dnb-design-system-portal/src/docs/uilib/components/modal/info.md

@@ -4,7 +4,7 @@ showTabs: true
 
 ## Description
 
-Modal is the root component for [Drawer](/uilib/components/drawer) and [Dialog](/uilib/components/dialog). If one of these satisfy your needs, you probably want to use those rather than directly using Modal. It is possible to implement other modal variants using `mode="custom"`. The new Modal is backward compatible with the previous Modal version using `mode="dialog"` (default) or `mode="drawer"`. The old documentation for Modal can be viewed in [Previous Modal (v1)](/uilib/components/modal/modal-v1).
+Modal is the root component for [Drawer](/uilib/components/drawer) and [Dialog](/uilib/components/dialog). If one of these satisfy your needs, you want to use those rather than directly using Modal. Using the Modal, it's possible to implement other modal variants than we provide as of now(Drawer and Dialog).
 
 NB! Modal dialogs interrupt users and demand an action. They are appropriate when the user’s attention needs to be directed toward important information.
 
@@ -16,7 +16,7 @@ The modal can be triggered from either a button or by using the `open_state` pro
 
 As the Modal is very often used in combination with other components and often as an enhancement of contextual content, it comes with a trigger button ([HelpButton](/uilib/components/help-button)) with a question mark icon by default. You can for sure disable that behavior by using `omitTriggerButton={true}`.
 
-You can also used the broadly available `suffix` property, like so:
+You can also use the broadly available `suffix` property, like so:
 
 ```jsx
 <Input
@@ -37,7 +37,7 @@ Entering a Modal (all variants) will:
 3. Invalidate every DOM element outside of the Modal / Drawer, so they are not accessible to keyboard and screen reader users. For doing that, there is a [helper function](/uilib/helpers/functions#interactioninvalidation-example) to be used in your application as well.
 4. Disable the body scroll possibility.
 5. Make the Modal / Drawer scrollable if needed.
-6. Dim the body / background with an overlay
+6. Dim the body / background with an overlay.
 
 ### Structure and content
 
@@ -49,11 +49,11 @@ Modal dialogs appear on top of the main content changing the _mode_ of the syste
 
 ### Disadvantages of Modal
 
-1.  They require immediate attention
-1.  They interrupt users
-1.  They cause users to forget what they were doing
-1.  They add extra goals - reading, interacting, and closing the Modal
-1.  They block the content in the background
+1.  They require immediate attention.
+1.  They interrupt users.
+1.  They cause users to forget what they were doing.
+1.  They add extra goals - reading, interacting, and closing the Modal.
+1.  They block the content in the background.
 
 ### Guidelines