@spaced-out/ui-design-system 0.1.128 → 0.1.130-beta.0

package/.all-contributorsrc

@@ -27,8 +27,16 @@
       "avatar_url": "https://avatars.githubusercontent.com/u/8904071?v=4",
       "profile": "https://github.com/Anant-Raj",
       "contributions": [
-        "code",
-        "doc"
+        "code"
+      ]
+    },
+    {
+      "login": "ashwinikemshetty",
+      "name": "Ashwini Kemshetty",
+      "avatar_url": "https://avatars.githubusercontent.com/u/12839599?v=4",
+      "profile": "https://github.com/ashwinikemshetty",
+      "contributions": [
+        "code"
       ]
     }
   ],

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 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.130-beta.0](https://github.com/spaced-out/ui-design-system/compare/v0.1.129...v0.1.130-beta.0) (2024-09-11)
+
+
+### Features
+
+* large size in chips ([#266](https://github.com/spaced-out/ui-design-system/issues/266)) ([b4cf45c](https://github.com/spaced-out/ui-design-system/commit/b4cf45c84bf954253321834ccedc9ffb7f4c2019))
+
+### [0.1.129](https://github.com/spaced-out/ui-design-system/compare/v0.1.128...v0.1.129) (2024-09-10)
+
+
+### Bug Fixes
+
+* more-tab width bug fix ([#264](https://github.com/spaced-out/ui-design-system/issues/264)) ([f05dd2b](https://github.com/spaced-out/ui-design-system/commit/f05dd2b1d27558626f010bb4c2e2d688869ff487))
+
 ### [0.1.128](https://github.com/spaced-out/ui-design-system/compare/v0.1.127...v0.1.128) (2024-09-02)
 
 

package/README.md

@@ -262,7 +262,8 @@ Check out our [**Changelog here**](https://spaced-out.github.io/ui-design-system
   <tbody>
     <tr>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/superrover"><img src="https://avatars.githubusercontent.com/u/86281150?v=4?s=100" width="100px;" alt="Nishant Gaurav"/><br /><sub><b>Nishant Gaurav</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=superrover" title="Code">💻</a> <a href="https://github.com/Spaced-Out/ui-design-system/commits?author=superrover" title="Documentation">📖</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Anant-Raj"><img src="https://avatars.githubusercontent.com/u/8904071?v=4?s=100" width="100px;" alt="Anant Raj"/><br /><sub><b>Anant Raj</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=Anant-Raj" title="Code">💻</a> <a href="https://github.com/Spaced-Out/ui-design-system/commits?author=Anant-Raj" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Anant-Raj"><img src="https://avatars.githubusercontent.com/u/8904071?v=4?s=100" width="100px;" alt="Anant Raj"/><br /><sub><b>Anant Raj</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=Anant-Raj" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/ashwinikemshetty"><img src="https://avatars.githubusercontent.com/u/12839599?v=4?s=100" width="100px;" alt="Ashwini Kemshetty"/><br /><sub><b>Ashwini Kemshetty</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=ashwinikemshetty" title="Code">💻</a></td>
     </tr>
   </tbody>
 </table>

package/lib/components/ButtonTabs/ButtonTabDropdown.js

@@ -8,9 +8,12 @@ var React = _interopRequireWildcard(require("react"));
 var _react2 = require("@floating-ui/react");
 var _lodash = require("lodash");
 var _space = require("../../styles/variables/_space");
+var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _clickAway = require("../../utils/click-away");
 var _Menu = require("../Menu");
 var _ButtonTab = require("./ButtonTab");
+var _ButtonTabDropdownModule = _interopRequireDefault(require("./ButtonTabDropdown.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -25,7 +28,8 @@ const ButtonTabDropdown = _ref => {
     size,
     children,
     selectedButtonTabId,
-    onButtonTabSelect: onTabSelect
+    onButtonTabSelect: onTabSelect,
+    dropdownClass
   } = buttonTabProps;
   const childrenArray = React.Children.toArray(children);
   const menuOptions = childrenArray.map(child => {
@@ -76,7 +80,8 @@ const ButtonTabDropdown = _ref => {
     } = _ref3;
     return /*#__PURE__*/React.createElement("div", {
       "data-testid": "ButtonTabDropdown",
-      ref: menuBtnRef
+      ref: menuBtnRef,
+      className: (0, _classify.default)(_ButtonTabDropdownModule.default.buttonTabDropDownWrapper, dropdownClass)
     }, /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, _extends({}, buttonTabProps, {
       ref: refs.setReference,
       selectedButtonTabId: moreTabSelectedId,

package/lib/components/ButtonTabs/ButtonTabDropdown.js.flow

@@ -16,6 +16,7 @@ import {
 import {includes} from 'lodash';
 
 import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
+import classify from '../../utils/classify';
 import {ClickAway} from '../../utils/click-away';
 import type {AnchorType} from '../ButtonDropdown';
 import {Menu} from '../Menu';
@@ -23,11 +24,14 @@ import {Menu} from '../Menu';
 import type {ButtonTabProps} from './ButtonTab';
 import {ButtonTab} from './ButtonTab';
 
+import css from './ButtonTabDropdown.module.css';
+
 
 export type ButtonTabDropdownProps = {
   ...ButtonTabProps,
   title: string,
   anchorPosition?: AnchorType,
+  dropdownClass?: string,
   ...
 };
 
@@ -42,6 +46,7 @@ export const ButtonTabDropdown = ({
     children,
     selectedButtonTabId,
     onButtonTabSelect: onTabSelect,
+    dropdownClass,
   } = buttonTabProps;
   const childrenArray = React.Children.toArray(children);
   const menuOptions = childrenArray.map((child) => {
@@ -83,7 +88,11 @@ export const ButtonTabDropdown = ({
   return (
     <ClickAway>
       {({isOpen, onOpen, cancelNext, clickAway}) => (
-        <div data-testid="ButtonTabDropdown" ref={menuBtnRef}>
+        <div
+          data-testid="ButtonTabDropdown"
+          ref={menuBtnRef}
+          className={classify(css.buttonTabDropDownWrapper, dropdownClass)}
+        >
           <ButtonTab
             {...buttonTabProps}
             ref={refs.setReference}

package/lib/components/ButtonTabs/ButtonTabDropdown.module.css

@@ -0,0 +1,4 @@
+.buttonTabDropDownWrapper {
+  display: flex;
+  flex-shrink: 0;
+}

package/lib/components/ButtonTabs/ButtonTabs.js

@@ -36,7 +36,8 @@ const ButtonTabs = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         id: "more-tab",
         title: wrapTabTitle,
         iconName: "ellipsis-vertical",
-        anchorPosition: anchorPosition
+        anchorPosition: anchorPosition,
+        dropdownClass: classNames?.buttonTabDropdownWrapper
       }, wrappedNodes));
     }
   }

package/lib/components/ButtonTabs/ButtonTabs.js.flow

@@ -10,7 +10,10 @@ import {ButtonTabDropdown} from './ButtonTabDropdown';
 import css from './ButtonTabs.module.css';
 
 
-type ClassNames = $ReadOnly<{wrapper?: string}>;
+type ClassNames = $ReadOnly<{
+  wrapper?: string,
+  buttonTabDropdownWrapper?: string,
+}>;
 
 export type ButtonTabsProps = {
   classNames?: ClassNames,
@@ -60,6 +63,7 @@ export const ButtonTabs: React$AbstractComponent<
             title={wrapTabTitle}
             iconName="ellipsis-vertical"
             anchorPosition={anchorPosition}
+            dropdownClass={classNames?.buttonTabDropdownWrapper}
           >
             {wrappedNodes}
           </ButtonTabDropdown>,

package/lib/components/Chip/Chip.js

@@ -76,6 +76,7 @@ const Chip = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       [_ChipModule.default.warning]: semantic === CHIP_SEMANTIC.warning,
       [_ChipModule.default.danger]: semantic === CHIP_SEMANTIC.danger,
       [_ChipModule.default.secondary]: semantic === CHIP_SEMANTIC.secondary,
+      [_ChipModule.default.large]: size === 'large',
       [_ChipModule.default.medium]: size === 'medium',
       [_ChipModule.default.small]: size === 'small',
       [_ChipModule.default.dismissable]: dismissable,

package/lib/components/Chip/Chip.js.flow

@@ -40,13 +40,18 @@ export type BaseChipProps = {
   onMouseLeave?: ?(SyntheticEvent<HTMLElement>) => mixed,
 };
 
-export type MediumChipProps = {
+export type LargeChipProps = {
   ...BaseChipProps,
-  size?: 'medium',
   iconName?: string,
   iconType?: IconType,
   dismissable?: boolean,
   onDismiss?: ?(SyntheticEvent<HTMLElement>) => mixed,
+  size?: 'large',
+};
+
+export type MediumChipProps = {
+  ...LargeChipProps,
+  size?: 'medium',
 };
 
 export type SmallChipProps = {
@@ -54,7 +59,7 @@ export type SmallChipProps = {
   size?: 'small',
 };
 
-export type ChipProps = MediumChipProps | SmallChipProps;
+export type ChipProps = LargeChipProps | MediumChipProps | SmallChipProps;
 
 export const Chip: React$AbstractComponent<ChipProps, HTMLDivElement> =
   React.forwardRef<ChipProps, HTMLDivElement>(
@@ -114,6 +119,7 @@ export const Chip: React$AbstractComponent<ChipProps, HTMLDivElement> =
               [css.warning]: semantic === CHIP_SEMANTIC.warning,
               [css.danger]: semantic === CHIP_SEMANTIC.danger,
               [css.secondary]: semantic === CHIP_SEMANTIC.secondary,
+              [css.large]: size === 'large',
               [css.medium]: size === 'medium',
               [css.small]: size === 'small',
               [css.dismissable]: dismissable,

package/lib/components/Chip/Chip.module.css

@@ -26,7 +26,8 @@
 ) from '../../styles/variables/_border.css';
 @value (
   size18,
-  size26
+  size26,
+  size34
 ) from '../../styles/variables/_size.css';
 
 @value (
@@ -53,6 +54,12 @@
     borderWidthTertiary colorFocusPrimary;
 }
 
+.large {
+  padding: spaceNone spaceXSmall;
+  height: size34;
+  min-height: size34;
+}
+
 .medium {
   height: size26;
   min-height: size26;

package/package.json

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