@carbon-labs/react-animated-header 0.2.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon-labs/react-animated-header",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "publishConfig": {
     "access": "public",
     "provenance": true
@@ -32,5 +32,5 @@
   "devDependencies": {
     "@carbon-labs/utilities": "canary"
   },
-  "gitHead": "6c779e8734dc6ae0ca1d46144eec11ef0c5752a4"
+  "gitHead": "ea0564e6ceea7d3bdcc08472ac8825f05299083c"
 }

package/scss/AnimatedHeader/animated-header.scss

@@ -14,22 +14,26 @@
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/motion';
 
-$prefix: 'clabs-animated-header' !default;
+$prefix: 'clabs--animated-header' !default;
+
+:root {
+  @include theme(themes.$g10);
+}
 
 [data-carbon-theme='white'] {
-  @include theme(themes.$white, true);
+  @include theme(themes.$white);
 }
 
 [data-carbon-theme='g10'] {
-  @include theme(themes.$g10, true);
+  @include theme(themes.$g10);
 }
 
 [data-carbon-theme='g90'] {
-  @include theme(themes.$g90, true);
+  @include theme(themes.$g90);
 }
 
 [data-carbon-theme='g100'] {
-  @include theme(themes.$g100, true);
+  @include theme(themes.$g100);
 }
 
 body {
@@ -42,9 +46,9 @@ body {
 .#{$prefix} {
   position: relative;
   display: flex;
-  overflow: hidden;
+  overflow: visible;
   background: $background;
-  inline-size: 100vw;
+  inline-size: 100%;
   max-block-size: 90vh;
   outline: 1px solid transparent;
   padding-block: 0 $spacing-10;
@@ -58,6 +62,7 @@ body {
 .#{$prefix}__static--container {
   position: absolute;
   display: flex;
+  overflow: hidden;
   justify-content: flex-end;
 
   block-size: 100%;
@@ -125,6 +130,7 @@ body {
   padding-inline: var(--cds-grid-margin);
 }
 
+:root .#{$prefix}__container--gradient,
 [data-carbon-theme='white'] .#{$prefix}__container--gradient,
 [data-carbon-theme='g10'] .#{$prefix}__container--gradient {
   background: linear-gradient(0deg, #e0e0e0bf 0%, transparent 100%);
@@ -224,6 +230,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 +243,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 +258,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;
@@ -287,6 +301,7 @@ body {
 .#{$prefix}__lottie-animation--container {
   position: absolute;
   display: flex;
+  overflow: hidden;
   justify-content: flex-end;
 
   block-size: 100%;
@@ -336,6 +351,7 @@ body {
   inset-inline-end: 0;
 }
 
+:root .#{$prefix}__button-collapse--gradient,
 [data-carbon-theme='white'] .#{$prefix}__button-collapse--gradient,
 [data-carbon-theme='g10'] .#{$prefix}__button-collapse--gradient {
   background: radial-gradient(
@@ -364,6 +380,7 @@ body {
 }
 
 .#{$prefix}--collapsed {
+  overflow: hidden;
   padding: 0;
   max-block-size: $spacing-09;
   outline: 1px solid $border-subtle-00;
@@ -387,10 +404,6 @@ body {
     display: none;
   }
 
-  .#{$prefix}__tile-dropdown {
-    margin-block-start: $spacing-06;
-  }
-
   .#{$prefix}__content {
     display: none;
   }
@@ -407,7 +420,7 @@ body {
   }
 
   .#{$prefix}__header-dropdown {
-    display: inline-grid;
+    display: block;
   }
 
   .#{$prefix}__static {
@@ -429,6 +442,7 @@ body {
 
   .#{$prefix}__content {
     display: flex;
+    margin-block-start: $spacing-06;
   }
 
   .#{$prefix}__button-collapse--container .cds--popover-container {
@@ -485,7 +499,7 @@ body {
     background: linear-gradient(90deg, $background 25%, transparent 75%);
   }
 
-  .#{$prefix}__tile-dropdown {
+  .#{$prefix}__content {
     margin-block-start: 0;
   }
 
@@ -611,7 +625,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,14 +12,14 @@
 @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;
   display: flex;
   -webkit-backdrop-filter: blur(3px);
   backdrop-filter: blur(3px);
-  min-block-size: 176px;
+  min-block-size: 192px;
   text-decoration: none;
 }
 
@@ -35,14 +35,14 @@ $prefix: 'clabs-animated-header__ai-prompt-tile' !default;
   flex: 1;
   flex-direction: column;
   justify-content: flex-start;
-  padding: $spacing-05 $spacing-05 $spacing-03 $spacing-05;
+  padding: $spacing-05;
   background-color: transparent;
   color: $text-primary;
-  gap: $spacing-05;
   opacity: 1;
   transition: opacity 500ms linear;
 }
 
+:root .#{$prefix}--body::before,
 [data-carbon-theme='white'] .#{$prefix}--body::before,
 [data-carbon-theme='g10'] .#{$prefix}--body::before {
   background-color: $layer-01;
@@ -101,6 +101,7 @@ $prefix: 'clabs-animated-header__ai-prompt-tile' !default;
   z-index: 3;
   display: flex;
   justify-content: space-between;
+  margin-block-end: $spacing-05;
 }
 
 .#{$prefix}--title {
@@ -127,7 +128,12 @@ $prefix: 'clabs-animated-header__ai-prompt-tile' !default;
   z-index: 3;
   display: flex;
   justify-content: flex-end;
-  gap: 10px;
+  margin-block: $spacing-03 calc(-1 * $spacing-05);
+  margin-inline-end: calc(-1 * $spacing-05);
+}
+
+.#{$prefix}--footer > a {
+  padding: 14px $spacing-05;
 }
 
 .#{$prefix}--subtitle {
@@ -144,6 +150,7 @@ $prefix: 'clabs-animated-header__ai-prompt-tile' !default;
   border: 1px solid $border-subtle-01;
   border-radius: 8px;
   background-color: $layer-01;
+  margin-block-start: $spacing-06;
   transition: border 200ms motion.motion(standard, expressive);
 }
 

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

@@ -12,14 +12,14 @@
 @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;
   display: flex;
   -webkit-backdrop-filter: blur(3px);
   backdrop-filter: blur(3px);
-  min-block-size: 176px;
+  min-block-size: 192px;
   text-decoration: none;
 }
 
@@ -39,7 +39,6 @@ $prefix: 'clabs-animated-header__glass-tile' !default;
   background-color: transparent;
   color: $text-primary;
   cursor: pointer;
-  gap: $spacing-05;
   opacity: 1;
   transition: opacity 500ms linear;
 }
@@ -48,6 +47,7 @@ $prefix: 'clabs-animated-header__glass-tile' !default;
   opacity: 0;
 }
 
+:root .#{$prefix}--body::before,
 [data-carbon-theme='white'] .#{$prefix}--body::before,
 [data-carbon-theme='g10'] .#{$prefix}--body::before {
   background-color: $layer-01;
@@ -75,6 +75,8 @@ $prefix: 'clabs-animated-header__glass-tile' !default;
   position: relative;
   display: flex;
   justify-content: space-between;
+
+  margin-block-end: $spacing-05;
 }
 
 .#{$prefix}--title {
@@ -107,5 +109,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;
+  }
 }