feat: added example of Table custom cell renderer and usage of separa…

…tors between SelectControl options.
DevoInc · Nov 20, 2024 · a31e4cd · a31e4cd
1 parent f9e8cc6
commit a31e4cd
Show file tree

Hide file tree

Showing 22 changed files with 668 additions and 153 deletions.
diff --git a/packages/color/src/components/ColorPicker/ColorPicker.mdx b/packages/color/src/components/ColorPicker/ColorPicker.mdx
@@ -21,6 +21,13 @@ import { ColorPicker } from '@devoinc/genesys-ui-color';
 
 <Canvas of={Stories.Base} />
 
+## Related components
+
+- [Field](/?path=/docs/components-form-field--docs)
+- [Label](?path=/docs/components-form-label--docs)
+- [Helper](?path=/docs/components-feedback-helper--docs)
+- [FloatingHelper](?path=/docs/components-feedback-floatinghelper--docs)
+
 ## Props
 
 <ArgTypes of={Stories} />
diff --git a/packages/core/src/components/Checkbox/Checkbox.mdx b/packages/core/src/components/Checkbox/Checkbox.mdx
@@ -26,10 +26,14 @@ messages, and validation.
 
 <Canvas of={Stories.Base} />
 
-## Props
+## Related components
 
-<ArgTypes of={Stories} />
+- [CheckboxControl](?path=/docs/components-core-form-checkboxcontrol--docs)
+- [Field](/?path=/docs/components-form-field--docs)
+- [Label](?path=/docs/components-form-label--docs)
+- [Helper](?path=/docs/components-feedback-helper--docs)
+- [FloatingHelper](?path=/docs/components-feedback-floatinghelper--docs)
 
-## Related components
+## Props
 
-- [Checkbox](?path=/docs/components-core-form-checkboxcontrol--docs)
+<ArgTypes of={Stories} />
diff --git a/packages/core/src/components/InlineMessage/InlineMessage.stories.tsx b/packages/core/src/components/InlineMessage/InlineMessage.stories.tsx
@@ -159,6 +159,7 @@ export const Banner: Story = {
               <InlineMessage.Banner
                 actions={[
                   <Button
+                    colorScheme="blend-base"
                     key="BannerAction-1"
                     onClick={() => {
                       // eslint-disable-next-line no-alert
@@ -181,6 +182,7 @@ export const Banner: Story = {
               <InlineMessage.Banner
                 actions={[
                   <Button
+                    colorScheme="blend-base"
                     key="BannerAction-1"
                     onClick={() => {
                       // eslint-disable-next-line no-alert

diff --git a/packages/core/src/components/Input/Input.mdx b/packages/core/src/components/Input/Input.mdx
@@ -22,9 +22,11 @@ validation.
 
 ## How to import
 
-<Source code={`
+<Source
+  code={`
 import { Input } from '@devoinc/genesys-ui';
-`} />
+`}
+/>
 
 ## Basic usage
 
@@ -36,10 +38,14 @@ import { Input } from '@devoinc/genesys-ui';
 
 <Canvas of={Stories.SimpleValidation} />
 
-## Props
-
-<ArgTypes of={Stories} />
-
 ## Related components
 
 - [InputControl](?path=/docs/components-core-form-inputcontrol--docs)
+- [Field](/?path=/docs/components-form-field--docs)
+- [Label](?path=/docs/components-form-label--docs)
+- [Helper](?path=/docs/components-feedback-helper--docs)
+- [FloatingHelper](?path=/docs/components-feedback-floatinghelper--docs)
+
+## Props
+
+<ArgTypes of={Stories} />
diff --git a/packages/core/src/components/KeyValue/KeyValue.stories.tsx b/packages/core/src/components/KeyValue/KeyValue.stories.tsx
@@ -57,6 +57,7 @@ export const Formats: Story = {
           keyContent="Key content"
           valueContent="Value content"
           supportingVisual={<GIWeatherSunSummer />}
+          supportingVisualAlign="flex-start"
         />
         <KeyValue
           {...args}

diff --git a/packages/core/src/components/KeyValue/KeyValue.tsx b/packages/core/src/components/KeyValue/KeyValue.tsx
@@ -25,6 +25,7 @@ export const InternalKeyValue: React.FC<KeyValueProps> = ({
   role,
   size = 'md',
   supportingVisual,
+  supportingVisualAlign,
   tooltip,
   unit,
   valueContent,
@@ -39,7 +40,10 @@ export const InternalKeyValue: React.FC<KeyValueProps> = ({
     tooltip={tooltip}
   >
     {supportingVisual && (
-      <KeyValueSupportingVisual format={format}>
+      <KeyValueSupportingVisual
+        supportingVisualAlign={supportingVisualAlign}
+        format={format}
+      >
         {supportingVisual}
       </KeyValueSupportingVisual>
     )}

diff --git a/.../src/components/KeyValue/components/KeyValueSupportingVisual/KeyValueSupportingVisual.tsx b/.../src/components/KeyValue/components/KeyValueSupportingVisual/KeyValueSupportingVisual.tsx
@@ -8,17 +8,20 @@ import { KeyValueContext } from '../../context';
 import { Flex } from '../../../Flex';
 
 export interface KeyValueSupportingVisualProps
-  extends Pick<IKeyValue, 'format' | 'children' | 'iconSize'> {}
+  extends Pick<
+    IKeyValue,
+    'format' | 'children' | 'iconSize' | 'supportingVisualAlign'
+  > {}
 
 export const KeyValueSupportingVisual: React.FC<
   KeyValueSupportingVisualProps
-> = ({ children, iconSize }) => {
+> = ({ children, iconSize, supportingVisualAlign }) => {
   const cmpTokens = useTheme().cmp.keyValue.visual;
   const context = React.useContext(KeyValueContext);
   const evalIconSize = iconSize || context.iconSize;
 
   return (
-    <Flex.Item flex="0 0 auto" display="flex">
+    <Flex.Item flex="0 0 auto" display="flex" alignSelf={supportingVisualAlign}>
       <IconContext.Provider
         value={{
           color: cmpTokens.color.text,

diff --git a/packages/core/src/components/KeyValue/declarations.ts b/packages/core/src/components/KeyValue/declarations.ts
@@ -44,4 +44,6 @@ export interface IKeyValue {
    * component (if it's React Icon component from genesys-icons library it will
    * inherit the perfect size from context). */
   supportingVisual?: React.ReactNode;
+  /** The supporting visual alignment relative to the text block: center, flex-end... etc. */
+  supportingVisualAlign?: React.CSSProperties['alignItems'];
 }
diff --git a/packages/core/src/components/Pagination/Pagination.tsx b/packages/core/src/components/Pagination/Pagination.tsx
@@ -2,12 +2,17 @@ import * as React from 'react';
 
 import type { IPaginationCommonInterface } from './declarations';
 
-import { PaginationNav, PaginationRange, PaginationLabel, PaginationContainer } from './components';
-import {type HFlexProps } from '../HFlex';
+import {
+  PaginationNav,
+  PaginationRange,
+  PaginationLabel,
+  PaginationContainer,
+} from './components';
+import { type HFlexProps } from '../HFlex';
 
 export interface PaginationProps
   extends IPaginationCommonInterface,
-    HFlexProps {}
+    Omit<HFlexProps, 'onChange'> {}
 
 export const InternalPagination: React.FC<PaginationProps> = ({
   as = 'nav',

diff --git a/...ges/core/src/components/Pagination/components/PaginationContainer/PaginationContainer.tsx b/...ges/core/src/components/Pagination/components/PaginationContainer/PaginationContainer.tsx
@@ -2,20 +2,21 @@ import * as React from 'react';
 import { HFlex, type HFlexProps } from '../../../HFlex';
 import { TBaseSize } from 'src/declarations';
 
-export interface PaginationContainerProps
-  extends HFlexProps {
-    size: TBaseSize,
-  }
+export interface PaginationContainerProps extends HFlexProps {
+  size: TBaseSize;
+}
 
 export const PaginationContainer: React.FC<PaginationContainerProps> = ({
   as = 'nav',
   justifyContent = 'flex-end',
   size = 'md',
   spacing,
   children,
+  ...restHFlexProps
 }) => {
   return (
     <HFlex
+      {...restHFlexProps}
       as={as}
       justifyContent={justifyContent}
       spacing={spacing || `cmp-${size}`}

diff --git a/packages/core/src/components/Radio/Radio.mdx b/packages/core/src/components/Radio/Radio.mdx
@@ -30,10 +30,14 @@ messages, and validation.
 
 <Canvas of={Stories.Base} />
 
-## Props
-
-<ArgTypes of={Stories} />
-
 ## Related components
 
 - [RadioControl](?path=/docs/components-core-form-radiocontrol--docs)
+- [Field](/?path=/docs/components-form-field--docs)
+- [Label](?path=/docs/components-form-label--docs)
+- [Helper](?path=/docs/components-feedback-helper--docs)
+- [FloatingHelper](?path=/docs/components-feedback-floatinghelper--docs)
+
+## Props
+
+<ArgTypes of={Stories} />
diff --git a/packages/core/src/components/Select/Select.mdx b/packages/core/src/components/Select/Select.mdx
@@ -28,10 +28,14 @@ messages, and validation.
 
 <Canvas of={Stories.Base} />
 
-## Props
-
-<ArgTypes of={Stories} />
-
 ## Related components
 
 - [SelectControl](?path=/docs/components-core-form-selectcontrol--docs)
+- [Field](/?path=/docs/components-form-field--docs)
+- [Label](?path=/docs/components-form-label--docs)
+- [Helper](?path=/docs/components-feedback-helper--docs)
+- [FloatingHelper](?path=/docs/components-feedback-floatinghelper--docs)
+
+## Props
+
+<ArgTypes of={Stories} />