@rio-cloud/rio-uikit 0.16.2 → 0.16.3-beta.1

package/AspectRatioPlaceholder.d.ts

@@ -0,0 +1,5 @@
+declare module '@rio-cloud/rio-uikit/AspectRatioPlaceholder' {
+    import React from 'react';
+    import { AspectRatioPlaceholderProps } from './types';
+    export default class AspectRatioPlaceholder extends React.Component<AspectRatioPlaceholderProps> {}
+}

package/ConfirmationDialog.d.ts

@@ -7,6 +7,8 @@ declare module '@rio-cloud/rio-uikit/ConfirmationDialog' {
         static SIZE_LG = 'lg';
         static SIZE_XL = 'xl';
         static SIZE_FULL = 'full';
+        static SIZE_FULL_WIDTH = 'fullwidth';
+        static SIZE_FULL_HEIGHT = 'fullheight';
         static SIZE_FULL_SCREEN = 'fullscreen';
     }
 }

package/Dialog.d.ts

@@ -5,6 +5,8 @@ declare module '@rio-cloud/rio-uikit/Dialog' {
     export default class Dialog extends React.Component<DialogProps> {
         public static SIZE_FULL_SCREEN: 'fullscreen';
         public static SIZE_FULL: 'full';
+        public static SIZE_FULL_WIDTH: 'fullwidth';
+        public static SIZE_FULL_HEIGHT: 'fullheight';
         public static SIZE_XL: 'xl';
         public static SIZE_LG: 'lg';
         public static SIZE_MD: 'md';

package/README.md

@@ -17,6 +17,13 @@ When releasing a new version:
 1. Create new `release/${VERSION}` branch and trigger pipeline with a commit
 2. After the new uikit-demo is published, update `versionsList.json` in `master` branch.
 
+Create a new development beta version:
+
+1. Update the `package.json`. Example `0.16.3-beta.1`
+2. Update the `version.json`. Example `0.16.3-beta.1`
+3. run `npm i` or update `package-lock.json`. Example `0.16.3-beta.1`
+4. Update the `uikit-demo/package.json`. Example `0.16.3`
+
 ## Development
 
 To run the UIKIT and the UIKIT Demo locally for development, use:
@@ -69,14 +76,17 @@ We introduced a versions list containing all the versions for which a uikit-demo
 The UIKIT needs to be published to NPM for the JavaScript components and the UIKIT CDN for the CSS files.
 
 ### Publish to NPM
+
 Run `npm run build:npm` to compile the components via babel to the `package` folder. The UIKIT exports CommonJS and ESM files. Later ones are directly in the package root. CommonJS components are generated in `package/lib/es` due to backwards compatibility reasons as Services import those components from `lib/es`.
 
-__Publish__ the UIKIT __only from__ the __package__ folder. All required files like package.json, README and License files are copied there during the build.
+**Publish** the UIKIT **only from** the **package** folder. All required files like package.json, README and License files are copied there during the build.
 
 ### Publishing to UIKIT CDN
+
 Run `npm run build` to build the production bundle and compile the styles to inspect locally. When comitting to the main development branch the build outcome from `dist` is published via our internal CICD pipeline.
 
 ### Beta Versions
+
 Beta versions of the UIKIT ideally should be kept in synch in NPM and CDN. After a new beta has been released, increase the version number to avoid overwriting published stylings.
 
 ## License

package/SaveDialog.d.ts

@@ -7,6 +7,8 @@ declare module '@rio-cloud/rio-uikit/SaveDialog' {
         static SIZE_LG = 'lg';
         static SIZE_XL = 'xl';
         static SIZE_FULL = 'full';
+        static SIZE_FULL_WIDTH: 'fullwidth';
+        static SIZE_FULL_HEIGHT: 'fullheight';
         static SIZE_FULL_SCREEN = 'fullscreen';
     }
 }

package/SimpleDialog.d.ts

@@ -7,6 +7,8 @@ declare module '@rio-cloud/rio-uikit/SimpleDialog' {
         static SIZE_LG = 'lg';
         static SIZE_XL = 'xl';
         static SIZE_FULL = 'full';
+        static SIZE_FULL_WIDTH: 'fullwidth';
+        static SIZE_FULL_HEIGHT: 'fullheight';
         static SIZE_FULL_SCREEN = 'fullscreen';
     }
 }

package/SplitDialog.d.ts

@@ -7,6 +7,8 @@ declare module '@rio-cloud/rio-uikit/SplitDialog' {
         static SIZE_LG = 'lg';
         static SIZE_XL = 'xl';
         static SIZE_FULL = 'full';
+        static SIZE_FULL_WIDTH: 'fullwidth';
+        static SIZE_FULL_HEIGHT: 'fullheight';
         static SIZE_FULL_SCREEN = 'fullscreen';
     }
 }

package/components/dialog/Dialog.js

@@ -84,7 +84,7 @@ var Dialog = function Dialog(props) {
     dialogWrapperRef && dialogWrapperRef.current && dialogWrapperRef.current.focus();
   };
   var modalClasses = classNames('modal', 'show', className);
-  var modalDialogClasses = classNames(MODAL_DIALOG_CLASS, useOverflow && 'modal-overflow', bsSize === Dialog.SIZE_SM && 'modal-sm', bsSize === Dialog.SIZE_LG && 'modal-lg', bsSize === Dialog.SIZE_XL && 'modal-xl', bsSize === Dialog.SIZE_FULL && 'modal-full', bsSize === Dialog.SIZE_FULL_SCREEN && 'modal-fullscreen');
+  var modalDialogClasses = classNames(MODAL_DIALOG_CLASS, useOverflow && 'modal-overflow', bsSize === Dialog.SIZE_SM && 'modal-sm', bsSize === Dialog.SIZE_LG && 'modal-lg', bsSize === Dialog.SIZE_XL && 'modal-xl', bsSize === Dialog.SIZE_FULL && 'modal-full-width', bsSize === Dialog.SIZE_FULL_WIDTH && 'modal-full-width', bsSize === Dialog.SIZE_FULL_HEIGHT && 'modal-full-height', bsSize === Dialog.SIZE_FULL_SCREEN && 'modal-fullscreen');
   var backdropClasses = classNames('modal-backdrop');
   return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(CSSTransition, {
     "in": open,
@@ -121,6 +121,8 @@ Dialog.SIZE_MD = 'md'; // default
 Dialog.SIZE_LG = 'lg';
 Dialog.SIZE_XL = 'xl';
 Dialog.SIZE_FULL = 'full';
+Dialog.SIZE_FULL_WIDTH = 'fullwidth';
+Dialog.SIZE_FULL_HEIGHT = 'fullheight';
 Dialog.SIZE_FULL_SCREEN = 'fullscreen';
 Dialog.defaultProps = {
   show: false,

package/index.d.ts

@@ -158,6 +158,8 @@ declare module '@rio-cloud/rio-uikit' {
     export class Dialog extends React.Component<DialogProps> {
         public static SIZE_FULL_SCREEN: 'fullscreen';
         public static SIZE_FULL: 'full';
+        public static SIZE_FULL_WIDTH = 'fullwidth';
+        public static SIZE_FULL_HEIGHT = 'fullheight';
         public static SIZE_XL: 'xl';
         public static SIZE_LG: 'lg';
         public static SIZE_MD: 'md';

package/lib/es/AspectRatioPlaceholder.d.ts

@@ -0,0 +1,5 @@
+declare module '@rio-cloud/rio-uikit/lib/es/AspectRatioPlaceholder' {
+    import React from 'react';
+    import { AspectRatioPlaceholderProps } from './types';
+    export default class AspectRatioPlaceholder extends React.Component<AspectRatioPlaceholderProps> {}
+}

package/lib/es/ConfirmationDialog.d.ts

@@ -7,6 +7,8 @@ declare module '@rio-cloud/rio-uikit/lib/es/ConfirmationDialog' {
         static SIZE_LG = 'lg';
         static SIZE_XL = 'xl';
         static SIZE_FULL = 'full';
+        static SIZE_FULL_WIDTH = 'fullwidth';
+        static SIZE_FULL_HEIGHT = 'fullheight';
         static SIZE_FULL_SCREEN = 'fullscreen';
     }
 }

package/lib/es/Dialog.d.ts

@@ -5,6 +5,8 @@ declare module '@rio-cloud/rio-uikit/lib/es/Dialog' {
     export default class Dialog extends React.Component<DialogProps> {
         public static SIZE_FULL_SCREEN: 'fullscreen';
         public static SIZE_FULL: 'full';
+        public static SIZE_FULL_WIDTH: 'fullwidth';
+        public static SIZE_FULL_HEIGHT: 'fullheight';
         public static SIZE_XL: 'xl';
         public static SIZE_LG: 'lg';
         public static SIZE_MD: 'md';

package/lib/es/SaveDialog.d.ts

@@ -7,6 +7,8 @@ declare module '@rio-cloud/rio-uikit/lib/es/SaveDialog' {
         static SIZE_LG = 'lg';
         static SIZE_XL = 'xl';
         static SIZE_FULL = 'full';
+        static SIZE_FULL_WIDTH: 'fullwidth';
+        static SIZE_FULL_HEIGHT: 'fullheight';
         static SIZE_FULL_SCREEN = 'fullscreen';
     }
 }

package/lib/es/SimpleDialog.d.ts

@@ -7,6 +7,8 @@ declare module '@rio-cloud/rio-uikit/lib/es/SimpleDialog' {
         static SIZE_LG = 'lg';
         static SIZE_XL = 'xl';
         static SIZE_FULL = 'full';
+        static SIZE_FULL_WIDTH: 'fullwidth';
+        static SIZE_FULL_HEIGHT: 'fullheight';
         static SIZE_FULL_SCREEN = 'fullscreen';
     }
 }

package/lib/es/SplitDialog.d.ts

@@ -7,6 +7,8 @@ declare module '@rio-cloud/rio-uikit/lib/es/SplitDialog' {
         static SIZE_LG = 'lg';
         static SIZE_XL = 'xl';
         static SIZE_FULL = 'full';
+        static SIZE_FULL_WIDTH: 'fullwidth';
+        static SIZE_FULL_HEIGHT: 'fullheight';
         static SIZE_FULL_SCREEN = 'fullscreen';
     }
 }

package/lib/es/components/dialog/Dialog.js

@@ -94,7 +94,7 @@ var Dialog = function Dialog(props) {
     dialogWrapperRef && dialogWrapperRef.current && dialogWrapperRef.current.focus();
   };
   var modalClasses = (0, _classnames["default"])('modal', 'show', className);
-  var modalDialogClasses = (0, _classnames["default"])(MODAL_DIALOG_CLASS, useOverflow && 'modal-overflow', bsSize === Dialog.SIZE_SM && 'modal-sm', bsSize === Dialog.SIZE_LG && 'modal-lg', bsSize === Dialog.SIZE_XL && 'modal-xl', bsSize === Dialog.SIZE_FULL && 'modal-full', bsSize === Dialog.SIZE_FULL_SCREEN && 'modal-fullscreen');
+  var modalDialogClasses = (0, _classnames["default"])(MODAL_DIALOG_CLASS, useOverflow && 'modal-overflow', bsSize === Dialog.SIZE_SM && 'modal-sm', bsSize === Dialog.SIZE_LG && 'modal-lg', bsSize === Dialog.SIZE_XL && 'modal-xl', bsSize === Dialog.SIZE_FULL && 'modal-full-width', bsSize === Dialog.SIZE_FULL_WIDTH && 'modal-full-width', bsSize === Dialog.SIZE_FULL_HEIGHT && 'modal-full-height', bsSize === Dialog.SIZE_FULL_SCREEN && 'modal-fullscreen');
   var backdropClasses = (0, _classnames["default"])('modal-backdrop');
   return /*#__PURE__*/_reactDom["default"].createPortal( /*#__PURE__*/_react["default"].createElement(_reactTransitionGroup.CSSTransition, {
     "in": open,
@@ -131,6 +131,8 @@ Dialog.SIZE_MD = 'md'; // default
 Dialog.SIZE_LG = 'lg';
 Dialog.SIZE_XL = 'xl';
 Dialog.SIZE_FULL = 'full';
+Dialog.SIZE_FULL_WIDTH = 'fullwidth';
+Dialog.SIZE_FULL_HEIGHT = 'fullheight';
 Dialog.SIZE_FULL_SCREEN = 'fullscreen';
 Dialog.defaultProps = {
   show: false,

package/lib/es/index.d.ts

@@ -158,6 +158,8 @@ declare module '@rio-cloud/lib/es/rio-uikit' {
     export class Dialog extends React.Component<DialogProps> {
         public static SIZE_FULL_SCREEN: 'fullscreen';
         public static SIZE_FULL: 'full';
+        public static SIZE_FULL_WIDTH = 'fullwidth';
+        public static SIZE_FULL_HEIGHT = 'fullheight';
         public static SIZE_XL: 'xl';
         public static SIZE_LG: 'lg';
         public static SIZE_MD: 'md';

package/lib/es/styles/components/ApplicationHeader.less

@@ -456,6 +456,8 @@
   }
 
   .CollapsedDropdown {
+    display: block;
+    
     > .dropdown-menu {
       left: auto;
       right: 0;

package/lib/es/styles/components/Dialog.less

@@ -1,6 +1,7 @@
 @modal-outer-margin: 30px;
 @modal-inner-padding: 20px;
-@modal-title-padding: 15px;
+@modal-title-y-padding: 15px;
+@modal-title-x-padding: 20px;
 @modal-content-bg: var(--color-white);
 @modal-content-border-color: var(--gray-light);
 @modal-backdrop-bg: var(--always-color-black);
@@ -134,7 +135,6 @@ body {
         border-bottom: 1px solid @modal-header-border-color;
         display: flex;
         justify-content: space-between;
-        padding: @modal-title-padding;
         padding: 0;
         position: relative;
         z-index: 1;
@@ -146,7 +146,7 @@ body {
           float: left;
           font-weight: @font-light;
           justify-content: center;
-          padding: 15px;
+          padding: @modal-title-y-padding @modal-title-x-padding;
           width: calc(~'100% - 60px');
           word-break: break-word;
 
@@ -251,16 +251,12 @@ body {
         width: @modal-xl;
       }
 
-      &.modal-full {
-        width: calc(~'100vw - @{modal-outer-margin} * 2');
-      }
-
-      &.modal-fullscreen {
+      &.modal-fullscreen, &.modal-full, &.modal-full-width {
         width: calc(~'100vw - @{modal-outer-margin} * 2');
       }
     }
 
-    &.modal-fullscreen {
+    &.modal-fullscreen, &.modal-full-height {
       .modal-content {
         height: calc(~'100vh - (@{modal-outer-margin} * 2)'); // --vh fallback
         height: calc(~'var(--vh, 1vh) * 100 - (@{modal-outer-margin} * 2)');
@@ -275,6 +271,7 @@ body {
         .modal-body {
           flex: 1 1 0; // instead "auto" we 0 for safari
           position: relative;
+          overflow-y: auto;
 
           .iframe-wrapper {
             overflow: hidden;
@@ -303,12 +300,6 @@ body {
         .modal-body {
           overflow-y: auto;
 
-          // &:after {
-          //   content: '';
-          //   display: block;
-          //   height: 30px;
-          // }
-
           &.no-overflow-gradient {
             + .modal-footer:before {
               display: none;
@@ -423,7 +414,8 @@ body {
 
     .modal-lg &,
     .modal-xl &,
-    .modal-full & {
+    .modal-full &,
+    .modal-full-width & {
       @media (min-width: @splitWrapperBreakpoint) {
         width: 20%;
       }
@@ -456,7 +448,8 @@ body {
 
     .modal-lg &,
     .modal-xl &,
-    .modal-full & {
+    .modal-full &,
+    .modal-full-width & {
       @media (min-width: @splitWrapperBreakpoint) {
         max-width: 80%;
       }
@@ -464,7 +457,7 @@ body {
   }
 }
 
-/* Animation classes for dialogs triggered by "react-transition-group" component */
+// Animation classes for dialogs triggered by "react-transition-group" component
 .modal-enter {
   .modal-content {
     display: block;
@@ -501,4 +494,26 @@ body {
   .modal-backdrop {
     opacity: 0;
   }
-}
+}
+
+// modal-body atomic vh classes for iframes with unknown height
+// .modal-body {
+//   &.height-100vh {
+//     height: calc(~"var(--vh, 1vh) * 100 - 190px") !important;
+
+//     @media (max-width: @modal-sm) {
+//       height: calc(~"var(--vh, 1vh) * 100 - 170px") !important;
+//     }
+//   }
+
+//   // no modal-footer version
+//   &:last-child {
+//     &.height-100vh {
+//       height: calc(~"var(--vh, 1vh) * 100 - 120px") !important;
+
+//       @media (max-width: @modal-sm) {
+//         height: calc(~"var(--vh, 1vh) * 100 - 90px") !important;
+//       }
+//     }
+//   }
+// }

package/lib/es/types.ts

@@ -277,7 +277,7 @@ export interface BarChartProps {
 
 export type bsStyle = 'default' | 'primary' | 'info' | 'warning' | 'danger' | 'success' | 'link';
 
-export type bsSizeDialog = 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'fullscreen';
+export type bsSizeDialog = 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'fullwidth' | 'fullheight' | 'fullscreen';
 
 export type bsSize = 'xs' | 'sm' | 'lg';
 
@@ -1551,7 +1551,7 @@ export interface SelectProps {
     useClear?: boolean;
     noItemMessage?: string | React.ReactNode;
     showSelectedItemIcon?: boolean;
-    showUnselectedIdemIcons?: boolean;
+    showUnselectedItemIcons?: boolean;
     value?: string[] | undefined;
     className?: string;
     btnClassName?: string;

package/lib/es/version.json

@@ -1,3 +1,3 @@
 {
-    "version": "0.16.2"
+"version": "0.16.3-beta.1"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rio-cloud/rio-uikit",
-    "version": "0.16.2",
+    "version": "0.16.3-beta.1",
     "description": "The RIO UIKIT component library",
     "repository": "https://collaboration.msi.audi.com/stash/projects/RIOFRONT/repos/uikit-web/browse",
     "scripts": {

package/styles/components/ApplicationHeader.less

@@ -456,6 +456,8 @@
   }
 
   .CollapsedDropdown {
+    display: block;
+    
     > .dropdown-menu {
       left: auto;
       right: 0;

package/styles/components/Dialog.less

@@ -1,6 +1,7 @@
 @modal-outer-margin: 30px;
 @modal-inner-padding: 20px;
-@modal-title-padding: 15px;
+@modal-title-y-padding: 15px;
+@modal-title-x-padding: 20px;
 @modal-content-bg: var(--color-white);
 @modal-content-border-color: var(--gray-light);
 @modal-backdrop-bg: var(--always-color-black);
@@ -134,7 +135,6 @@ body {
         border-bottom: 1px solid @modal-header-border-color;
         display: flex;
         justify-content: space-between;
-        padding: @modal-title-padding;
         padding: 0;
         position: relative;
         z-index: 1;
@@ -146,7 +146,7 @@ body {
           float: left;
           font-weight: @font-light;
           justify-content: center;
-          padding: 15px;
+          padding: @modal-title-y-padding @modal-title-x-padding;
           width: calc(~'100% - 60px');
           word-break: break-word;
 
@@ -251,16 +251,12 @@ body {
         width: @modal-xl;
       }
 
-      &.modal-full {
-        width: calc(~'100vw - @{modal-outer-margin} * 2');
-      }
-
-      &.modal-fullscreen {
+      &.modal-fullscreen, &.modal-full, &.modal-full-width {
         width: calc(~'100vw - @{modal-outer-margin} * 2');
       }
     }
 
-    &.modal-fullscreen {
+    &.modal-fullscreen, &.modal-full-height {
       .modal-content {
         height: calc(~'100vh - (@{modal-outer-margin} * 2)'); // --vh fallback
         height: calc(~'var(--vh, 1vh) * 100 - (@{modal-outer-margin} * 2)');
@@ -275,6 +271,7 @@ body {
         .modal-body {
           flex: 1 1 0; // instead "auto" we 0 for safari
           position: relative;
+          overflow-y: auto;
 
           .iframe-wrapper {
             overflow: hidden;
@@ -303,12 +300,6 @@ body {
         .modal-body {
           overflow-y: auto;
 
-          // &:after {
-          //   content: '';
-          //   display: block;
-          //   height: 30px;
-          // }
-
           &.no-overflow-gradient {
             + .modal-footer:before {
               display: none;
@@ -423,7 +414,8 @@ body {
 
     .modal-lg &,
     .modal-xl &,
-    .modal-full & {
+    .modal-full &,
+    .modal-full-width & {
       @media (min-width: @splitWrapperBreakpoint) {
         width: 20%;
       }
@@ -456,7 +448,8 @@ body {
 
     .modal-lg &,
     .modal-xl &,
-    .modal-full & {
+    .modal-full &,
+    .modal-full-width & {
       @media (min-width: @splitWrapperBreakpoint) {
         max-width: 80%;
       }
@@ -464,7 +457,7 @@ body {
   }
 }
 
-/* Animation classes for dialogs triggered by "react-transition-group" component */
+// Animation classes for dialogs triggered by "react-transition-group" component
 .modal-enter {
   .modal-content {
     display: block;
@@ -501,4 +494,26 @@ body {
   .modal-backdrop {
     opacity: 0;
   }
-}
+}
+
+// modal-body atomic vh classes for iframes with unknown height
+// .modal-body {
+//   &.height-100vh {
+//     height: calc(~"var(--vh, 1vh) * 100 - 190px") !important;
+
+//     @media (max-width: @modal-sm) {
+//       height: calc(~"var(--vh, 1vh) * 100 - 170px") !important;
+//     }
+//   }
+
+//   // no modal-footer version
+//   &:last-child {
+//     &.height-100vh {
+//       height: calc(~"var(--vh, 1vh) * 100 - 120px") !important;
+
+//       @media (max-width: @modal-sm) {
+//         height: calc(~"var(--vh, 1vh) * 100 - 90px") !important;
+//       }
+//     }
+//   }
+// }

package/types.ts

@@ -277,7 +277,7 @@ export interface BarChartProps {
 
 export type bsStyle = 'default' | 'primary' | 'info' | 'warning' | 'danger' | 'success' | 'link';
 
-export type bsSizeDialog = 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'fullscreen';
+export type bsSizeDialog = 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'fullwidth' | 'fullheight' | 'fullscreen';
 
 export type bsSize = 'xs' | 'sm' | 'lg';
 
@@ -1551,7 +1551,7 @@ export interface SelectProps {
     useClear?: boolean;
     noItemMessage?: string | React.ReactNode;
     showSelectedItemIcon?: boolean;
-    showUnselectedIdemIcons?: boolean;
+    showUnselectedItemIcons?: boolean;
     value?: string[] | undefined;
     className?: string;
     btnClassName?: string;

package/version.json

@@ -1,3 +1,3 @@
 {
-    "version": "0.16.2"
+"version": "0.16.3-beta.1"
 }