feat: new prop to define max-width for SelectMenu and new styles and …

…props for KeyValue to get a description list.
DevoInc · Oct 18, 2024 · 67d4d86 · 67d4d86
1 parent 8f0af8c
commit 67d4d86
Show file tree

Hide file tree

Showing 12 changed files with 124 additions and 13 deletions.
diff --git a/packages/core/src/components/KeyValue/KeyValue.stories.tsx b/packages/core/src/components/KeyValue/KeyValue.stories.tsx
@@ -13,6 +13,7 @@ import { KeyValue } from './KeyValue';
 import { HFlex } from '../HFlex';
 import { Avatar } from '../Avatar';
 import { KeyValueText, KeyValueTextContainer } from './components';
+import { VFlex } from '../VFlex';
 
 const meta: Meta<typeof KeyValue> = {
   title: 'Components/Feedback/KeyValue',
@@ -164,3 +165,44 @@ export const Custom: Story = {
       </KeyValue._Container>
     ))(args),
 };
+
+export const DescriptionList: Story = {
+  name: 'Description list mode',
+  render: () =>
+    (() => (
+      <VFlex width="50rem">
+        <KeyValue
+          keyContent="Description"
+          keyWidth="25%"
+          valueContent="Add the execution metadata for the current execution to the table. Currently only execution start time and end time in millis are added. This operation works for both Playbook-authoring mode and for batch executions."
+          valueTruncateLine="none"
+          valueWidth="75%"
+          format="row"
+        />
+        <KeyValue
+          keyContent="Signature"
+          keyWidth="25%"
+          valueContent="function addExecutionMetadata(table:TableReference)"
+          valueTruncateLine="none"
+          valueWidth="75%"
+          format="row"
+        />
+        <KeyValue
+          keyContent="Parameters"
+          keyWidth="25%"
+          valueContent="able (TableReference)	-	A table."
+          valueTruncateLine="none"
+          valueWidth="75%"
+          format="row"
+        />
+        <KeyValue
+          keyContent="Returns"
+          keyWidth="25%"
+          valueContent="The input table with an additional lhub_execution_metadata column is returned. lhub_execution_metadata is a JSON object and contains values of execution metadata fields like interval start, end time in milliseconds, and URL that links to the result page of the batch execution."
+          valueTruncateLine="none"
+          valueWidth="75%"
+          format="row"
+        />
+      </VFlex>
+    ))(),
+};
diff --git a/packages/core/src/components/KeyValue/KeyValue.tsx b/packages/core/src/components/KeyValue/KeyValue.tsx
@@ -20,12 +20,16 @@ export const InternalKeyValue: React.FC<KeyValueProps> = ({
   id,
   invertOrder,
   keyContent,
+  keyTruncateLine = 1,
+  keyWidth,
   role,
   size = 'md',
   supportingVisual,
   tooltip,
   unit,
   valueContent,
+  valueTruncateLine = 1,
+  valueWidth,
 }) => (
   <KeyValueContainer
     format={format}
@@ -51,6 +55,24 @@ export const InternalKeyValue: React.FC<KeyValueProps> = ({
                 ? 2
                 : 1
         }
+        truncateLine={
+          invertOrder && boldScheme === 'value'
+            ? keyTruncateLine
+            : boldScheme === 'value'
+              ? valueTruncateLine
+              : invertOrder
+                ? valueTruncateLine
+                : keyTruncateLine
+        }
+        width={
+          invertOrder && boldScheme === 'value'
+            ? keyWidth
+            : boldScheme === 'value'
+              ? valueWidth
+              : invertOrder
+                ? valueWidth
+                : keyWidth
+        }
         size={size}
       >
         {boldScheme === 'key' ? keyContent : valueContent}
@@ -65,6 +87,24 @@ export const InternalKeyValue: React.FC<KeyValueProps> = ({
                 ? 1
                 : 2
         }
+        truncateLine={
+          invertOrder && boldScheme === 'value'
+            ? keyTruncateLine
+            : boldScheme === 'value'
+              ? keyTruncateLine
+              : invertOrder
+                ? keyTruncateLine
+                : valueTruncateLine
+        }
+        width={
+          invertOrder && boldScheme === 'value'
+            ? keyWidth
+            : boldScheme === 'value'
+              ? keyWidth
+              : invertOrder
+                ? keyWidth
+                : valueWidth
+        }
         size={size}
         unit={unit}
       >

diff --git a/packages/core/src/components/KeyValue/components/KeyValueText/KeyValueText.tsx b/packages/core/src/components/KeyValue/components/KeyValueText/KeyValueText.tsx
@@ -11,6 +11,7 @@ export interface KeyValueTextProps
     Omit<TypographyProps, 'children'>,
     Pick<IKeyValue, 'children' | 'unit' | 'size'> {
   bold?: boolean;
+  width?: React.CSSProperties['width'];
 }
 
 export const KeyValueText: React.FC<KeyValueTextProps> = ({
@@ -21,17 +22,20 @@ export const KeyValueText: React.FC<KeyValueTextProps> = ({
   unit,
   order,
   size,
+  truncateLine = 1,
+  width,
   ...restTypographyProps
 }) => {
   const context = React.useContext(KeyValueContext);
   const evalSize = size || context.size;
+
   return (
-    <Flex.Item minWidth="0" order={order}>
+    <Flex.Item minWidth="0" order={order} width={width}>
       <Typography
         {...restTypographyProps}
         bold={bold}
         colorScheme={colorScheme || (bold ? 'stronger' : 'weak')}
-        truncateLine={1}
+        truncateLine={truncateLine}
         format={format || `body-${evalSize}`}
       >
         <>

diff --git a/...s/core/src/components/KeyValue/components/KeyValueTextContainer/KeyValueTextContainer.tsx b/...s/core/src/components/KeyValue/components/KeyValueTextContainer/KeyValueTextContainer.tsx
@@ -19,7 +19,13 @@ export const KeyValueTextContainer: React.FC<KeyValueTextContainerProps> = ({
   return (
     <Flex
       flexDirection={evalFormat === 'row' ? evalFormat : 'column'}
-      alignItems={evalFormat !== 'base' ? 'center' : undefined}
+      alignItems={
+        evalFormat === 'column'
+          ? 'center'
+          : evalFormat === 'row'
+            ? 'flex-start'
+            : undefined
+      }
       gap={
         evalFormat === 'row' && evalSize !== 'md'
           ? 'cmp-xxs'
@@ -28,6 +34,7 @@ export const KeyValueTextContainer: React.FC<KeyValueTextContainerProps> = ({
             : undefined
       }
       minWidth="0"
+      width="100%"
     >
       {children}
     </Flex>

diff --git a/packages/core/src/components/KeyValue/declarations.ts b/packages/core/src/components/KeyValue/declarations.ts
@@ -3,6 +3,7 @@ import * as React from 'react';
 import type { TTypoBodySize } from '../../declarations';
 import { PickUnion } from '../../typeFunctions';
 
+import type { ITypography } from '../Typography/declarations';
 export type TKeyValueBoldScheme = 'key' | 'value';
 export type TKeyValueFormat = 'base' | 'row' | 'column';
 
@@ -19,6 +20,11 @@ export interface IKeyValue {
   invertOrder?: boolean;
   /** The content for the key block. */
   keyContent?: React.ReactNode;
+  /** The number of lines before get truncated text with overflow to ellipsis
+   * (Css line-clamp property). */
+  keyTruncateLine?: ITypography['truncateLine'];
+  /** The width for the key block. */
+  keyWidth?: React.CSSProperties['width'];
   /** The size of the component which defines font-size, spacing, line-height...
    * etc. */
   size?: PickUnion<TTypoBodySize, 'xs' | 'sm' | 'md'>;
@@ -29,6 +35,11 @@ export interface IKeyValue {
   unit?: React.ReactNode;
   /** The content for the value block. */
   valueContent?: React.ReactNode;
+  /** The width for the value block. */
+  valueWidth?: React.CSSProperties['width'];
+  /** The number of lines before get truncated text with overflow to ellipsis
+   * (Css line-clamp property). */
+  valueTruncateLine?: ITypography['truncateLine'];
   /** The supporting visual: icon, image, SVG... etc. at the beginning of the
    * component (if it's React Icon component from genesys-icons library it will
    * inherit the perfect size from context). */

diff --git a/packages/core/src/components/SelectControl/SelectControl.cases.stories.tsx b/packages/core/src/components/SelectControl/SelectControl.cases.stories.tsx
@@ -81,7 +81,7 @@ export const SingleOptionWithReset: Story = {
             {...props}
             //menuIsOpen
             onChange={(opt: TSelectOption) => {
-              setValue(opt.value)
+              setValue(opt.value);
             }}
             options={[
               { value: 1, label: 'Option one' },
@@ -224,6 +224,7 @@ export const MultipleBasic: Story = {
           onChange={(val) => setValue(val)}
           options={getOptions(50)}
           value={value}
+          maxMenuWidth="120px"
         />
       );
     })(args),

diff --git a/packages/core/src/components/SelectControl/components/Menu/Menu.tsx b/packages/core/src/components/SelectControl/components/Menu/Menu.tsx
@@ -42,6 +42,7 @@ export const Menu = <Option extends TSelectOption>(
         $menuRelative={props.selectProps.menuRelative}
         $maxMenuHeight={props.selectProps.maxMenuHeight}
         $minMenuHeight={props.selectProps.minMenuHeight}
+        $maxMenuWidth={props.selectProps.maxMenuWidth}
         $minMenuWidth={props.selectProps.minMenuWidth}
         $multipleSubtle={props.selectProps.multipleSubtle}
       >

diff --git a/packages/core/src/components/SelectControl/components/Menu/StyledSelectMenu.ts b/packages/core/src/components/SelectControl/components/Menu/StyledSelectMenu.ts
@@ -31,6 +31,7 @@ export interface StyledSelectMenuProps {
   $menuRelative?: boolean;
   $multipleSubtle?: boolean;
   $minMenuHeight: React.CSSProperties['minHeight'];
+  $maxMenuWidth: React.CSSProperties['maxWidth'];
   $minMenuWidth: React.CSSProperties['minWidth'];
   $size: TFieldSize;
 }
@@ -45,6 +46,7 @@ export const StyledSelectMenu = styled.div<StyledSelectMenuProps>`
     $menuQuiet,
     $menuRelative,
     $minMenuHeight = 0,
+    $maxMenuWidth,
     $minMenuWidth,
     $multipleSubtle,
     $size = 'sm',
@@ -81,6 +83,7 @@ export const StyledSelectMenu = styled.div<StyledSelectMenuProps>`
           margin-bottom: ${$menuQuiet && '0'};
           ${elevationMixin(theme)($menuQuiet ? 'ground' : elevation)};
           min-width: ${$minMenuWidth};
+          max-width: ${$maxMenuWidth};
           background: ${menuTokens.color.background.base};
           ${getFieldControlTypo({ theme, $size })};
           cursor: default;

diff --git a/packages/core/src/components/SelectControl/declarations.ts b/packages/core/src/components/SelectControl/declarations.ts
@@ -36,6 +36,8 @@ export interface ICommonSelectCmps {
   menuQuiet?: boolean;
   /** Whether the menu is display relative or absolute */
   menuRelative?: boolean;
+  /** Maximum width of the menu */
+  maxMenuWidth?: React.CSSProperties['maxWidth'];
   /** Minimum width of the menu */
   minMenuWidth?: React.CSSProperties['minWidth'];
   /** Show select all button when select is multi */

diff --git a/...nents/Stepper/components/StepperItem/components/StepperItemDivider/StepperItemDivider.tsx b/...nents/Stepper/components/StepperItem/components/StepperItemDivider/StepperItemDivider.tsx
@@ -16,7 +16,7 @@ export const StepperItemDivider: React.FC<StepperItemDividerProps> = ({
   return (
     <Icon
       {...restIconProps}
-      size="xxxs"
+      size={size || 'xxxs'}
       style={{
         color: theme.cmp.stepper.separator.color.background,
         marginRight: theme.cmp.stepper.separator.space.marginHor,

diff --git a/packages/core/src/components/Typography/declarations.ts b/packages/core/src/components/Typography/declarations.ts
@@ -85,7 +85,7 @@ export interface ITypography {
   textAlign?: React.CSSProperties['textAlign'];
   /** The number of lines before get truncated text with overflow to ellipsis
    * (Css line-clamp property). */
-  truncateLine?: number;
+  truncateLine?: React.CSSProperties['lineClamp'];
   /** Definition of variant and size in the same value: hero-sm, heading-h1,
    * body-sm... etc. */
   format?: TTypographyFormat;

diff --git a/packages/core/src/styled/mixins/typography/truncateTypoMixin.ts b/packages/core/src/styled/mixins/typography/truncateTypoMixin.ts
@@ -14,20 +14,20 @@ export const truncateTypoMixin = (
     $lineClamp,
   }: {
     $maxWidth?: React.CSSProperties['maxWidth'];
-    $lineClamp?: number;
+    $lineClamp?: React.CSSProperties['lineClamp'];
   } = { $maxWidth: '100%', $lineClamp: 1 },
 ) => css`
   max-width: ${$maxWidth};
   overflow: hidden;
-  ${$lineClamp > 1
+  ${$lineClamp == 1
     ? css`
-        display: -webkit-box;
-        -webkit-line-clamp: ${$lineClamp};
-        -webkit-box-orient: vertical;
-      `
-    : css`
         white-space: nowrap;
         word-wrap: normal;
         text-overflow: ellipsis;
+      `
+    : css`
+        display: -webkit-box;
+        -webkit-line-clamp: ${$lineClamp};
+        -webkit-box-orient: vertical;
       `}
 `;