Merge branch 'release-2024-12-10' into 'master'

Release 2024-12-10 See merge request ux/pingux!3093
pingidentity · Dec 10, 2024 · e4f01ec · e4f01ec
2 parents 6dccbcd + 081bb26
commit e4f01ec
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.96.0",
+  "version": "2.97.0-alpha.1",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",

diff --git a/src/components/SelectField/SelectField.stories.tsx b/src/components/SelectField/SelectField.stories.tsx
@@ -320,3 +320,17 @@ export const WithoutStatusIndicator = () => (
     <Item key="yellow">Yellow</Item>
   </SelectField>
 );
+
+export const WithHelpHint = () => (
+  <OverlayProvider>
+    <SelectField
+      width="100%"
+      hintText="Example Hint"
+      label="What's your favorite color?"
+    >
+      <Item key="red">Red</Item>
+      <Item key="blue">Blue</Item>
+      <Item key="yellow">Yellow</Item>
+    </SelectField>
+  </OverlayProvider>
+);
diff --git a/src/components/SelectField/SelectField.test.tsx b/src/components/SelectField/SelectField.test.tsx
@@ -4,7 +4,7 @@ import userEvent from '@testing-library/user-event';
 
 import { Item, Section, SelectField } from '../../index';
 import statuses from '../../utils/devUtils/constants/statuses';
-import { render, screen } from '../../utils/testUtils/testWrapper';
+import { fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
 import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 
 import { SelectItemProps, SelectSectionProps } from './SelectField.stories';
@@ -149,3 +149,12 @@ test('renders default placeholder text', () => {
   const placeholder = screen.getByText(placeholderText);
   expect(placeholder).toBeInTheDocument();
 });
+
+test('should show hintText text if prop is passed', () => {
+  const hintText = 'some hint text';
+  getComponent({ hintText });
+  const helpHintButton = screen.getByTestId('help-hint__button');
+  fireEvent.mouseMove(helpHintButton);
+  fireEvent.mouseEnter(helpHintButton);
+  expect(screen.getByText(hintText)).toBeInTheDocument();
+});
diff --git a/src/components/TooltipTrigger/Tooltip.styles.js b/src/components/TooltipTrigger/Tooltip.styles.js
@@ -6,14 +6,20 @@ export const container = {
   overflow: 'visible',
   wordBreak: 'break-word',
   display: 'flex',
-
   '.is-right > * > &, .is-left > * > &': {
     maxWidth: '24em',
     maxHeight: '6.5em',
     WebkitLineClamp: '4',
   },
 };
 
+export const badgeTooltipContainer = {
+  ...container,
+  fontSize: 'sm',
+  fontWeight: '1',
+  lineHeight: '15.87px',
+};
+
 const badge = {
   ...baseBadge,
   cursor: 'default',
@@ -47,6 +53,7 @@ const inline = {
 
 export default {
   container,
+  badgeTooltipContainer,
   badge,
   button,
   inline,

diff --git a/src/components/TooltipTrigger/TooltipTrigger.stories.tsx b/src/components/TooltipTrigger/TooltipTrigger.stories.tsx
@@ -6,6 +6,7 @@ import { Meta, StoryFn } from '@storybook/react';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Box, Button, Icon, IconButton, Text, Tooltip, TooltipTrigger } from '../../index';
 import { TooltipTriggerProps } from '../../types/tooltipTrigger';
+import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 
 import TooltipTriggerReadme from './TooltipTrigger.mdx';
 
@@ -111,11 +112,18 @@ export const BadgeWithTooltip: StoryFn = () => (
           Some text
         </Text>
       </Button>
-      <Tooltip>Useful tooltip</Tooltip>
+      <Tooltip variant="variants.tooltip.badgeTooltipContainer">Useful tooltip</Tooltip>
     </TooltipTrigger>
   </Box>
 );
 
+BadgeWithTooltip.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.tooltipTrigger.badgeWithTooltip,
+  },
+};
+
 export const TextWithTooltip: StoryFn = () => (
   <Box pl={50}>
     <TooltipTrigger>

diff --git a/src/types/selectField.ts b/src/types/selectField.ts
@@ -11,6 +11,7 @@ export interface SelectFieldProps<T> extends Omit<StyleProps, 'direction'>, UseS
         inContainer?: React.ReactNode,
     }
     'data-testid'?: string;
+    hintText?: string;
 }
 
 export interface SelectFieldBaseProps extends UseSelectFieldReturnProps<object>,

diff --git a/src/utils/designUtils/figmaLinks.ts b/src/utils/designUtils/figmaLinks.ts
@@ -181,6 +181,9 @@ export const FIGMA_LINKS = {
     withoutButton: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=52102-16196&t=OK8Fy4P3se6BKy0F-4',
     withoutLink: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=52102-16201&t=OK8Fy4P3se6BKy0F-4',
   },
+  tooltipTrigger: {
+    badgeWithTooltip: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=59201-5404&t=wsQsGpX0SmOiAweL-4',
+  },
   editButton: {
     default: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=58623-6267&t=pXTSE3YlGbL0X49N-4',
   },