@linzjs/windows 9.5.6 → 10.1.0

package/README.md

@@ -579,7 +579,7 @@ export const TestShowPanelWithGlobalModal = () => (
 
 A toolbar ribbon with buttons, sliders, menus, and separators. Supports horizontal and vertical orientations.
 
-![ribbon-slider.png](https://github.com/matsondawson/windows-doc-images/raw/HEAD/docimages/ribbon-slider.png)![img.png]()
+![ribbon-slider.png](https://github.com/matsondawson/windows-doc-images/raw/HEAD/docimages/ribbon-slider.png)
 ![ribbon-panel.png](https://github.com/matsondawson/windows-doc-images/raw/HEAD/docimages/ribbon-panel.png)
 ![ribbon-menu.png](https://github.com/matsondawson/windows-doc-images/raw/HEAD/docimages/ribbon-menu.png)
 **Setup** — requires both `LuiModalAsyncContextProvider` and `PanelsContextProvider`:

package/dist/LuiModalAsync/LuiModalAsync.scss

@@ -1,44 +1,68 @@
-@use "@linzjs/lui/dist/scss/Core" as lui;
+@use "@linzjs/lui/dist/scss/Foundation/Variables/ColorVars" as colors;
+@use "@linzjs/lui/dist/scss/Foundation/Utilities/BoxShadow" as shadow;
+@use "@linzjs/lui/dist/scss/Foundation/Variables/SpacingVars" as spacing;
+@use "@linzjs/lui/dist/scss/Foundation/Variables/FormVars" as form;
+@use "@linzjs/lui/dist/scss/Foundation/Variables/FontVars" as fonts;
+@use "@linzjs/lui/dist/scss/Foundation/Utilities/REM" as rem;
+
+dialog.LuiModalAsync, div.LuiModalAsync  {
+  @include fonts.font-regular();
+  font-size: fonts.$base-font-size;
+  line-height: fonts.$base-line-height;
+  color: colors.$base-type-color;
+
+  .LuiModalAsync-header {
+    h4 {
+      @include fonts.font-regular();
+      font-size: rem.toRem(22px);
+      line-height: 1.5;
+      margin-bottom: 0;
+      color: colors.$heading-color;
+    }
+  }
+}
 
 dialog.LuiModalAsync::backdrop {
   background: rgb(0 0 0 / 10%);
 }
 
 dialog.LuiModalAsync, div.LuiModalAsync {
-  @include lui.drop-shadow(sm);
+  box-sizing: border-box;
+
+  @include shadow.drop-shadow(sm);
   border: none;
   display: flex;
   flex-direction: column;
   border-radius: 9px;
-  padding: lui.$unit-md;
+  padding: spacing.$unit-md;
   min-width: 400px;
   max-width: 80vw;
   max-height: 80vh;
-  gap: lui.$unit-md;
+  gap: spacing.$unit-md;
 
   &:focus-visible {
     outline: none;
   }
 
   .LuiModalAsync-header-icon {
-    fill: lui.$info;
+    fill: colors.$info;
   }
 
   .LuiModalAsync-help-icon * {
-    fill: lui.$gray;
+    fill: colors.$gray;
   }
 
   &.LuiModalPrefab-success {
     .LuiModalAsync-header .LuiModalAsync-header-icon {
-      fill: lui.$success;
+      fill: colors.$success;
     }
 
-    border-left: lui.$unit-xs solid lui.$success;
+    border-left: spacing.$unit-xs solid colors.$success;
   }
 
   &.LuiModalPrefab-info {
     .LuiModalAsync-header .LuiModalAsync-header-icon {
-      fill: lui.$info;
+      fill: colors.$info;
     }
 
     border-left: 0;
@@ -46,23 +70,23 @@ dialog.LuiModalAsync, div.LuiModalAsync {
 
   &.LuiModalPrefab-warning {
     .LuiModalAsync-header .LuiModalAsync-header-icon {
-      fill: lui.$warning;
+      fill: colors.$warning;
     }
 
-    border-left: lui.$unit-xs solid lui.$warning;
+    border-left: spacing.$unit-xs solid colors.$warning;
   }
 
   &.LuiModalPrefab-error {
     .LuiModalAsync-header .LuiModalAsync-header-icon {
-      fill: lui.$error;
+      fill: colors.$error;
     }
 
-    border-left: lui.$unit-sm solid lui.$error;
+    border-left: spacing.$unit-sm solid colors.$error;
   }
 
   &.LuiModalPrefab-blocked {
     .LuiModalAsync-header .LuiModalAsync-header-icon {
-      fill: lui.$fuscous;
+      fill: colors.$fuscous;
     }
 
     border-left: 0;
@@ -87,14 +111,14 @@ dialog.LuiModalAsync, div.LuiModalAsync {
 
   .LuiModalAsync-header {
     display: flex;
-    gap: lui.$unit-xs;
+    gap: spacing.$unit-xs;
 
     flex-direction: row;
     align-items: center;
 
     h4 {
       flex: 1;
-      color: lui.$charcoal;
+      color: colors.$charcoal;
     }
   }
 
@@ -102,7 +126,7 @@ dialog.LuiModalAsync, div.LuiModalAsync {
     display: flex;
     flex-direction: column;
     flex: 1 1 auto;
-    gap: lui.$unit-rg;
+    gap: spacing.$unit-rg;
     overflow: hidden;
   }
 
@@ -114,15 +138,15 @@ dialog.LuiModalAsync, div.LuiModalAsync {
 
   .lui-button:focus {
     // Button focus not showing unless window content has focus
-    outline: lui.$input-border-width solid lui.$input-focus;
+    outline: form.$input-border-width-thick solid colors.$input-focus;
   }
 }
 
 dialog.LuiModalPrefab-file {
-  gap: lui.$unit-sm;
-  padding: lui.$unit-md;
+  gap: spacing.$unit-sm;
+  padding: spacing.$unit-md;
 
   .LuiModalAsync-content {
-    padding-bottom: lui.$unit-xs;
+    padding-bottom: spacing.$unit-xs;
   }
 }

package/dist/LuiModalAsync/LuiModalAsync.tsx

@@ -1,6 +1,4 @@
-import './LuiModalAsync.scss';
-import '@linzjs/lui/dist/scss/base.scss';
-import '@linzjs/lui/dist/fonts';
+import '../index.scss';
 
 import clsx from 'clsx';
 import { delay } from 'lodash-es';

package/dist/LuiModalAsync/LuiModalAsyncHeader.tsx

@@ -1,4 +1,4 @@
-import './LuiModalAsync.scss';
+import '../index.scss';
 
 import { LuiButton, LuiIcon } from '@linzjs/lui';
 import { LuiIconName } from '@linzjs/lui/dist/assets/svg-content';
@@ -13,6 +13,7 @@ export interface LuiModalAsyncHeaderProps {
   closeButton?: true;
   helpLink?: string;
   onHelpClick?: () => void;
+  // @Deprecated This has no effect.  Don't use it
   helpButtonLevel?: 'text' | 'plain-text' | 'primary' | 'secondary' | 'tertiary' | 'success' | 'error';
 }
 

package/dist/components/CopyableText.scss

@@ -1,10 +1,12 @@
-@use "@linzjs/lui/dist/scss/Core" as lui;
+@use "@linzjs/lui/dist/scss/Foundation/Variables/ColorVars" as lui;
 
 .CopyToClipboard {
   cursor: pointer;
 }
 
 .windows_tooltip {
+  box-sizing: border-box;
+
   position: relative;
   cursor: pointer;
 

package/dist/components/CopyableText.tsx

@@ -1,4 +1,4 @@
-import './CopyableText.scss';
+import '../index.scss';
 
 import clsx from 'clsx';
 import { CSSProperties, ReactElement, useEffect, useRef, useState } from 'react';

package/dist/index.scss

@@ -0,0 +1,30 @@
+@use './panel/PanelBlue';
+@use './panel/Panel';
+@use './ribbon/RibbonMenu';
+@use './ribbon/stories/RibbonDemo';
+@use './ribbon/Ribbon';
+@use './components/CopyableText';
+@use './LuiModalAsync/LuiModalAsync';
+
+@use '@linzjs/lui/dist/scss/Elements/Buttons/buttons-linz';
+@use '@linzjs/lui/dist/scss/Elements/Buttons/buttons';
+@use '@linzjs/lui/dist/scss/Elements/Icons/icons';
+@use '@linzjs/lui/dist/scss/Elements/Tooltips/tippy';
+@use '@linzjs/lui/dist/scss/Components/LuiFormElements/LuiCheckboxInput/LuiCheckboxInput';
+@use '@linzjs/lui/dist/scss/Components/LuiTabs/LuiTabs';
+@use '@linzjs/lui/dist/scss/Components/LuiIcon/LuiIcons';
+@use '@linzjs/lui/dist/scss/Components/Spinner/spinner';
+@use '@linzjs/lui/dist/scss/Components/LuiLoadingSpinner/LuiLoadingSpinner';
+@use '@linzjs/lui/dist/scss/Components/LuiFormElements/LuiFileInputBox';
+@use '@linzjs/lui/dist/scss/Foundation/Utilities/BoxShadow';
+
+.LuiCheckboxInput.LuiCheckboxInput--nomargin {
+  margin-bottom: 0;
+}
+
+// set universal box sizing, plus the declaration in the HTML above
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}

package/dist/panel/Panel.scss

@@ -1,4 +1,16 @@
-@use "@linzjs/lui/dist/scss/Core" as lui;
+@use "@linzjs/lui/dist/scss/Foundation/Variables/ColorVars" as colors;
+@use "@linzjs/lui/dist/scss/Foundation/Variables/FontVars" as fonts;
+
+.WindowPanel, .PopoutWindowContainer  {
+  @include fonts.font-regular();
+  font-size: fonts.$base-font-size;
+  line-height: fonts.$base-line-height;
+  color: colors.$base-type-color;
+}
+
+.LuiCheckboxInput--nomargin {
+  margin: 0;
+}
 
 .panelDock > .panelDock-content:not(:empty) + .panelDock-empty {
   display: none;
@@ -15,13 +27,13 @@
   height: 48px;
   line-height: 48px;
   user-select: none;
-  color: lui.$charcoal;
+  color: colors.$charcoal;
   padding: 0 16px;
   display: flex;
   white-space: nowrap;
   overflow: hidden;
   justify-content: space-between;
-  border-bottom: 2px lui.$lily solid;
+  border-bottom: 2px colors.$lily solid;
   font-size: 1em;
   font-weight: 600;
   flex-direction: row;
@@ -59,6 +71,8 @@
 }
 
 .WindowPanel {
+  box-sizing: border-box;
+
   box-shadow: 0 1px 6px 0 #00000026, 0 6px 10px 0 #00000040;
   background-color: #fff;
   display: flex;
@@ -71,8 +85,8 @@
 }
 
 %WindowPanel-divider {
-  border-left: 2px solid lui.$lily;
-  background-color: lui.$lily;
+  border-left: 2px solid colors.$lily;
+  background-color: colors.$lily;
   width: 0;
   height: 19px;
 }
@@ -113,7 +127,7 @@
 }
 
 .WindowPanel-header-title-icon {
-  fill: lui.$fuscous !important;
+  fill: colors.$fuscous !important;
   margin-right: 8px;
 }
 

package/dist/panel/Panel.tsx

@@ -1,6 +1,4 @@
-import './Panel.scss';
-import './PanelBlue.scss';
-import '@linzjs/lui/dist/scss/base.scss';
+import '../index.scss';
 
 import clsx from 'clsx';
 import { isEqual, pick } from 'lodash-es';

package/dist/panel/PanelBlue.scss

@@ -1,4 +1,4 @@
-@use "@linzjs/lui/dist/scss/Core" as lui;
+@use "@linzjs/lui/dist/scss/Foundation/Variables/ColorVars" as lui;
 
 .WindowPanel-blue.WindowPanel-header, .WindowPanel-blue .WindowPanel-header {
   background: linear-gradient(270deg,#007198,#00425b 100%);

package/dist/panel/PanelInline.tsx

@@ -1,15 +1,18 @@
-import { PropsWithChildren } from 'react';
+import { CSSProperties, PropsWithChildren } from 'react';
 
 import { PanelContext } from './PanelContext';
 import { PanelInstanceContext } from './PanelInstanceContext';
 import { v4 } from '../common/uuid';
+import clsx from 'clsx';
 
 export interface PanelInlineProps {
   title: string;
-  width: number;
+  className?: string;
+  width?: CSSProperties['width'];
+  height?: CSSProperties['height'];
 }
 
-export const PanelInline = ({ title, width, children }: PropsWithChildren<PanelInlineProps>) => {
+export const PanelInline = ({ title, className, width, height, children }: PropsWithChildren<PanelInlineProps>) => {
   return (
     <PanelContext.Provider value={{ resizeable: false, resizePanel: () => {}, initialResizePanel: () => {} }}>
       <PanelInstanceContext.Provider
@@ -31,7 +34,7 @@ export const PanelInline = ({ title, width, children }: PropsWithChildren<PanelI
           bounds: undefined,
         }}
       >
-        <div className={'WindowPanel'} title={title} style={{ width }}>
+        <div className={clsx('WindowPanel', className)} title={title} style={{ width, height }}>
           {children}
         </div>
       </PanelInstanceContext.Provider>

package/dist/panel/openExternalWindow.ts

@@ -58,7 +58,7 @@ export const openExternalWindow = ({
     }
     // Create a new HTML element to hang our rendering off
     const newMountElement = externalWindow.document.createElement('div');
-    newMountElement.className = `PopoutWindowContainer ${className}`;
+    newMountElement.className = `PopoutWindowContainer ${className || ''}`;
     setContainerElement(newMountElement);
     externalWindow.document.body.appendChild(newMountElement);
 

package/dist/ribbon/Ribbon.scss

@@ -1,6 +1,12 @@
-@use "@linzjs/lui/dist/scss/Core" as lui;
+@use "@linzjs/lui/dist/scss/Foundation/Variables/ColorVars" as lui;
 
 .RibbonButton {
+  box-sizing: border-box;
+
+  img {
+    max-width: 100%;
+  }
+
   position: relative;
   background-color: transparent;
   padding: 4px;

package/dist/ribbon/RibbonButton.tsx

@@ -1,4 +1,4 @@
-import './Ribbon.scss';
+import '../index.scss';
 
 import { LuiIcon, LuiMiniSpinner } from '@linzjs/lui';
 import { IconName } from '@linzjs/lui/dist/components/LuiIcon/LuiIcon';

package/dist/ribbon/RibbonButtonLink.tsx

@@ -1,4 +1,4 @@
-import './Ribbon.scss';
+import '../index.scss';
 
 import { forwardRef } from 'react';
 

package/dist/ribbon/RibbonButtonOpenPanel.tsx

@@ -1,4 +1,4 @@
-import './Ribbon.scss';
+import '../index.scss';
 
 import clsx from 'clsx';
 import { forwardRef, useContext } from 'react';

package/dist/ribbon/RibbonContainer.tsx

@@ -1,4 +1,4 @@
-import './Ribbon.scss';
+import '../index.scss';
 
 import { CSSProperties, PropsWithChildren } from 'react';
 

package/dist/ribbon/RibbonMenu.scss

@@ -1,4 +1,4 @@
-@use "@linzjs/lui/dist/scss/Core" as lui;
+@use "@linzjs/lui/dist/scss/Foundation/Variables/ColorVars" as lui;
 
 .RibbonMenuSeparator {
   height: 1px;

package/dist/ribbon/RibbonMenuOption.tsx

@@ -1,4 +1,4 @@
-import './RibbonMenu.scss';
+import '../index.scss';
 
 import { LuiIcon } from '@linzjs/lui';
 import { IconName } from '@linzjs/lui/dist/components/LuiIcon/LuiIcon';

package/dist/ribbon/RibbonMenuSeparator.tsx

@@ -1,4 +1,4 @@
-import './Ribbon.scss';
+import '../index.scss';
 
 export const RibbonMenuSeparator = () => {
   return <div className="RibbonMenuSeparator" />;

package/dist/ribbon/RibbonSeparator.tsx

@@ -1,3 +1,3 @@
-import './Ribbon.scss';
+import '../index.scss';
 
 export const RibbonSeparator = () => <div className="RibbonButton-separator">&nbsp;</div>;

package/dist/ribbon/RibbonSliderButton.tsx

@@ -1,4 +1,4 @@
-import './Ribbon.scss';
+import '../index.scss';
 
 import clsx from 'clsx';
 import { PropsWithChildren, ReactElement, useState } from 'react';

package/dist/ribbon/stories/RibbonDemo.scss

@@ -0,0 +1,30 @@
+@use "@linzjs/lui/dist/scss/Foundation/Variables/ColorVars" as lui;
+
+.RibbonDemoContent {
+  padding: 20px 24px 24px 16px;
+  gap: 12px;
+}
+
+.RibbonDemoSwitch {
+  display: flex;
+  flex-direction: row;
+  gap: 12px;
+  align-items: start;
+  padding: 12px 0 0;
+
+  div:first-child {
+    display: flex;
+  }
+}
+
+.RibbonDemoSwitch-textHeader {
+  line-height: 20px;
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.RibbonDemoSwitch-textDescription {
+  font-weight: 400;
+  font-size: 14px;
+  color: lui.$fuscous;
+}

package/package.json

@@ -13,7 +13,7 @@
     "popout"
   ],
   "main": "./dist/index.ts",
-  "version": "9.5.6",
+  "version": "10.1.0",
   "peerDependencies": {
     "@linzjs/lui": ">=23",
     "react": ">=18",