@carbon-labs/react-animated-header 0.1.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon-labs/react-animated-header",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "publishConfig": {
     "access": "public",
     "provenance": true
@@ -18,7 +18,8 @@
   "files": [
     "es",
     "lib",
-    "scss"
+    "scss",
+    "assets"
   ],
   "scripts": {
     "build": "node ../../../tasks/build.js",
@@ -31,5 +32,5 @@
   "devDependencies": {
     "@carbon-labs/utilities": "canary"
   },
-  "gitHead": "728c683c561041ad84fcb3c5f81087b6f1b8f483"
+  "gitHead": "df4ac10450dbb1a5deb4684898c5573f9d697194"
 }

package/scss/AnimatedHeader/animated-header.scss

@@ -14,7 +14,7 @@
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/motion';
 
-$prefix: 'clabs-animated-header' !default;
+$prefix: 'clabs--animated-header' !default;
 
 [data-carbon-theme='white'] {
   @include theme(themes.$white, true);
@@ -224,6 +224,11 @@ body {
   max-inline-size: fit-content;
 }
 
+.#{$prefix}__header-dropdown--container {
+  inline-size: auto;
+  max-inline-size: 30rem;
+}
+
 .#{$prefix}__header-dropdown {
   border-width: 1px;
   border-style: solid;
@@ -232,7 +237,10 @@ body {
   animation-delay: 300ms;
   animation-fill-mode: both;
   background-color: transparent;
-  max-inline-size: fit-content;
+}
+
+##{$prefix}__header-dropdown {
+  inline-size: 100%;
 }
 
 .#{$prefix}__content {
@@ -244,13 +252,13 @@ body {
   transition: opacity 500ms linear;
 }
 
-.#{$prefix}__tile-dropdown--container {
+.#{$prefix}__workspace--container {
   min-block-size: $spacing-08;
   opacity: 1;
   transition: opacity 500ms linear;
 }
 
-.#{$prefix}__tile-dropdown {
+.#{$prefix}__workspace {
   position: relative;
   z-index: 9999;
   animation: 500ms motion.motion(standard, expressive) 0ms 1 slide-in;
@@ -387,7 +395,7 @@ body {
     display: none;
   }
 
-  .#{$prefix}__tile-dropdown {
+  .#{$prefix}__workspace {
     margin-block-start: $spacing-06;
   }
 
@@ -407,7 +415,7 @@ body {
   }
 
   .#{$prefix}__header-dropdown {
-    display: inline-grid;
+    display: block;
   }
 
   .#{$prefix}__static {
@@ -485,7 +493,7 @@ body {
     background: linear-gradient(90deg, $background 25%, transparent 75%);
   }
 
-  .#{$prefix}__tile-dropdown {
+  .#{$prefix}__workspace {
     margin-block-start: 0;
   }
 
@@ -611,7 +619,7 @@ body {
   .#{$prefix}__heading-name,
   .#{$prefix}__description,
   .#{$prefix}__button,
-  .#{$prefix}__tile-dropdown,
+  .#{$prefix}__workspace,
   .#{$prefix}__tile,
   .#{$prefix}__icon-button {
     animation: none;

package/scss/Tiles/AIPromptTile/ai-prompt-tile.scss

@@ -12,7 +12,7 @@
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/motion';
 
-$prefix: 'clabs-animated-header__ai-prompt-tile' !default;
+$prefix: 'clabs--animated-header__ai-prompt-tile' !default;
 
 .#{$prefix} {
   position: relative;

package/scss/Tiles/GlassTile/glass-tile.scss

@@ -12,7 +12,7 @@
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/motion';
 
-$prefix: 'clabs-animated-header__glass-tile' !default;
+$prefix: 'clabs--animated-header__glass-tile' !default;
 
 .#{$prefix} {
   position: relative;
@@ -107,5 +107,17 @@ $prefix: 'clabs-animated-header__glass-tile' !default;
   @include type-style('body-short-01');
 
   position: relative;
+  overflow: hidden;
   color: $text-secondary;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  @supports (-webkit-line-clamp: 1) {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    text-overflow: ellipsis;
+    white-space: initial;
+  }
 }