@teambit/compositions 1.0.957 → 1.0.959

package/dist/ui/compositions-panel/overlay.module.scss

@@ -5,9 +5,11 @@
   z-index: $modal-z-index - 1;
   overflow-y: auto;
   background: var(--surface-neutral-color, #fff);
-  border: 1px solid var(--border-medium-color, #ededed);
+  border: 1px solid var(--bit-border-color-lightest, #eaeaec);
   border-radius: 8px;
-  box-shadow: var(--bit-shadow-hover-low, 0 2px 8px 0 rgba(0, 0, 0, 0.2));
+  box-shadow:
+    0 4px 16px rgba(0, 0, 0, 0.08),
+    0 1px 3px rgba(0, 0, 0, 0.06);
 }
 
 .suppressNativeMenu {

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/compositions",
-  "version": "1.0.957",
+  "version": "1.0.959",
   "homepage": "https://bit.cloud/teambit/compositions/compositions",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.compositions",
     "name": "compositions",
-    "version": "1.0.957"
+    "version": "1.0.959"
   },
   "dependencies": {
     "graphql-tag": "2.12.1",
@@ -23,6 +23,7 @@
     "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.504",
     "@teambit/base-ui.surfaces.split-pane.hover-splitter": "1.0.1",
     "@teambit/base-ui.surfaces.split-pane.split-pane": "1.0.0",
+    "@teambit/compositions.ui.composition-live-controls": "0.0.6",
     "@teambit/compositions.ui.compositions-menu-bar": "0.0.177",
     "@teambit/compositions.ui.hooks.use-composition": "0.0.177",
     "@teambit/design.ui.input.option-button": "1.0.13",
@@ -32,6 +33,7 @@
     "@teambit/documenter.theme.theme-context": "4.0.7",
     "@teambit/documenter.ui.heading": "4.1.8",
     "@teambit/documenter.ui.property-table": "4.1.11",
+    "@teambit/evangelist.elements.icon": "1.0.5",
     "@teambit/panels": "0.0.1320",
     "@teambit/preview.ui.component-preview": "1.0.32",
     "@teambit/ui-foundation.ui.buttons.collapser": "0.0.233",
@@ -41,13 +43,10 @@
     "@teambit/design.ui.surfaces.status-message-card": "0.0.18",
     "@teambit/mdx.ui.mdx-layout": "1.0.12",
     "@teambit/compositions.ui.composition-compare-section": "0.0.103",
-    "@teambit/compositions.ui.composition-compare": "0.0.262",
+    "@teambit/compositions.ui.composition-compare": "0.0.263",
     "@teambit/api-reference.hooks.use-api": "0.0.57",
     "@teambit/workspace.ui.use-workspace-mode": "0.0.2",
-    "@teambit/compositions.ui.composition-live-controls": "0.0.6",
-    "@teambit/evangelist.elements.icon": "1.0.5",
     "@teambit/ui-foundation.ui.menu-widget-icon": "0.0.502",
-    "@teambit/ui-foundation.ui.tree.drawer": "1.0.0",
     "@teambit/design.inputs.selectors.menu-item": "1.1.0",
     "@teambit/design.inputs.date-picker": "0.0.3",
     "@teambit/design.inputs.dropdown": "1.3.3",
@@ -56,16 +55,16 @@
     "@teambit/design.inputs.toggle-switch": "0.0.9",
     "@teambit/design.ui.input.color-picker": "0.0.56",
     "@teambit/base-ui.loaders.skeleton": "1.0.2",
-    "@teambit/component": "1.0.957",
-    "@teambit/graphql": "1.0.957",
-    "@teambit/dev-files": "1.0.957",
-    "@teambit/envs": "1.0.957",
-    "@teambit/preview": "1.0.957",
-    "@teambit/schema": "1.0.957",
-    "@teambit/scope": "1.0.957",
-    "@teambit/workspace": "1.0.957",
-    "@teambit/component-compare": "1.0.957",
-    "@teambit/ui": "1.0.957"
+    "@teambit/component": "1.0.959",
+    "@teambit/graphql": "1.0.959",
+    "@teambit/dev-files": "1.0.959",
+    "@teambit/envs": "1.0.959",
+    "@teambit/preview": "1.0.959",
+    "@teambit/schema": "1.0.959",
+    "@teambit/scope": "1.0.959",
+    "@teambit/workspace": "1.0.959",
+    "@teambit/component-compare": "1.0.959",
+    "@teambit/ui": "1.0.959"
   },
   "devDependencies": {
     "@types/lodash": "4.14.165",

package/ui/compositions-panel/compositions-panel.module.scss

@@ -6,130 +6,74 @@
   height: 100%;
 }
 
-.tab {
-  color: var(--on-background-color);
-
-  > div:first-child {
-    border: none;
-    border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);
-
-    &:hover {
-      background: var(--surface-hover-color, #f6f6f6);
-    }
-  }
-
-  > div:last-child {
-    border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);
-  }
+// ─── Compositions list ──────────────────────────────────────────────────
+.compositionsList {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  padding: 4px 0;
 }
 
-.linkWrapper {
-  padding: 0 12px;
+.compositionItem {
+  padding: 0 6px;
+  margin: 1px 6px;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  height: 40px;
-  font-size: var(--bit-p-xs);
-  transition: all 300ms ease-in-out;
-  color: var(--on-background-color);
+  height: 34px;
+  border-radius: 6px;
+  font-size: 13px;
+  transition: all 140ms ease;
+  color: var(--on-background-color, #1c2024);
   position: relative;
 
   &:hover {
-    background-color: var(--border-medium-color, #ededed);
-    // border-radius: 8px;
-    transition: background-color 300ms ease-in-out;
+    background: var(--surface-hover-color, rgba(0, 0, 0, 0.04));
 
     .panelLink {
       padding-right: 40px;
     }
 
-    .right {
+    .itemActions {
       visibility: visible;
       opacity: 1;
-      color: var(--bit-text-color-light, #6c707c);
-      transition: opacity 100ms ease-in-out;
-
-      .icon {
-        &:hover {
-          color: var(--bit-text-color-heavy);
-        }
-      }
     }
   }
 
   &.active {
-    display: flex;
-    align-items: center;
-    background-color: var(--bit-accent-color, #6c5ce7);
-    color: var(--bit-bg-color, #ffffff);
+    background: var(--bit-accent-color, #6c5ce7);
+    color: #ffffff;
+    font-weight: 500;
 
-    // overrides
     &:hover {
-      background-color: #5d4aec;
-    }
-
-    .box {
-      background-color: var(--bit-bg-color, #ffffff);
+      background: color-mix(in srgb, var(--bit-accent-color, #6c5ce7) 88%, #000);
     }
 
-    .right {
-      // visibility: unset;
+    .itemActions {
       opacity: 1;
-      color: var(--bit-accent-bg, #eceaff);
+      visibility: visible;
+      color: rgba(255, 255, 255, 0.7);
 
-      .icon {
-        &:hover {
-          color: var(--bit-bg-color, #ffffff);
-        }
+      .actionIcon:hover {
+        color: #ffffff;
       }
     }
-  }
 
-  .right {
-    position: absolute;
-    right: 12px;
-    top: 50%;
-    transform: translateY(-50%);
-    display: flex;
-    gap: 12px;
-    align-items: center;
-    justify-content: center;
-    opacity: 0;
-    visibility: hidden;
-    font-size: 13px;
-    transition:
-      opacity 100ms ease-in-out,
-      visibility 0s linear 100ms;
-  }
-
-  .codeLink {
-    cursor: pointer;
+    .compositionDot {
+      background: rgba(255, 255, 255, 0.5);
+    }
   }
 }
 
-.box {
-  width: 10px;
-  height: 10px;
+.compositionDot {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: var(--bit-accent-color, #6c5ce7);
+  opacity: 0.4;
   flex-shrink: 0;
-  background-color: var(--bit-text-color-heavy);
-  margin-right: 11px;
-  border-radius: 1px;
-}
-
-.name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   margin-right: 8px;
 }
 
-.iconLink {
-  display: flex;
-  align-items: center;
-  color: inherit;
-  text-decoration: none;
-}
-
 .panelLink {
   display: flex;
   align-items: center;
@@ -140,51 +84,59 @@
   text-decoration: none;
   color: inherit;
   min-width: 0;
-  transition: padding-right 200ms ease-in-out;
+  transition: padding-right 140ms ease;
 
   &:active {
     color: inherit;
   }
 }
 
-.noLiveControls {
-  padding: 12px;
+.name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.tabs {
+.itemActions {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
   display: flex;
+  gap: 6px;
   align-items: center;
-  margin-bottom: 17px;
-
-  > div {
-    position: relative;
-    padding: 8px;
-    text-transform: uppercase;
-    font-size: 12px;
-    font-weight: bold;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 100ms ease;
+}
 
-    &:not(:first-child) {
-      color: #878c9a;
-    }
+.actionIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border-radius: 4px;
+  color: var(--bit-text-color-light, #8b8d98);
+  cursor: pointer;
+  transition: all 100ms ease;
+  text-decoration: none;
+  font-size: 12px;
 
-    &:first-child {
-      &:before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        background-color: var(--bit-accent-color, #6c5ce7);
-        height: 3px;
-        border-radius: 10px;
-        transition:
-          background-color 300ms,
-          height 300ms;
-      }
-    }
+  &:hover {
+    color: var(--bit-text-color-heavy, #1c2024);
+    background: rgba(0, 0, 0, 0.06);
   }
 }
 
+.iconLink {
+  display: flex;
+  align-items: center;
+  color: inherit;
+  text-decoration: none;
+}
+
+// ─── Legacy compat ──────────────────────────────────────────────────────
 .liveControlsSkeleton {
   padding: 12px 16px;
   display: flex;

package/ui/compositions-panel/compositions-panel.tsx

@@ -1,40 +1,21 @@
 import { Icon } from '@teambit/evangelist.elements.icon';
 import classNames from 'classnames';
 import { useSearchParams } from 'react-router-dom';
-import React, { useCallback, useState } from 'react';
-import { DrawerUI } from '@teambit/ui-foundation.ui.tree.drawer';
+import React, { useCallback } from 'react';
 import { MenuWidgetIcon } from '@teambit/ui-foundation.ui.menu-widget-icon';
 import { Tooltip } from '@teambit/design.ui.tooltip';
 import { useNavigate, useLocation } from '@teambit/base-react.navigation.link';
 import { useLiveControls } from '@teambit/compositions.ui.composition-live-controls';
 import styles from './compositions-panel.module.scss';
 import type { Composition } from '../../composition';
-import { LiveControls } from './live-control-panel';
 
 export type CompositionsPanelProps = {
-  /**
-   * list of compositions
-   */
   compositions: Composition[];
-  /**
-   * select composition to display
-   */
   onSelectComposition: (composition: Composition) => void;
-  /**
-   * the currently active composition
-   */
   active?: Composition;
-  /**
-   * the url to the base composition. doesntc contain the current composition params
-   */
   url: string;
-  /**
-   * checks if a component is using the new preview api. if false, doesnt scale to support new preview
-   */
   isScaling?: boolean;
-
   includesEnvTemplate?: boolean;
-
   useNameParam?: boolean;
 } & React.HTMLAttributes<HTMLUListElement>;
 
@@ -49,27 +30,14 @@ export function CompositionsPanel({
   className,
   ...rest
 }: CompositionsPanelProps) {
-  const [openDrawerList, onToggleDrawer] = useState(['COMPOSITIONS', 'LIVE_CONTROLS']);
-  const { hasLiveControls, ready, defs, values, onChange, setTimestamp } = useLiveControls();
-  const handleDrawerToggle = (id: string) => {
-    const isDrawerOpen = openDrawerList.includes(id);
-    if (isDrawerOpen) {
-      onToggleDrawer((list) => list.filter((drawer) => drawer !== id));
-      return;
-    }
-    onToggleDrawer((list) => list.concat(id));
-  };
-
-  // setup from props
+  const { setTimestamp } = useLiveControls();
   const shouldAddNameParam = useNameParam || (isScaling && includesEnvTemplate === false);
 
-  // current composition state
   const location = useLocation();
   const [searchParams] = useSearchParams();
   const versionFromQueryParams = searchParams.get('version');
   const navigate = useNavigate();
 
-  // composition navigation action
   const handleSelect = useCallback(
     (selected: Composition) => {
       onSelect && onSelect(selected);
@@ -78,6 +46,7 @@ export function CompositionsPanel({
     },
     [onSelect, active, setTimestamp]
   );
+
   const onCompositionCodeClicked = useCallback(
     (composition: Composition) => (e: React.MouseEvent<HTMLDivElement>) => {
       e.preventDefault();
@@ -93,58 +62,43 @@ export function CompositionsPanel({
   );
 
   return (
-    <div className={classNames(styles.container)}>
-      <DrawerUI
-        isOpen={openDrawerList.includes('COMPOSITIONS')}
-        onToggle={() => handleDrawerToggle('COMPOSITIONS')}
-        name="COMPOSITIONS"
-        className={classNames(styles.tab)}
-      >
-        <ul {...rest} className={classNames(className)}>
-          {compositions.map((composition) => {
-            const href = shouldAddNameParam
-              ? `${url}&name=${composition.identifier}`
-              : `${url}&${composition.identifier}`;
-            return (
-              <li
-                key={composition.identifier}
-                className={classNames(styles.linkWrapper, composition === active && styles.active)}
-              >
-                <a className={styles.panelLink} onClick={() => handleSelect(composition)}>
-                  <span className={styles.name}>{composition.displayName}</span>
-                </a>
-                <div className={styles.right}>
-                  <MenuWidgetIcon
-                    className={styles.codeLink}
-                    icon="Code"
-                    tooltipContent="Code"
-                    onClick={onCompositionCodeClicked(composition)}
-                  />
-                  <Tooltip content="Open in new tab" placement="bottom">
-                    <a className={styles.iconLink} target="_blank" rel="noopener noreferrer" href={href}>
-                      <Icon className={styles.icon} of="open-tab" />
-                    </a>
-                  </Tooltip>
-                </div>
-              </li>
-            );
-          })}
-        </ul>
-      </DrawerUI>
-      {hasLiveControls ? (
-        <DrawerUI
-          name="LIVE CONTROLS"
-          className={classNames(styles.tab, className)}
-          isOpen={openDrawerList.includes('LIVE_CONTROLS')}
-          onToggle={() => handleDrawerToggle('LIVE_CONTROLS')}
-        >
-          {ready ? (
-            <LiveControls defs={defs} values={values} onChange={onChange} />
-          ) : (
-            <div className={styles.noLiveControls}>No live controls available for this composition</div>
-          )}
-        </DrawerUI>
-      ) : null}
+    <div className={styles.container}>
+      <ul {...rest} className={classNames(styles.compositionsList, className)}>
+        {compositions.map((composition) => {
+          const href = shouldAddNameParam
+            ? `${url}&name=${composition.identifier}`
+            : `${url}&${composition.identifier}`;
+          return (
+            <li
+              key={composition.identifier}
+              className={classNames(styles.compositionItem, composition === active && styles.active)}
+            >
+              <a className={styles.panelLink} onClick={() => handleSelect(composition)}>
+                <span className={styles.compositionDot} />
+                <span className={styles.name}>{composition.displayName}</span>
+              </a>
+              <div className={styles.itemActions}>
+                <MenuWidgetIcon
+                  className={styles.actionIcon}
+                  icon="Code"
+                  tooltipContent="View source"
+                  onClick={onCompositionCodeClicked(composition)}
+                />
+                <Tooltip content="Open in new tab" placement="bottom">
+                  <a
+                    className={classNames(styles.actionIcon, styles.iconLink)}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    href={href}
+                  >
+                    <Icon of="open-tab" />
+                  </a>
+                </Tooltip>
+              </div>
+            </li>
+          );
+        })}
+      </ul>
     </div>
   );
 }

package/ui/compositions-panel/live-control-input.module.scss

@@ -30,13 +30,26 @@
 .wrapper :global(textarea) {
   min-height: 78px;
   resize: vertical;
+  border-radius: 6px;
+  border: 1px solid var(--bit-border-color-lightest, #dcdde1);
+  font-size: 13px;
+  padding: 8px 10px;
+  transition:
+    border-color 140ms ease,
+    box-shadow 140ms ease;
+
+  &:focus {
+    outline: none;
+    border-color: var(--bit-accent-color, #6c5ce7);
+    box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.12);
+  }
 }
 
 .toggleWrapper {
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  min-height: 36px;
+  min-height: 34px;
 }
 
 .toggleControl {
@@ -51,53 +64,87 @@
 
 .rangeWrapper {
   display: flex;
-  flex-direction: column;
-  gap: 6px;
-  padding-top: 4px;
+  align-items: center;
+  gap: 10px;
+  padding: 2px 0;
 }
 
 .rangeInput {
-  width: 100%;
+  flex: 1;
   margin: 0;
-  accent-color: var(--primary-color, #6a57fd);
+  height: 4px;
+  accent-color: var(--bit-accent-color, #6c5ce7);
+  cursor: pointer;
+
+  &::-webkit-slider-runnable-track {
+    height: 4px;
+    border-radius: 2px;
+    background: var(--bit-border-color-lightest, #dcdde1);
+  }
+
+  &::-webkit-slider-thumb {
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background: var(--bit-accent-color, #6c5ce7);
+    border: 2px solid white;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+    margin-top: -5px;
+    -webkit-appearance: none;
+    cursor: pointer;
+    transition: transform 100ms ease;
+  }
+
+  &::-webkit-slider-thumb:hover {
+    transform: scale(1.15);
+  }
 }
 
 .rangeValue {
-  font-size: var(--bit-p-xs, 13px);
-  line-height: 1.2;
-  color: var(--on-background-color, #222222);
-  opacity: 0.85;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--on-background-color, #1c2024);
+  min-width: 32px;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  background: var(--bit-border-color-lightest, rgba(0, 0, 0, 0.04));
+  padding: 2px 6px;
+  border-radius: 4px;
 }
 
 .multiSelect {
   width: 100%;
-  min-height: 112px;
+  min-height: 80px;
   padding: 6px 8px;
-  border: 1px solid var(--border-medium-color, rgba(0, 0, 0, 0.16));
-  border-radius: 8px;
+  border: 1px solid var(--bit-border-color-lightest, #dcdde1);
+  border-radius: 6px;
   background: var(--surface-neutral-color, #ffffff);
-  color: var(--on-background-color, #222222);
+  color: var(--on-background-color, #1c2024);
   font: inherit;
-  line-height: 1.35;
+  font-size: 13px;
+  line-height: 1.5;
   box-sizing: border-box;
-  scrollbar-gutter: stable;
+  transition:
+    border-color 140ms ease,
+    box-shadow 140ms ease;
 }
 
 .multiSelect:focus {
   outline: none;
-  border-color: var(--primary-color, #6a57fd);
-  box-shadow: 0 0 0 2px rgba(106, 87, 253, 0.18);
+  border-color: var(--bit-accent-color, #6c5ce7);
+  box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.12);
 }
 
 .multiSelect option {
   padding: 4px 6px;
-  color: var(--on-background-color, #222222);
+  border-radius: 4px;
+  color: var(--on-background-color, #1c2024);
 }
 
 .multiSelect option:checked,
 .multiSelect option:hover {
-  background: var(--surface-hover-color, #edebfc);
-  color: var(--on-surface-color, #2b2b2b);
+  background: rgba(108, 92, 231, 0.08);
+  color: var(--on-surface-color, #1c2024);
 }
 
 .portalMenu {
@@ -113,9 +160,19 @@
 
 .portalMenuItem {
   cursor: pointer;
-  font-family: 'CircularPro', 'Gill Sans', 'Gill Sans MT', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-size: 13px;
 }
 
 .inputText {
   padding-top: 0px !important;
+  border-radius: 6px !important;
+  font-size: 13px !important;
+  transition:
+    border-color 140ms ease,
+    box-shadow 140ms ease !important;
+
+  &:focus {
+    border-color: var(--bit-accent-color, #6c5ce7) !important;
+    box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.12) !important;
+  }
 }