Merge pull request #31 from make-software/CLICK-840

Product Menu aligning. + fixed paddingScale warning

Author: eugenebelov

dist/cspr-design.es.js

@@ -35282,6 +35282,7 @@ function x8(e) {
   });
 }
 const E8 = be(S8).withConfig({
+  shouldForwardProp: (e) => e !== "paddingScale",
   displayName: "tooltip__StyledReactTooltip",
   componentId: "sc-1m82hpm-0"
 })(({
@@ -40777,7 +40778,7 @@ const k7 = be.span.withConfig({
   disabled: C
 }) => e.withMedia({
   display: "flex",
-  flex: "1 1 auto",
+  flex: "0 1 auto",
   justifyContent: "center",
   alignItems: "center",
   padding: ["8px 12px", "8px 12px", "16px"],

dist/cspr-design.umd.js

@@ -32,7 +32,7 @@ export const ProductItemWrapper = styled.span<{
 }>(({ theme, isOpen, selected, disabled }) =>
   theme.withMedia({
     display: 'flex',
-    flex: '1 1 auto',
+    flex: '0 1 auto',
     justifyContent: 'center',
     alignItems: 'center',
     padding: ['8px 12px', '8px 12px', '16px'],

dist/lib/components/tooltip/tooltip.d.ts.map

@@ -74,11 +74,8 @@ Primary.args = {
         nameLabel={'CSPR.studio (Beta)'}
         link={''}
         icon={CsprNftStudioIcon}
-        comingSoonBadgeLabel={'Coming soom'}
+        comingSoonBadgeLabel={'Coming soon'}
       />
-      <ProductsMenuItem nameLabel={'some name3'} link={''} icon={''} />
-      <ProductsMenuItem nameLabel={'some name3'} link={''} icon={''} />
-      <ProductsMenuItem nameLabel={'some name3'} link={''} icon={''} />
     </>
   ),
 };

src/lib/components/navigation/cspr-products-menu/products-menu-item.tsx

@@ -28,8 +28,11 @@ export interface TooltipProps extends BaseProps {
   limitWidth?: boolean | string;
 }
 
-const StyledReactTooltip = styled(ReakitTooltip)<StyledReactTooltipProps>(
-  ({ theme, lineHeight = 'sm', scale = 'sm', paddingScale = 2 }) => ({
+const StyledReactTooltip = styled(
+    ReakitTooltip,
+).withConfig<StyledReactTooltipProps>({
+    shouldForwardProp: (prop) => prop !== 'paddingScale',
+})(({ theme, lineHeight = 'sm', scale = 'sm', paddingScale = 2 }) => ({
     zIndex: theme.zIndex.tooltip,
     color: theme.styleguideColors.contentPrimary,
     backgroundColor: theme.styleguideColors.backgroundPrimary,