@spaced-out/ui-design-system 0.1.3 → 0.1.4

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.4](https://github.com/spaced-out/ui-design-system/compare/v0.1.3...v0.1.4) (2023-04-03)
+
+
+### Bug Fixes
+
+* avatar-tooltip, panel header, table ([#93](https://github.com/spaced-out/ui-design-system/issues/93)) ([907f0c3](https://github.com/spaced-out/ui-design-system/commit/907f0c3067e7ed4fd347dacfc1d3042601f4b9f3))
+* link disabled state fix ([0324fbb](https://github.com/spaced-out/ui-design-system/commit/0324fbb1e5254d7160e639cf34c756d60505f7af))
+
 ### [0.1.3](https://github.com/spaced-out/ui-design-system/compare/v0.1.2...v0.1.3) (2023-04-03)
 
 

package/lib/components/Avatar/Avatar.js

@@ -105,7 +105,7 @@ const AvatarConditionalContent = _ref2 => {
     className: classNames?.text
   }) : null);
 };
-const Avatar = _ref3 => {
+const Avatar = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     classNames,
     size = AVATAR_SIZE.medium,
@@ -125,7 +125,8 @@ const Avatar = _ref3 => {
       [_AvatarModule.default.mediumSize]: size === 'medium',
       [_AvatarModule.default.smallSize]: size === 'small'
     }, classNames?.wrapper),
-    style: style
+    style: style,
+    ref: ref
   }, ring ? /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_AvatarModule.default.ring, classNames?.ring)
   }, /*#__PURE__*/React.createElement("div", {
@@ -151,7 +152,7 @@ const Avatar = _ref3 => {
     statusBorderColorToken: statusBorderColorToken,
     classNames: classNames
   }));
-};
+});
 exports.Avatar = Avatar;
 const BaseAvatar = _ref4 => {
   let {

package/lib/components/Avatar/Avatar.js.flow

@@ -167,34 +167,54 @@ const AvatarConditionalContent = ({
   </div>
 );
 
-export const Avatar = ({
-  classNames,
-  size = AVATAR_SIZE.medium,
-  imageSrc,
-  text,
-  style,
-  iconName,
-  iconType,
-  color,
-  ring = false,
-  status,
-  statusBorderColorToken,
-}: AvatarProps): React.Node => (
-  <div
-    className={classify(
-      css.container,
+export const Avatar: React$AbstractComponent<AvatarProps, HTMLDivElement> =
+  React.forwardRef<AvatarProps, HTMLDivElement>(
+    (
       {
-        [css.largeSize]: size === 'large',
-        [css.mediumSize]: size === 'medium',
-        [css.smallSize]: size === 'small',
-      },
-      classNames?.wrapper,
-    )}
-    style={style}
-  >
-    {ring ? (
-      <div className={classify(css.ring, classNames?.ring)}>
-        <div className={css.whiteCircle}>
+        classNames,
+        size = AVATAR_SIZE.medium,
+        imageSrc,
+        text,
+        style,
+        iconName,
+        iconType,
+        color,
+        ring = false,
+        status,
+        statusBorderColorToken,
+      }: AvatarProps,
+      ref,
+    ) => (
+      <div
+        className={classify(
+          css.container,
+          {
+            [css.largeSize]: size === 'large',
+            [css.mediumSize]: size === 'medium',
+            [css.smallSize]: size === 'small',
+          },
+          classNames?.wrapper,
+        )}
+        style={style}
+        ref={ref}
+      >
+        {ring ? (
+          <div className={classify(css.ring, classNames?.ring)}>
+            <div className={css.whiteCircle}>
+              <AvatarConditionalContent
+                imageSrc={imageSrc}
+                text={text}
+                iconName={iconName}
+                iconType={iconType}
+                color={color}
+                size={size}
+                status={status}
+                statusBorderColorToken={statusBorderColorToken}
+                classNames={classNames}
+              />
+            </div>
+          </div>
+        ) : (
           <AvatarConditionalContent
             imageSrc={imageSrc}
             text={text}
@@ -206,23 +226,10 @@ export const Avatar = ({
             statusBorderColorToken={statusBorderColorToken}
             classNames={classNames}
           />
-        </div>
+        )}
       </div>
-    ) : (
-      <AvatarConditionalContent
-        imageSrc={imageSrc}
-        text={text}
-        iconName={iconName}
-        iconType={iconType}
-        color={color}
-        size={size}
-        status={status}
-        statusBorderColorToken={statusBorderColorToken}
-        classNames={classNames}
-      />
-    )}
-  </div>
-);
+    ),
+  );
 
 export const BaseAvatar = ({
   classNames,

package/lib/components/AvatarGroup/AvatarGroup.js

@@ -23,7 +23,8 @@ const AvatarGroup = _ref => {
     borderColor = _color.colorBackgroundTertiary,
     maxTooltipLines = 7,
     placement = 'top',
-    maxAvatars = 5
+    maxAvatars = 5,
+    tooltipElevation
   } = _ref;
   const childAvatarCount = React.Children.count(children);
   const leftOverlap = {
@@ -62,7 +63,8 @@ const AvatarGroup = _ref => {
     return /*#__PURE__*/React.createElement(_Tooltip.Tooltip, {
       body: /*#__PURE__*/React.createElement(NameListNode, null),
       bodyMaxLines: maxTooltipLines,
-      placement: placement
+      placement: placement,
+      elevation: tooltipElevation
     }, /*#__PURE__*/React.createElement("div", {
       className: _AvatarGroupModule.default.plusAvatar
     }, /*#__PURE__*/React.createElement(_Avatar.BaseAvatar, {

package/lib/components/AvatarGroup/AvatarGroup.js.flow

@@ -26,6 +26,7 @@ export type AvatarGroupProps = {
   maxTooltipLines?: number,
   placement?: PlacementType,
   maxAvatars?: number,
+  tooltipElevation?: string,
 };
 
 export const AvatarGroup = ({
@@ -35,6 +36,7 @@ export const AvatarGroup = ({
   maxTooltipLines = 7,
   placement = 'top',
   maxAvatars = 5,
+  tooltipElevation,
 }: AvatarGroupProps): React.Node => {
   const childAvatarCount = React.Children.count(children);
 
@@ -85,6 +87,7 @@ export const AvatarGroup = ({
         body={<NameListNode />}
         bodyMaxLines={maxTooltipLines}
         placement={placement}
+        elevation={tooltipElevation}
       >
         <div className={css.plusAvatar}>
           <BaseAvatar

package/lib/components/Link/Link.js

@@ -66,7 +66,7 @@ const Link = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     ...props
   } = _ref;
   return /*#__PURE__*/React.createElement("a", _extends({}, props, {
-    tabIndex: tabIndex,
+    tabIndex: disabled ? -1 : tabIndex,
     innerref: ref,
     "data-testid": "Link",
     className: (0, _classify.default)(_typographyModule.default.link, _typographyModule.default[as], _typographyModule.default[color], {

package/lib/components/Link/Link.js.flow

@@ -91,7 +91,7 @@ export const Link: React$AbstractComponent<
   ) => (
     <a
       {...props}
-      tabIndex={tabIndex}
+      tabIndex={disabled ? -1 : tabIndex}
       innerref={ref}
       data-testid="Link"
       className={classify(

package/lib/components/Panel/Panel.js

@@ -21,7 +21,8 @@ const PanelHeader = _ref => {
     children,
     hideCloseBtn,
     onCloseButtonClick,
-    className
+    className,
+    size
   } = _ref;
   return /*#__PURE__*/React.createElement(React.Fragment, null, React.Children.count(children) > 0 && /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_PanelModule.default.panelHeader, className)
@@ -31,7 +32,8 @@ const PanelHeader = _ref => {
     iconLeftName: "xmark",
     type: "ghost",
     onClick: onCloseButtonClick,
-    ariaLabel: "Close Button"
+    ariaLabel: "Close Button",
+    size: size
   })));
 };
 exports.PanelHeader = PanelHeader;

package/lib/components/Panel/Panel.js.flow

@@ -21,6 +21,7 @@ export type PanelHeaderProps = {
   hideCloseBtn?: boolean,
   onCloseButtonClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
   className?: string,
+  size?: 'medium' | 'small',
 };
 
 type FooterClassNames = $ReadOnly<{
@@ -49,6 +50,7 @@ export const PanelHeader = ({
   hideCloseBtn,
   onCloseButtonClick,
   className,
+  size,
 }: PanelHeaderProps): React.Node => (
   <>
     {React.Children.count(children) > 0 && (
@@ -62,6 +64,7 @@ export const PanelHeader = ({
             type="ghost"
             onClick={onCloseButtonClick}
             ariaLabel="Close Button"
+            size={size}
           ></Button>
         )}
       </div>

package/lib/components/SubMenu/SubMenu.module.css

@@ -65,7 +65,7 @@
 .subMenuGroupWrapper {
   display: flex;
   flex-direction: column;
-  padding: spaceSmall spaceNone;
+  padding: spaceXSmall spaceNone;
   flex: auto;
 }
 

package/lib/components/Table/StaticTable.js

@@ -8,6 +8,7 @@ exports.StaticTable = StaticTable;
 var React = _interopRequireWildcard(require("react"));
 var _get = _interopRequireDefault(require("lodash/get"));
 var _xor = _interopRequireDefault(require("lodash/xor"));
+var _classify = require("../../utils/classify");
 var _makeClassNameComponent = require("../../utils/makeClassNameComponent");
 var _Row = require("./Row");
 var _TableHeader = require("./TableHeader");
@@ -28,6 +29,7 @@ const BasicTableBody = (0, _makeClassNameComponent.makeClassNameComponent)(_Tabl
 exports.BasicTableBody = BasicTableBody;
 function StaticTable(props) {
   const {
+    classNames,
     className,
     Row,
     entries,
@@ -49,7 +51,8 @@ function StaticTable(props) {
     idName = 'id',
     emptyText,
     disabled,
-    customLoader
+    customLoader,
+    borderRadius
   } = props;
 
   // this is a fallback and honestly probably doesn't need the
@@ -73,14 +76,16 @@ function StaticTable(props) {
     }
   } : undefined;
   return /*#__PURE__*/React.createElement("div", {
-    className: _TableModule.default.tableContainer,
-    "data-id": "table-wrap"
+    className: (0, _classify.classify)(_TableModule.default.tableContainer, classNames?.wrapper),
+    "data-id": "table-wrap",
+    style: {
+      '--border-radius': borderRadius
+    }
   }, /*#__PURE__*/React.createElement(BasicTable, {
     "data-id": "basic-table",
-    className: className
+    className: (0, _classify.classify)(className, classNames?.table)
   }, showHeader && /*#__PURE__*/React.createElement(_TableHeader.DefaultTableHeader, {
-    tableHeaderClassName: tableHeaderClassName,
-    className: tableHeaderClassName,
+    className: (0, _classify.classify)(tableHeaderClassName, classNames?.tableHeader),
     sortable: sortable,
     columns: headers,
     handleSortClick: handleSortClick,
@@ -89,7 +94,9 @@ function StaticTable(props) {
     disabled: disabled,
     handleCheckboxClick: handleHeaderCheckboxClick,
     checked: selectedKeys == null || selectedKeys.length === 0 ? 'false' : selectedKeys.length < entries.length ? 'mixed' : 'true'
-  }), /*#__PURE__*/React.createElement(BasicTableBody, null, isLoading || !entries.length ? /*#__PURE__*/React.createElement(_Row.EmptyRow, {
+  }), /*#__PURE__*/React.createElement(BasicTableBody, {
+    className: classNames?.tableBody
+  }, isLoading || !entries.length ? /*#__PURE__*/React.createElement(_Row.EmptyRow, {
     isLoading: isLoading,
     emptyText: emptyText,
     headersLength: handleHeaderCheckboxClick ? headers.length + 1 : headers.length,

package/lib/components/Table/StaticTable.js.flow

@@ -4,6 +4,7 @@ import * as React from 'react';
 import get from 'lodash/get';
 import xor from 'lodash/xor';
 
+import {classify} from '../../utils/classify';
 import type {ClassNameComponent} from '../../utils/makeClassNameComponent';
 import {makeClassNameComponent} from '../../utils/makeClassNameComponent';
 
@@ -37,18 +38,15 @@ export function StaticTable<Data: GenericObject, Extras: GenericObject>(props: {
   rowKeys?: string[],
 }): React.Node {
   const {
+    classNames,
     className,
-
     Row,
-
     entries,
     extras,
     rowKeys,
-
     headers,
     showHeader = true,
     tableHeaderClassName,
-
     sortable,
     defaultSortKey,
     defaultSortDirection = 'original',
@@ -58,12 +56,12 @@ export function StaticTable<Data: GenericObject, Extras: GenericObject>(props: {
     sortDirection,
     selectedKeys,
     onSelect,
-
     isLoading,
     idName = 'id',
     emptyText,
     disabled,
     customLoader,
+    borderRadius,
   } = props;
 
   // this is a fallback and honestly probably doesn't need the
@@ -92,12 +90,20 @@ export function StaticTable<Data: GenericObject, Extras: GenericObject>(props: {
     : undefined;
 
   return (
-    <div className={css.tableContainer} data-id="table-wrap">
-      <BasicTable data-id="basic-table" className={className}>
+    <div
+      className={classify(css.tableContainer, classNames?.wrapper)}
+      data-id="table-wrap"
+      style={{
+        '--border-radius': borderRadius,
+      }}
+    >
+      <BasicTable
+        data-id="basic-table"
+        className={classify(className, classNames?.table)}
+      >
         {showHeader && (
           <DefaultTableHeader
-            tableHeaderClassName={tableHeaderClassName}
-            className={tableHeaderClassName}
+            className={classify(tableHeaderClassName, classNames?.tableHeader)}
             sortable={sortable}
             columns={headers}
             handleSortClick={handleSortClick}
@@ -115,7 +121,7 @@ export function StaticTable<Data: GenericObject, Extras: GenericObject>(props: {
           />
         )}
 
-        <BasicTableBody>
+        <BasicTableBody className={classNames?.tableBody}>
           {isLoading || !entries.length ? (
             <EmptyRow
               isLoading={isLoading}

package/lib/components/Table/Table.js

@@ -26,6 +26,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 function Table(props) {
   const {
     className,
+    classNames,
     Row,
     entries,
     extras,

package/lib/components/Table/Table.js.flow

@@ -19,7 +19,15 @@ export type GenericObject = {
   +[key: string]: mixed,
 };
 
+type ClassNames = $ReadOnly<{
+  wrapper?: string,
+  table?: string,
+  tableHeader?: string,
+  tableBody?: string,
+}>;
+
 export type TableProps<T, U> = {
+  classNames?: ClassNames,
   className?: string,
   Row?: TableRow<T, U>,
   headers: GenericHeaderItems<T, U>,
@@ -41,6 +49,7 @@ export type TableProps<T, U> = {
   emptyText?: React.Node,
   disabled?: boolean,
   customLoader?: React.Node,
+  borderRadius?: string,
 };
 
 /**
@@ -61,6 +70,7 @@ export function Table<Data: GenericObject, Extras: GenericObject>(
 ): React.Node {
   const {
     className,
+    classNames,
     Row,
     entries,
     extras,

package/lib/components/Table/Table.module.css

@@ -21,10 +21,11 @@
 }
 
 .tableContainer {
+  --border-radius: borderRadiusMedium;
   composes: borderPrimary from '../../styles/border.module.css';
   width: sizeFluid;
   overflow-x: scroll;
-  border-radius: borderRadiusMedium;
+  border-radius: var(--border-radius);
 }
 
 .defaultTable {
@@ -33,7 +34,7 @@
   overflow-x: scroll;
   border-collapse: collapse;
   box-sizing: border-box;
-  border-radius: borderRadiusMedium;
+  border-radius: var(--border-radius);
   box-shadow: borderWidthNone borderWidthNone borderWidthNone borderWidthPrimary
     colorBorderPrimary;
   table-layout: fixed;
@@ -41,8 +42,8 @@
 }
 .defaultTableBody {
   flex-flow: column;
-  border-radius: borderRadiusNone borderRadiusNone borderRadiusMedium
-    borderRadiusMedium;
+  border-radius: borderRadiusNone borderRadiusNone var(--border-radius)
+    var(--border-radius);
   background: colorBackgroundTertiary;
 }
 
@@ -142,11 +143,11 @@
 }
 
 .defaultTable .defaultRow:last-child td:first-child {
-  border-bottom-left-radius: borderRadiusMedium;
+  border-bottom-left-radius: var(--border-radius);
 }
 
 .defaultTable .defaultRow:last-child td:last-child {
-  border-bottom-right-radius: borderRadiusMedium;
+  border-bottom-right-radius: var(--border-radius);
 }
 
 .defaultTable .defaultRow:last-child {
@@ -188,7 +189,7 @@ th:first-child {
 
 .defaultTableHead {
   flex-flow: column;
-  border-radius: borderRadiusMedium borderRadiusMedium borderRadiusNone
+  border-radius: var(--border-radius) var(--border-radius) borderRadiusNone
     borderRadiusNone;
   composes: borderBottomPrimary from '../../styles/border.module.css';
   padding: spaceSmall;
@@ -197,7 +198,7 @@ th:first-child {
 .defaultHeaderRow {
   box-sizing: border-box;
   background: colorBackgroundPrimary;
-  border-radius: borderRadiusMedium borderRadiusMedium borderRadiusNone
+  border-radius: var(--border-radius) var(--border-radius) borderRadiusNone
     borderRadiusNone;
 }
 
@@ -227,11 +228,11 @@ th:first-child {
 }
 
 .defaultHeaderCell:first-child {
-  border-top-left-radius: borderRadiusMedium;
+  border-top-left-radius: var(--border-radius);
 }
 
 .defaultHeaderCell:last-child {
-  border-top-right-radius: borderRadiusMedium;
+  border-top-right-radius: var(--border-radius);
 }
 
 .defaultHeaderCell:not(.selectedHeader):hover {

package/lib/components/Table/TableHeader.js

@@ -55,7 +55,6 @@ const SortIcon = _ref => {
 };
 function DefaultTableHeader(props) {
   const {
-    tableHeaderClassName,
     className,
     sortable = false,
     columns,
@@ -129,7 +128,7 @@ function DefaultTableHeader(props) {
     }, filterIcon))));
   }));
   return /*#__PURE__*/React.createElement(BasicTableHead, {
-    className: (0, _classify.default)(_TableModule.default.tableHeaderSortable, tableHeaderClassName, className)
+    className: (0, _classify.default)(_TableModule.default.tableHeaderSortable, className)
   }, /*#__PURE__*/React.createElement(_Row.BasicRow, {
     className: _TableModule.default.defaultHeaderRow
   }, handleCheckboxClick && /*#__PURE__*/React.createElement(BasicHeadCell, {

package/lib/components/Table/TableHeader.js.flow

@@ -104,7 +104,6 @@ export function DefaultTableHeader<T: GenericObject, U: GenericObject>(
   props: TableHeaderProps<T, U>,
 ): React.Node {
   const {
-    tableHeaderClassName,
     className,
     sortable = false,
     columns,
@@ -208,13 +207,7 @@ export function DefaultTableHeader<T: GenericObject, U: GenericObject>(
   );
 
   return (
-    <BasicTableHead
-      className={classify(
-        css.tableHeaderSortable,
-        tableHeaderClassName,
-        className,
-      )}
-    >
+    <BasicTableHead className={classify(css.tableHeaderSortable, className)}>
       <BasicRow className={css.defaultHeaderRow}>
         {handleCheckboxClick && (
           <BasicHeadCell scope="col">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {