@teambit/component.ui.component-compare.version-picker 0.0.103 → 0.0.105

package/component-compare-version-picker.module.scss

@@ -4,6 +4,8 @@
   display: flex;
   flex-direction: row;
   padding: 8px 0px;
+  flex-wrap: wrap;
+  align-items: center;
 }
 
 .componentCompareVersionMenu {
@@ -14,6 +16,11 @@
   z-index: $topBar-zIndex;
 }
 
+.dropdownContainer {
+  display: flex;
+  align-items: center;
+}
+
 .componentCompareVersionPlaceholder {
   display: flex;
   align-items: center;

package/component-compare-version-picker.tsx

@@ -69,38 +69,42 @@ export function ComponentCompareVersionPicker({
 
   return (
     <div className={styles.componentCompareVersionPicker}>
-      <div className={classNames(styles.titleText, styles.rightPad)}>Comparing</div>
-      <VersionDropdown
-        key={key}
-        className={classNames(styles.componentCompareVersionContainer, styles.left, className)}
-        dropdownClassName={styles.componentCompareDropdown}
-        placeholderClassName={styles.componentCompareVersionPlaceholder}
-        menuClassName={classNames(styles.componentCompareVersionMenu, styles.showMenuOverNav)}
-        currentVersion={baseVersion as string}
-        loading={componentCompare?.loading}
-        overrideVersionHref={(_baseVersion) => {
-          return useUpdatedUrlFromQuery({ baseVersion: _baseVersion });
-        }}
-        disabled={(compare?.logs?.length ?? 0) < 2}
-        hasMoreVersions={(compare?.logs?.length ?? 0) > 1}
-        showVersionDetails={true}
-        useComponentVersions={useVersions}
-        useCurrentVersionLog={useVersion}
-        PlaceholderComponent={DetailedVersion}
-      />
-      <div className={styles.titleText}>with</div>
-      <VersionDropdown
-        className={classNames(styles.componentCompareVersionContainer, styles.right)}
-        dropdownClassName={styles.componentCompareDropdown}
-        placeholderClassName={styles.componentCompareVersionPlaceholder}
-        menuClassName={styles.componentCompareVersionMenu}
-        disabled={true}
-        loading={componentCompare?.loading}
-        currentVersion={compareVersion as string}
-        PlaceholderComponent={DetailedVersion}
-        useCurrentVersionLog={useVersion}
-        showVersionDetails={true}
-      />
+      <div className={classNames(styles.dropdownContainer)}>
+        <span className={classNames(styles.rightPad, styles.titleText)}>Comparing</span>
+        <VersionDropdown
+          key={key}
+          className={classNames(styles.componentCompareVersionContainer, styles.left, className)}
+          dropdownClassName={styles.componentCompareDropdown}
+          placeholderClassName={styles.componentCompareVersionPlaceholder}
+          menuClassName={classNames(styles.componentCompareVersionMenu, styles.showMenuOverNav)}
+          currentVersion={baseVersion as string}
+          loading={componentCompare?.loading}
+          overrideVersionHref={(_baseVersion) => {
+            return useUpdatedUrlFromQuery({ baseVersion: _baseVersion });
+          }}
+          disabled={(compare?.logs?.length ?? 0) < 2}
+          hasMoreVersions={(compare?.logs?.length ?? 0) > 1}
+          showVersionDetails={true}
+          useComponentVersions={useVersions}
+          useCurrentVersionLog={useVersion}
+          PlaceholderComponent={DetailedVersion}
+        />
+      </div>
+      <div className={styles.dropdownContainer}>
+        <span className={styles.titleText}>With</span>
+        <VersionDropdown
+          className={classNames(styles.componentCompareVersionContainer, styles.right)}
+          dropdownClassName={styles.componentCompareDropdown}
+          placeholderClassName={styles.componentCompareVersionPlaceholder}
+          menuClassName={styles.componentCompareVersionMenu}
+          disabled={true}
+          loading={componentCompare?.loading}
+          currentVersion={compareVersion as string}
+          PlaceholderComponent={DetailedVersion}
+          useCurrentVersionLog={useVersion}
+          showVersionDetails={true}
+        />
+      </div>
     </div>
   );
 }

package/dist/component-compare-version-picker.js

@@ -48,11 +48,13 @@ export function ComponentCompareVersionPicker({ className, host, customUseCompon
     const baseVersion = (_c = componentCompare === null || componentCompare === void 0 ? void 0 : componentCompare.base) === null || _c === void 0 ? void 0 : _c.model.version;
     const key = `base-compare-version-dropdown-${(_d = componentCompare === null || componentCompare === void 0 ? void 0 : componentCompare.compare) === null || _d === void 0 ? void 0 : _d.model.id.toString()}`;
     return (React.createElement("div", { className: styles.componentCompareVersionPicker },
-        React.createElement("div", { className: classNames(styles.titleText, styles.rightPad) }, "Comparing"),
-        React.createElement(VersionDropdown, { key: key, className: classNames(styles.componentCompareVersionContainer, styles.left, className), dropdownClassName: styles.componentCompareDropdown, placeholderClassName: styles.componentCompareVersionPlaceholder, menuClassName: classNames(styles.componentCompareVersionMenu, styles.showMenuOverNav), currentVersion: baseVersion, loading: componentCompare === null || componentCompare === void 0 ? void 0 : componentCompare.loading, overrideVersionHref: (_baseVersion) => {
-                return useUpdatedUrlFromQuery({ baseVersion: _baseVersion });
-            }, disabled: ((_f = (_e = compare === null || compare === void 0 ? void 0 : compare.logs) === null || _e === void 0 ? void 0 : _e.length) !== null && _f !== void 0 ? _f : 0) < 2, hasMoreVersions: ((_h = (_g = compare === null || compare === void 0 ? void 0 : compare.logs) === null || _g === void 0 ? void 0 : _g.length) !== null && _h !== void 0 ? _h : 0) > 1, showVersionDetails: true, useComponentVersions: useVersions, useCurrentVersionLog: useVersion, PlaceholderComponent: DetailedVersion }),
-        React.createElement("div", { className: styles.titleText }, "with"),
-        React.createElement(VersionDropdown, { className: classNames(styles.componentCompareVersionContainer, styles.right), dropdownClassName: styles.componentCompareDropdown, placeholderClassName: styles.componentCompareVersionPlaceholder, menuClassName: styles.componentCompareVersionMenu, disabled: true, loading: componentCompare === null || componentCompare === void 0 ? void 0 : componentCompare.loading, currentVersion: compareVersion, PlaceholderComponent: DetailedVersion, useCurrentVersionLog: useVersion, showVersionDetails: true })));
+        React.createElement("div", { className: classNames(styles.dropdownContainer) },
+            React.createElement("span", { className: classNames(styles.rightPad, styles.titleText) }, "Comparing"),
+            React.createElement(VersionDropdown, { key: key, className: classNames(styles.componentCompareVersionContainer, styles.left, className), dropdownClassName: styles.componentCompareDropdown, placeholderClassName: styles.componentCompareVersionPlaceholder, menuClassName: classNames(styles.componentCompareVersionMenu, styles.showMenuOverNav), currentVersion: baseVersion, loading: componentCompare === null || componentCompare === void 0 ? void 0 : componentCompare.loading, overrideVersionHref: (_baseVersion) => {
+                    return useUpdatedUrlFromQuery({ baseVersion: _baseVersion });
+                }, disabled: ((_f = (_e = compare === null || compare === void 0 ? void 0 : compare.logs) === null || _e === void 0 ? void 0 : _e.length) !== null && _f !== void 0 ? _f : 0) < 2, hasMoreVersions: ((_h = (_g = compare === null || compare === void 0 ? void 0 : compare.logs) === null || _g === void 0 ? void 0 : _g.length) !== null && _h !== void 0 ? _h : 0) > 1, showVersionDetails: true, useComponentVersions: useVersions, useCurrentVersionLog: useVersion, PlaceholderComponent: DetailedVersion })),
+        React.createElement("div", { className: styles.dropdownContainer },
+            React.createElement("span", { className: styles.titleText }, "With"),
+            React.createElement(VersionDropdown, { className: classNames(styles.componentCompareVersionContainer, styles.right), dropdownClassName: styles.componentCompareDropdown, placeholderClassName: styles.componentCompareVersionPlaceholder, menuClassName: styles.componentCompareVersionMenu, disabled: true, loading: componentCompare === null || componentCompare === void 0 ? void 0 : componentCompare.loading, currentVersion: compareVersion, PlaceholderComponent: DetailedVersion, useCurrentVersionLog: useVersion, showVersionDetails: true }))));
 }
 //# sourceMappingURL=component-compare-version-picker.js.map

package/dist/component-compare-version-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"component-compare-version-picker.js","sourceRoot":"","sources":["../component-compare-version-picker.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"component-compare-version-picker.js","sourceRoot":"","sources":["../component-compare-version-picker.tsx"],"names":[],"mappings":"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"}

package/dist/component-compare-version-picker.module.scss

@@ -4,6 +4,8 @@
   display: flex;
   flex-direction: row;
   padding: 8px 0px;
+  flex-wrap: wrap;
+  align-items: center;
 }
 
 .componentCompareVersionMenu {
@@ -14,6 +16,11 @@
   z-index: $topBar-zIndex;
 }
 
+.dropdownContainer {
+  display: flex;
+  align-items: center;
+}
+
 .componentCompareVersionPlaceholder {
   display: flex;
   align-items: center;

package/package.json

@@ -1,21 +1,21 @@
 {
   "name": "@teambit/component.ui.component-compare.version-picker",
-  "version": "0.0.103",
+  "version": "0.0.105",
   "homepage": "https://bit.cloud/teambit/component/ui/component-compare/version-picker",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.component",
     "name": "ui/component-compare/version-picker",
-    "version": "0.0.103"
+    "version": "0.0.105"
   },
   "dependencies": {
     "classnames": "2.2.6",
     "semver": "7.3.4",
     "core-js": "^3.0.0",
     "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.499",
-    "@teambit/component.ui.component-compare.context": "0.0.52",
+    "@teambit/component.ui.component-compare.context": "0.0.54",
     "@teambit/component.ui.component-compare.hooks.use-component-compare-url": "0.0.3",
-    "@teambit/component.ui.version-dropdown": "0.0.787"
+    "@teambit/component.ui.version-dropdown": "0.0.789"
   },
   "devDependencies": {
     "@types/classnames": "2.2.11",