@openfin/ui-library 0.1.3-alpha.1616640160 → 0.1.3-alpha.1616718353

package/README.md

@@ -204,6 +204,15 @@ This triggers a Github Action to automatically build the latest version of the `
 - useColorScheme
 - useTheme
 
+## [Mixins](./src/components/system/ThemeProvider/lib/mixins.ts)
+
+CSS fragments that you can include in any styled component
+
+- `${Mixins.noSelect}`
+- `${Mixins.textOverflow}`
+- `${Mixins.scrollbar.base}`
+- `${Mixins.scrollbar.small}`
+
 ## Variants
 
 ### What are variants?

package/dist/components/layout/Box/box.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Box = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
+const mixins_1 = require("../../system/ThemeProvider/lib/mixins");
 const palette_1 = require("../../system/ThemeProvider/lib/palette");
 /**
  * ## BackgroundLevels
@@ -27,6 +28,11 @@ const BackgroundLevels = {
  * - None of the child properties should be applied unless specified.
  */
 exports.Box = styled_components_1.default.div `
+  /**
+   * Style Scrollbar for Boxes with overflow
+   */
+  ${mixins_1.Mixins.scrollbar.base}
+
   display: ${({ display = 'flex' }) => display};
   flex-direction: ${({ flexDirection = 'row' }) => flexDirection};
   flex-wrap: ${({ flexWrap = 'nowrap' }) => flexWrap};

package/dist/components/system/ThemeProvider/index.d.ts

@@ -1,6 +1,7 @@
 export * from './lib/constants';
 export * from './lib/helpers';
 export * from './lib/interface';
+export * from './lib/mixins';
 export * from './lib/palette';
 export * from './lib/types';
 export * from './themeProvider';

package/dist/components/system/ThemeProvider/index.js

@@ -13,6 +13,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./lib/constants"), exports);
 __exportStar(require("./lib/helpers"), exports);
 __exportStar(require("./lib/interface"), exports);
+__exportStar(require("./lib/mixins"), exports);
 __exportStar(require("./lib/palette"), exports);
 __exportStar(require("./lib/types"), exports);
 __exportStar(require("./themeProvider"), exports);

package/dist/components/system/ThemeProvider/lib/constants.d.ts

@@ -517,11 +517,3 @@ export declare const IconSize: {
     readonly xxlarge: "32px";
     readonly xxxlarge: "48px";
 };
-/**
- * Mixins --
- * Reusable utility fragments of CSS that make sense to express once (for consistency, maintainability).
- */
-export declare const Mixins: {
-    readonly noSelect: import("styled-components").FlattenSimpleInterpolation;
-    readonly textOverflow: import("styled-components").FlattenSimpleInterpolation;
-};

package/dist/components/system/ThemeProvider/lib/constants.js

@@ -19,9 +19,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Mixins = exports.IconSize = exports.IconSet = exports.Transition = exports.Typography = exports.LineHeight = exports.FontWeight = exports.FontSize = exports.FontStack = exports.Shadow = exports.Radius = exports.UnitPx = exports.Unit = exports.SizeName = exports.Size = exports.Color = void 0;
+exports.IconSize = exports.IconSet = exports.Transition = exports.Typography = exports.LineHeight = exports.FontWeight = exports.FontSize = exports.FontStack = exports.Shadow = exports.Radius = exports.UnitPx = exports.Unit = exports.SizeName = exports.Size = exports.Color = void 0;
 const RadixIcons = __importStar(require("@modulz/radix-icons"));
-const styled_components_1 = require("styled-components");
 const OpenFinIcons = __importStar(require("../../../elements/Icon/openfin"));
 /**
  * Color --
@@ -254,17 +253,3 @@ exports.IconSize = {
     [exports.Size.xxlarge]: exports.UnitPx.xxxlarge,
     [exports.Size.xxxlarge]: exports.UnitPx.xxxxlarge,
 };
-/**
- * Mixins --
- * Reusable utility fragments of CSS that make sense to express once (for consistency, maintainability).
- */
-exports.Mixins = {
-    noSelect: styled_components_1.css `
-    user-select: none;
-  `,
-    textOverflow: styled_components_1.css `
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  `,
-};

package/dist/components/system/ThemeProvider/lib/mixins.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Mixins --
+ * Reusable utility fragments of CSS that make sense to express once (for consistency, maintainability).
+ */
+export declare const Mixins: {
+    readonly noSelect: import("styled-components").FlattenSimpleInterpolation;
+    readonly textOverflow: import("styled-components").FlattenSimpleInterpolation;
+    readonly scrollbar: {
+        readonly base: import("styled-components").FlattenSimpleInterpolation;
+        readonly small: import("styled-components").FlattenSimpleInterpolation;
+    };
+};

package/dist/components/system/ThemeProvider/lib/mixins.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Mixins = void 0;
+const constants_1 = require("./constants");
+const styled_components_1 = require("styled-components");
+/**
+ * Mixins
+ */
+/**
+ * Prevent User Selection
+ */
+const noSelect = styled_components_1.css `
+  user-select: none;
+`;
+/**
+ * Prevent Text from Wrapping and truncate with ellipsis
+ * when it overflows the parent container
+ */
+const textOverflow = styled_components_1.css `
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+/**
+ * Scrollbar (4px)
+ * @link https://www.figma.com/file/0Y3pKZj0tJWuleF12h5Sua/Spatial---Components?node-id=2048%3A7477
+ */
+const scrollbar = styled_components_1.css `
+  &::-webkit-scrollbar {
+    width: var(--scrollbarSize, ${constants_1.UnitPx.xsmall});
+    height: var(--scrollbarSize, ${constants_1.UnitPx.xsmall});
+  }
+
+  &::-webkit-scrollbar-track {
+    background: ${constants_1.Color.neutralGray};
+    border-radius: var(--scrollbarSize, ${constants_1.UnitPx.xsmall});
+    opacity: 0.8;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: ${constants_1.Color.white};
+    width: var(--scrollbarSize, ${constants_1.UnitPx.xsmall});
+    height: var(--scrollbarSize, ${constants_1.UnitPx.xsmall});
+    border-radius: var(--scrollbarSize, ${constants_1.UnitPx.xsmall});
+    opacity: 0.8;
+  }
+`;
+/**
+ * Scrollbar Tiny (2px)
+ * Extends the regular scrollbar
+ */
+const scrollbarSmall = styled_components_1.css `
+  --scrollbarSize: 2px;
+  ${scrollbar};
+`;
+/**
+ * Mixins --
+ * Reusable utility fragments of CSS that make sense to express once (for consistency, maintainability).
+ */
+exports.Mixins = {
+    noSelect,
+    textOverflow,
+    scrollbar: {
+        [constants_1.Size.base]: scrollbar,
+        [constants_1.Size.small]: scrollbarSmall,
+    },
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openfin/ui-library",
   "description": "OpenFin UI Component Library",
-  "version": "0.1.3-alpha.1616640160",
+  "version": "0.1.3-alpha.1616718353",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "repository": "github:openfin/ui-library",