feat(components): use BIMDataTextBox component from design-system

package.json

@@ -1,6 +1,6 @@
 {
   "name": "platform-next",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "private": true,
   "scripts": {
     "dev": "vue-cli-service serve",
@@ -10,7 +10,7 @@
     "test:e2e": "start-server-and-test 'npm run dev -- --port 3030' 3030 'cypress open'"
   },
   "dependencies": {
-    "@bimdata/design-system": "^1.1.0-rc.3",
+    "@bimdata/design-system": "^1.1.0-rc.8",
     "@bimdata/typescript-fetch-api-client": "^6.20.0",
     "@bimdata/viewer": "^1.9.0-rc.10",
     "@uppy/core": "^2.1.2",

src/components/generic/breadcrumb-selector/BreadcrumbSelector.scss

@@ -4,11 +4,16 @@
   &__header {
     padding: calc(var(--spacing-unit) / 2);
     cursor: pointer;
+    display: flex;
+    align-items: center;
+
+    &__text {
+      flex-grow: 1;
+      max-width: 120px;
+    }
 
     &__icon {
-      margin-left: calc(var(--spacing-unit) / 2);
-      margin-bottom: 1px;
-      vertical-align: bottom;
+      min-width: 16px;
     }
   }
 

src/components/generic/breadcrumb-selector/BreadcrumbSelector.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="breadcrumb-selector" v-click-away="close">
     <div class="breadcrumb-selector__header">
-      <TextBox
+      <BIMDataTextBox
+        class="breadcrumb-selector__header__text"
         :text="header"
-        :maxLength="24"
         @click="$emit('header-clicked')"
       />
       <BIMDataIcon
@@ -12,7 +12,7 @@
         size="xs"
         :rotate="isOpen ? 90 : 0"
         @click="toggle"
-        margin="0 0 1px 6px"
+        margin="0 0 0 6px"
       />
     </div>
     <transition name="slide-fade-down">
@@ -30,10 +30,9 @@
             :key="item[keyProp]"
             @click="() => selectItem(item)"
           >
-            <TextBox
+            <BIMDataTextBox
               :text="item[labelProp]"
-              :maxLength="24"
-              cutOn="end"
+              cutPosition="end"
               :tooltip="false"
             />
           </div>
@@ -47,13 +46,8 @@
 import { computed } from "vue";
 import { useToggle } from "@/composables/toggle";
 import { useListFilter } from "@/composables/list-filter";
-// Components
-import TextBox from "@/components/generic/text-box/TextBox";
 
 export default {
-  components: {
-    TextBox
-  },
   props: {
     list: {
       type: Array,