From 94e2130a6ea2880ef2eecb8cb75cff4d127a1b63 Mon Sep 17 00:00:00 2001 From: Kiran Gupta Date: Tue, 10 Dec 2024 06:49:41 +0000 Subject: [PATCH 1/4] feat: [UIP-7091] Update Badge with Tooltip styling to match design spec ## Describe your changes ## Any testing tips ## Checklist before requesting a review - [ ] I have performed a self-review of my code - [ ] I have added tests for any new or fixed functionality to prevent regressions - [ ] I have added clarifying code comments to blocks which other devs may have questions on Closes UIP-7091 --- src/components/TooltipTrigger/Tooltip.styles.js | 9 ++++++++- .../TooltipTrigger/TooltipTrigger.stories.tsx | 10 +++++++++- src/utils/designUtils/figmaLinks.ts | 3 +++ 3 files changed, 20 insertions(+), 2 deletions(-) diff --git a/src/components/TooltipTrigger/Tooltip.styles.js b/src/components/TooltipTrigger/Tooltip.styles.js index e144a8c20..ff8f73b16 100644 --- a/src/components/TooltipTrigger/Tooltip.styles.js +++ b/src/components/TooltipTrigger/Tooltip.styles.js @@ -6,7 +6,6 @@ export const container = { overflow: 'visible', wordBreak: 'break-word', display: 'flex', - '.is-right > * > &, .is-left > * > &': { maxWidth: '24em', maxHeight: '6.5em', @@ -14,6 +13,13 @@ export const container = { }, }; +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 index 5bc8c1438..515591259 100644 --- 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 - Useful tooltip + Useful tooltip ); +BadgeWithTooltip.parameters = { + design: { + type: 'figma', + url: FIGMA_LINKS.tooltipTrigger.badgeWithTooltip, + }, +}; + export const TextWithTooltip: StoryFn = () => ( diff --git a/src/utils/designUtils/figmaLinks.ts b/src/utils/designUtils/figmaLinks.ts index ed3608e9b..63a193c5e 100644 --- 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', }, From 8f4526131200aa4e28cdb4f99a4b3b66978d9944 Mon Sep 17 00:00:00 2001 From: devtools-jenkins Date: Tue, 10 Dec 2024 07:08:02 +0000 Subject: [PATCH 2/4] chore(release): publish alpha build --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 32734ee0c..236c1f04d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@pingux/astro", - "version": "2.96.0", + "version": "2.97.0-alpha.0", "description": "React component library for Ping Identity's design system", "repository": { "type": "git", From 9412566eb7f2a1f77e540f6e45d899fdac41c6bb Mon Sep 17 00:00:00 2001 From: Ridhisha Dangol Date: Tue, 10 Dec 2024 16:32:05 +0000 Subject: [PATCH 3/4] fix: [UIP-7252] Add hintText to SelectField ## Describe your changes ## Any testing tips ## Checklist before requesting a review - [ ] I have performed a self-review of my code - [ ] I have added tests for any new or fixed functionality to prevent regressions - [ ] I have added clarifying code comments to blocks which other devs may have questions on Closes UIP-7252 --- src/components/SelectField/SelectField.stories.tsx | 14 ++++++++++++++ src/components/SelectField/SelectField.test.tsx | 11 ++++++++++- src/types/selectField.ts | 1 + 3 files changed, 25 insertions(+), 1 deletion(-) diff --git a/src/components/SelectField/SelectField.stories.tsx b/src/components/SelectField/SelectField.stories.tsx index fd5e65d11..404927374 100644 --- a/src/components/SelectField/SelectField.stories.tsx +++ b/src/components/SelectField/SelectField.stories.tsx @@ -320,3 +320,17 @@ export const WithoutStatusIndicator = () => ( Yellow ); + +export const WithHelpHint = () => ( + + + Red + Blue + Yellow + + +); diff --git a/src/components/SelectField/SelectField.test.tsx b/src/components/SelectField/SelectField.test.tsx index c52c32419..794b8c6bd 100644 --- 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/types/selectField.ts b/src/types/selectField.ts index 5488fec1f..6830e99c6 100644 --- a/src/types/selectField.ts +++ b/src/types/selectField.ts @@ -11,6 +11,7 @@ export interface SelectFieldProps extends Omit, UseS inContainer?: React.ReactNode, } 'data-testid'?: string; + hintText?: string; } export interface SelectFieldBaseProps extends UseSelectFieldReturnProps, From 081bb261b319f746534d7552627d992f0a78ebe3 Mon Sep 17 00:00:00 2001 From: devtools-jenkins Date: Tue, 10 Dec 2024 16:50:05 +0000 Subject: [PATCH 4/4] chore(release): publish alpha build --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 236c1f04d..7da74a566 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@pingux/astro", - "version": "2.97.0-alpha.0", + "version": "2.97.0-alpha.1", "description": "React component library for Ping Identity's design system", "repository": { "type": "git",