@spaced-out/ui-design-system 0.3.39 → 0.3.40

package/.all-contributorsrc

@@ -4,8 +4,7 @@
   "repoType": "github",
   "repoHost": "https://github.com",
   "files": [
-    "README.md",
-    "src/stories/INTRODUCTION.stories.mdx"
+    "README.md"
   ],
   "imageSize": 100,
   "commit": false,
@@ -18,7 +17,7 @@
       "profile": "https://github.com/superrover",
       "contributions": [
         "code",
-        "doc"
+        "infra"
       ]
     },
     {
@@ -38,7 +37,124 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "VivekJangid",
+      "name": "Vivek Jangid",
+      "avatar_url": "https://avatars.githubusercontent.com/u/33223696?v=4",
+      "profile": "https://github.com/VivekJangid",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "sharad-kushwah",
+      "name": "Sharad Kushwah",
+      "avatar_url": "https://avatars.githubusercontent.com/u/161806585?v=4",
+      "profile": "https://github.com/sharad-kushwah",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "sanskar-s",
+      "name": "Sanskar Saxena",
+      "avatar_url": "https://avatars.githubusercontent.com/u/137482980?v=4",
+      "profile": "https://github.com/sanskar-s",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "aditya-kaushal",
+      "name": "aditya-kaushal",
+      "avatar_url": "https://avatars.githubusercontent.com/u/141118827?v=4",
+      "profile": "https://github.com/aditya-kaushal",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "bhatiarush27",
+      "name": "Arush Bhatia",
+      "avatar_url": "https://avatars.githubusercontent.com/u/161808754?v=4",
+      "profile": "https://github.com/bhatiarush27",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "LakshayKumar-1",
+      "name": "LakshayKumar-1",
+      "avatar_url": "https://avatars.githubusercontent.com/u/183346574?v=4",
+      "profile": "https://github.com/LakshayKumar-1",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "Swatantramishra1",
+      "name": "Swatantra Mishra",
+      "avatar_url": "https://avatars.githubusercontent.com/u/5427027?v=4",
+      "profile": "https://github.com/Swatantramishra1",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "VishalBarnawal",
+      "name": "Vishal-sense",
+      "avatar_url": "https://avatars.githubusercontent.com/u/113020105?v=4",
+      "profile": "https://github.com/VishalBarnawal",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "vish-sah",
+      "name": "Vishwanath Sah",
+      "avatar_url": "https://avatars.githubusercontent.com/u/108925162?v=4",
+      "profile": "https://github.com/vish-sah",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "pearel-sense",
+      "name": "Pearel Nazareth",
+      "avatar_url": "https://avatars.githubusercontent.com/u/113005498?v=4",
+      "profile": "https://github.com/pearel-sense",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "deepak-rao-96",
+      "name": "deepak-rao-96",
+      "avatar_url": "https://avatars.githubusercontent.com/u/185754227?v=4",
+      "profile": "https://github.com/deepak-rao-96",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "darsh-mecwan-sense",
+      "name": "Darsh Mecwan",
+      "avatar_url": "https://avatars.githubusercontent.com/u/186684223?v=4",
+      "profile": "https://github.com/darsh-mecwan-sense",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "diwakersurya",
+      "name": "Diwaker Singh",
+      "avatar_url": "https://avatars.githubusercontent.com/u/7386665?v=4",
+      "profile": "https://github.com/diwakersurya",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 7
-}
+}

package/.cspell/custom-words.txt

@@ -30,6 +30,7 @@ datetime
 DEFAULTTEXT
 Dili
 dismissable
+diwakersurya
 Docgen
 drilldown
 Drilldown
@@ -123,10 +124,12 @@ useRowspanHeaders
 valuenow
 Velho
 Verda
+viewports
 vish
 VishalBarnawal
 Vivek
 voiceflow
+WCAG
 xmark
 yourcomponentname
 Yuzhno

package/.github/workflows/publish_to_npm.yml

@@ -22,7 +22,7 @@ jobs:
       - name: Check Permissions
         id: check-permissions
         env:
-          ALLOWED_USERS: superrover, Anant-Raj, ashwini-sensehq, vish-sah, VishalBarnawal, sanskar-s, VivekJangid, sharad-kushwah, Swatantramishra1, bhatiarush27, darsh-mecwan-sense
+          ALLOWED_USERS: superrover, Anant-Raj, diwakersurya, ashwini-sensehq, vish-sah, VishalBarnawal, sanskar-s, VivekJangid, sharad-kushwah, Swatantramishra1, bhatiarush27, darsh-mecwan-sense
         if: ${{ !contains(env.ALLOWED_USERS, github.actor) }}
         run: |
           echo "You don't have correct permissions to do this release"

package/.github/workflows/pull_request_checks.yml

@@ -1,7 +1,7 @@
 # Author: Nishant Gaurav
 # Note: Do not change
 
-name: Run Yarn Flow, Lint, and Spell Check
+name: Run Yarn Flow, Lint, Spell Check and Build
 
 on:
   pull_request:
@@ -20,16 +20,26 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v3
 
-      # Set up Node.js environment
-      - name: Setup Node.js
-        uses: actions/setup-node@v2
+      # Note(Nishant): Possible cleanup required Setup Node 18 for the base npm package
+      - name: Setup Node.js @18
+        uses: actions/setup-node@v4
         with:
           registry-url: https://registry.npmjs.org/
-          node-version: '18'
+          node-version: '18.20.5'
+
+      # Note(Nishant): Possible cleanup required Setup Node 20 for the dts-generator
+      # We already pin the node versions with volta so this should be fine(but not ideal)
+      - name: Setup Node.js @20
+        uses: actions/setup-node@v4
+        with:
+          registry-url: https://registry.npmjs.org/
+          node-version: '20.9.0'
 
       # Install project dependencies
       - name: Install dependencies
-        run: yarn install
+        run: |
+          yarn install
+          yarn --cwd dts-generator install
 
       # Run Yarn Flow static type checking
       - name: Run Yarn Flow
@@ -42,3 +52,16 @@ jobs:
       # Run ESLint code linting
       - name: Run Yarn Lint
         run: yarn lint:strict
+
+      # Run build step
+      # - name: Run Yarn Build
+      #   run: yarn build
+
+      # Validate if declaration files are generated
+      # - name: Validate .d.ts generation
+      #   run: |
+      #     count=$(find lib -name "*.d.ts" | wc -l)
+      #     if [ "$count" -eq 0 ]; then
+      #       echo "No .d.ts files were generated!"
+      #       exit 1
+      #     fi

package/.github/workflows/pull_request_semantics_checker.yml

@@ -1,5 +1,5 @@
 # Author: Nishant Gaurav
-# workflow to check for PR names wrt conventional commits, uses a third party action
+# workflow to check for PR names wrt conventional commits
 
 name: 'Lint PR'
 
@@ -11,10 +11,21 @@ on:
       - synchronize
 
 jobs:
-  main:
-    name: Validate PR title
+  validate-pr-title:
     runs-on: ubuntu-latest
     steps:
-      - uses: amannn/action-semantic-pull-request@v5
+      - name: Check PR title format
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          PR_TITLE: ${{ github.event.pull_request.title }}
+        run: |
+          echo "PR Title: \"$PR_TITLE\""
+
+          # Define allowed prefixes
+          if echo "$PR_TITLE" | grep -Eq '^(feat|fix|docs|chore|style|refactor|perf|test|build|ci)(\([a-zA-Z0-9\-]+\))?: .+'
+          then
+            echo "✅ PR title follows conventional commit format."
+          else
+            echo "❌ PR title does not follow conventional commit format."
+            echo "Title must start with one of: feat:, fix:, docs:, chore:, style:, refactor:, perf:, test:, build:, ci:"
+            exit 1
+          fi

package/CHANGELOG.md

@@ -2,6 +2,36 @@
 
 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.3.40](https://github.com/spaced-out/ui-design-system/compare/v0.3.40-beta.0...v0.3.40) (2025-05-16)
+
+
+### Features
+
+* multiline support in chips ([919bd29](https://github.com/spaced-out/ui-design-system/commit/919bd29671436a19e279c03b656faf1234ed8eae))
+* pr title check with conventional commits pre merge workflow now checks for build step ([59a941f](https://github.com/spaced-out/ui-design-system/commit/59a941f8f28337c9f9886e1e559a79fe47df94bb))
+
+
+### Bug Fixes
+
+* added intro and updated contributors ([35e0584](https://github.com/spaced-out/ui-design-system/commit/35e058457b737a647a77bc6862aa99d4e271c501))
+* fixes allcontributors ([01570de](https://github.com/spaced-out/ui-design-system/commit/01570de0b64ae1ffe79f800e6902e109839f9448))
+* fixes intro ([a4430fb](https://github.com/spaced-out/ui-design-system/commit/a4430fb76ddd149a417e2762c65d43c872086741))
+* installs dts generator before running the declaration files script ([e02361e](https://github.com/spaced-out/ui-design-system/commit/e02361e4bff04ed160078a79c19c59db988b8382))
+* removed the build step in checks ([e1c951d](https://github.com/spaced-out/ui-design-system/commit/e1c951d745570757d9cf4d2c9f110a70dbb4e0e8))
+* **typeahead:** mock api call function in typeahead stories ([#346](https://github.com/spaced-out/ui-design-system/issues/346)) ([7ac92b5](https://github.com/spaced-out/ui-design-system/commit/7ac92b55986c71778e269977e8017aa24c5b35a0))
+
+### [0.3.40-beta.0](https://github.com/spaced-out/ui-design-system/compare/v0.3.39...v0.3.40-beta.0) (2025-05-14)
+
+
+### Features
+
+* [GDS-512] simple and generic typeahead story for paginated api calls & useDebounce hook ([#344](https://github.com/spaced-out/ui-design-system/issues/344)) ([c5b917d](https://github.com/spaced-out/ui-design-system/commit/c5b917d963031f75ca3c73b4bc06f89d224ce0c1))
+
+
+### Bug Fixes
+
+* fixes TLI story ([4e3d6d4](https://github.com/spaced-out/ui-design-system/commit/4e3d6d46852f125553127d3d1d5b6e5d746486a1))
+
 ### [0.3.39](https://github.com/spaced-out/ui-design-system/compare/v0.3.39-beta.0...v0.3.39) (2025-05-13)
 
 

package/README.md

@@ -23,12 +23,17 @@
 
 ## Intro
 
-Genesis design system consists of a set of tools and protocols that unify design and development across surfaces (platforms) to deliver consistent
-user experiences. The system utilizes workflow automation to streamline the design and development process. It's comprised of a number of React
-web components that each play a unique role within the product development cycle.
-
-The integration of these components are intended to grow and scale overtime to increasingly decrease workflow friction and optimize the product
-development lifecycle.
+Genesis is the foundational design system at Sense. It serves as the
+single source of truth for our product UI crafted to ensure visual
+consistency, engineering efficiency, and design cohesion across the
+entire platform.
+
+Genesis is a systematic collection of reusable UI components, design
+tokens, utilities, and principles. It’s purpose-built to ensure every
+part of the Sense product ecosystem speaks the same design and
+interaction language. Whether you're building candidate workflows,
+recruiter dashboards, or internal analytics tools, Genesis provides the
+building blocks to do so with speed and reliability.
 
 ## Usage
 
@@ -261,9 +266,26 @@ Check out our [**Changelog here**](https://spaced-out.github.io/ui-design-system
 <table>
   <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/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="#infra-superrover" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</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>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/VivekJangid"><img src="https://avatars.githubusercontent.com/u/33223696?v=4?s=100" width="100px;" alt="Vivek Jangid"/><br /><sub><b>Vivek Jangid</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=VivekJangid" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/sharad-kushwah"><img src="https://avatars.githubusercontent.com/u/161806585?v=4?s=100" width="100px;" alt="Sharad Kushwah"/><br /><sub><b>Sharad Kushwah</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=sharad-kushwah" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/sanskar-s"><img src="https://avatars.githubusercontent.com/u/137482980?v=4?s=100" width="100px;" alt="Sanskar Saxena"/><br /><sub><b>Sanskar Saxena</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=sanskar-s" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/aditya-kaushal"><img src="https://avatars.githubusercontent.com/u/141118827?v=4?s=100" width="100px;" alt="aditya-kaushal"/><br /><sub><b>aditya-kaushal</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=aditya-kaushal" title="Code">💻</a></td>
+    </tr>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/bhatiarush27"><img src="https://avatars.githubusercontent.com/u/161808754?v=4?s=100" width="100px;" alt="Arush Bhatia"/><br /><sub><b>Arush Bhatia</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=bhatiarush27" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/LakshayKumar-1"><img src="https://avatars.githubusercontent.com/u/183346574?v=4?s=100" width="100px;" alt="LakshayKumar-1"/><br /><sub><b>LakshayKumar-1</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=LakshayKumar-1" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Swatantramishra1"><img src="https://avatars.githubusercontent.com/u/5427027?v=4?s=100" width="100px;" alt="Swatantra Mishra"/><br /><sub><b>Swatantra Mishra</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=Swatantramishra1" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/VishalBarnawal"><img src="https://avatars.githubusercontent.com/u/113020105?v=4?s=100" width="100px;" alt="Vishal-sense"/><br /><sub><b>Vishal-sense</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=VishalBarnawal" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/vish-sah"><img src="https://avatars.githubusercontent.com/u/108925162?v=4?s=100" width="100px;" alt="Vishwanath Sah"/><br /><sub><b>Vishwanath Sah</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=vish-sah" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/pearel-sense"><img src="https://avatars.githubusercontent.com/u/113005498?v=4?s=100" width="100px;" alt="Pearel Nazareth"/><br /><sub><b>Pearel Nazareth</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=pearel-sense" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/deepak-rao-96"><img src="https://avatars.githubusercontent.com/u/185754227?v=4?s=100" width="100px;" alt="deepak-rao-96"/><br /><sub><b>deepak-rao-96</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=deepak-rao-96" title="Code">💻</a></td>
+    </tr>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/darsh-mecwan-sense"><img src="https://avatars.githubusercontent.com/u/186684223?v=4?s=100" width="100px;" alt="Darsh Mecwan"/><br /><sub><b>Darsh Mecwan</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=darsh-mecwan-sense" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/diwakersurya"><img src="https://avatars.githubusercontent.com/u/7386665?v=4?s=100" width="100px;" alt="Diwaker Singh"/><br /><sub><b>Diwaker Singh</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=diwakersurya" title="Code">💻</a></td>
     </tr>
   </tbody>
 </table>

package/cspell.json

@@ -10,7 +10,7 @@
     ".storybook/public",
     ".all-contributorsrc",
     "README.md",
-    "src/stories/INTRODUCTION.stories.mdx",
+    "src/stories/INTRODUCTION.mdx",
     ".github/CODEOWNERS",
     ".github/workflows/pull_request_semantics_checker.yml"
   ],

package/dts-generator/convert.js

@@ -47,6 +47,9 @@ const {spawnSync} = require('child_process');
 
 const files = glob.sync(path.resolve(__dirname, '../lib/**/*.js.flow'));
 
+// eslint-disable-next-line no-console
+console.log('🔄 Converting .js.flow files to TypeScript declaration files...');
+
 files.forEach((file) => {
   const outPath = file.replace(/\.js\.flow$/, '.d.ts');
   const flowToTs = path.resolve(__dirname, './node_modules/.bin/flow-to-ts');
@@ -95,7 +98,10 @@ files.forEach((file) => {
     }
   } else {
     console.warn(
-      `No meaningful output for ${file}. It may be empty or skipped.`,
+      `⚠️ No meaningful output for ${file}. It may be empty or skipped.`,
     );
   }
 });
+
+// eslint-disable-next-line no-console
+console.log(`✅ Flow to d.ts Job Finished`);

package/lib/components/Chip/Chip.d.ts

@@ -27,6 +27,8 @@ export type BaseChipProps = {
   disabled?: boolean;
   showStatusIndicator?: boolean;
   disableHoverState?: boolean;
+  line?: number;
+  wordBreak?: string;
   onClick?:
     | ((arg0: React.SyntheticEvent<HTMLElement>) => unknown)
     | null
@@ -72,6 +74,8 @@ export const Chip: React$AbstractComponent<ChipProps, HTMLDivElement> =
         onDismiss = () => null,
         onClick,
         disabled,
+        line = 1,
+        wordBreak,
         disableHoverState = !onClick,
         // There is no reason for hover state to be active when there is no click handler attached
         ...restProps
@@ -148,23 +152,37 @@ export const Chip: React$AbstractComponent<ChipProps, HTMLDivElement> =
 
           {iconName && size !== 'small' && (
             <Icon
-              className={classify(css.chipIcon, classNames?.icon)}
+              className={classify(
+                css.chipIcon,
+                {
+                  [css.alignTop]: line > 1,
+                },
+                classNames?.icon,
+              )}
               name={iconName}
               type={iconType}
               size="small"
             />
           )}
-          <Truncate>{children}</Truncate>
+          <Truncate line={line} wordBreak={wordBreak}>
+            {children}
+          </Truncate>
 
           {dismissable && size !== 'small' && (
             <CloseIcon
               classNames={{
                 icon: css.dismissIcon,
-                button: css.dismissIconWrapper,
+                button: classify(
+                  {
+                    [css.alignTop]: line > 1,
+                  },
+                  css.dismissIconWrapper,
+                ),
               }}
               type={iconType}
               size="small"
               ariaLabel="Dismiss"
+              disabled={disabled}
               onClick={(event) => {
                 event.stopPropagation();
 

package/lib/components/Chip/Chip.js

@@ -36,6 +36,8 @@ const Chip = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     onDismiss = () => null,
     onClick,
     disabled,
+    line = 1,
+    wordBreak,
     disableHoverState = !onClick,
     // There is no reason for hover state to be active when there is no click handler attached
     ...restProps
@@ -95,18 +97,26 @@ const Chip = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     },
     disabled: disabled
   }), iconName && size !== 'small' && /*#__PURE__*/React.createElement(_Icon.Icon, {
-    className: (0, _classify.classify)(_ChipModule.default.chipIcon, classNames?.icon),
+    className: (0, _classify.classify)(_ChipModule.default.chipIcon, {
+      [_ChipModule.default.alignTop]: line > 1
+    }, classNames?.icon),
     name: iconName,
     type: iconType,
     size: "small"
-  }), /*#__PURE__*/React.createElement(_Truncate.Truncate, null, children), dismissable && size !== 'small' && /*#__PURE__*/React.createElement(_Icon.CloseIcon, {
+  }), /*#__PURE__*/React.createElement(_Truncate.Truncate, {
+    line: line,
+    wordBreak: wordBreak
+  }, children), dismissable && size !== 'small' && /*#__PURE__*/React.createElement(_Icon.CloseIcon, {
     classNames: {
       icon: _ChipModule.default.dismissIcon,
-      button: _ChipModule.default.dismissIconWrapper
+      button: (0, _classify.classify)({
+        [_ChipModule.default.alignTop]: line > 1
+      }, _ChipModule.default.dismissIconWrapper)
     },
     type: iconType,
     size: "small",
     ariaLabel: "Dismiss",
+    disabled: disabled,
     onClick: event => {
       event.stopPropagation();
       if (!disabled && onDismiss) {

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

@@ -35,6 +35,8 @@ export type BaseChipProps = {
   disabled?: boolean,
   showStatusIndicator?: boolean,
   disableHoverState?: boolean,
+  line?: number,
+  wordBreak?: string,
   onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
   onMouseEnter?: ?(SyntheticEvent<HTMLElement>) => mixed,
   onMouseLeave?: ?(SyntheticEvent<HTMLElement>) => mixed,
@@ -76,6 +78,8 @@ export const Chip: React$AbstractComponent<ChipProps, HTMLDivElement> =
         onDismiss = () => null,
         onClick,
         disabled,
+        line = 1,
+        wordBreak,
         disableHoverState = !onClick, // There is no reason for hover state to be active when there is no click handler attached
         ...restProps
       }: ChipProps,
@@ -149,23 +153,33 @@ export const Chip: React$AbstractComponent<ChipProps, HTMLDivElement> =
 
           {iconName && size !== 'small' && (
             <Icon
-              className={classify(css.chipIcon, classNames?.icon)}
+              className={classify(
+                css.chipIcon,
+                {[css.alignTop]: line > 1},
+                classNames?.icon,
+              )}
               name={iconName}
               type={iconType}
               size="small"
             />
           )}
-          <Truncate>{children}</Truncate>
+          <Truncate line={line} wordBreak={wordBreak}>
+            {children}
+          </Truncate>
 
           {dismissable && size !== 'small' && (
             <CloseIcon
               classNames={{
                 icon: css.dismissIcon,
-                button: css.dismissIconWrapper,
+                button: classify(
+                  {[css.alignTop]: line > 1},
+                  css.dismissIconWrapper,
+                ),
               }}
               type={iconType}
               size="small"
               ariaLabel="Dismiss"
+              disabled={disabled}
               onClick={(event) => {
                 event.stopPropagation();
                 if (!disabled && onDismiss) {

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

@@ -16,7 +16,6 @@
   colorFocusPrimary
 ) from '../../styles/variables/_color.css';
 @value (
-  spaceNone,
   spaceXXSmall,
   spaceXSmall,
   spaceSmall
@@ -55,20 +54,17 @@
 }
 
 .large {
-  padding: spaceNone spaceSmall;
-  height: size34;
+  padding: spaceXSmall spaceSmall;
   min-height: size34;
 }
 
 .medium {
-  height: size26;
   min-height: size26;
-  padding: spaceNone spaceSmall;
+  padding: spaceXXSmall spaceSmall;
 }
 
 .small {
-  padding: spaceNone spaceXSmall;
-  height: size18;
+  padding: calc(spaceXXSmall / 2) spaceXSmall;
   min-height: size18;
 }
 
@@ -126,11 +122,11 @@
 }
 
 .withIcon {
-  padding: spaceNone spaceSmall spaceNone spaceXSmall;
+  padding: spaceXXSmall spaceSmall spaceXXSmall spaceXSmall;
 }
 
 .dismissable {
-  padding: spaceNone spaceXSmall spaceNone spaceSmall;
+  padding: spaceXXSmall spaceXSmall spaceXXSmall spaceSmall;
 }
 
 .dismissIconWrapper {
@@ -142,6 +138,10 @@
   margin-right: spaceXXSmall;
 }
 
+.alignTop {
+  align-self: flex-start;
+}
+
 /* This should be last section for CSS Specificity  */
 
 .disabled {

package/lib/components/Icon/ClickableIcon.d.ts

@@ -12,6 +12,7 @@ type ClassNames = $ReadOnly<{
   button?: string;
 }>;
 export type ClickableIconProps = IconProps & {
+  disabled?: boolean;
   classNames?: ClassNames;
 };
 export const ClickableIcon: React$AbstractComponent<
@@ -26,6 +27,7 @@ export const ClickableIcon: React$AbstractComponent<
       className,
       // Deprecated for Clickable Icon
       classNames,
+      disabled,
       ...props
     }: ClickableIconProps,
     ref,
@@ -41,6 +43,7 @@ export const ClickableIcon: React$AbstractComponent<
       <UnstyledButton
         {...props}
         onClick={onClick}
+        disabled={disabled}
         onKeyDown={onKeyDownHandler}
         ariaLabel={ariaLabel}
         className={classify(
@@ -74,6 +77,7 @@ export type CloseIconProps = {
   className?: string;
   // Deprecated for Clickable Icon
   ariaLabel?: string;
+  disabled?: boolean;
   classNames?: ClassNames;
 };
 export const CloseIcon: React$AbstractComponent<

package/lib/components/Icon/ClickableIcon.js

@@ -22,6 +22,7 @@ const ClickableIcon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     className,
     // Deprecated for Clickable Icon
     classNames,
+    disabled,
     ...props
   } = _ref;
   const onKeyDownHandler = e => {
@@ -32,6 +33,7 @@ const ClickableIcon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   };
   return /*#__PURE__*/React.createElement(_Button.UnstyledButton, _extends({}, props, {
     onClick: onClick,
+    disabled: disabled,
     onKeyDown: onKeyDownHandler,
     ariaLabel: ariaLabel,
     className: (0, _classify.default)(_ClickableIconModule.default.button, {