diff --git a/.changeset/curvy-students-design.md b/.changeset/curvy-students-design.md new file mode 100644 index 0000000000..725b68be83 --- /dev/null +++ b/.changeset/curvy-students-design.md @@ -0,0 +1,14 @@ +--- +'braid-design-system': minor +--- + +--- +updated: + - IconPromote +--- + +**IconPromote:** Update semantic icon from sparkles to a megaphone + +With the introduction of `IconAI` recently adopting the sparkles artwork (aligning with the industry trend), the `IconPromote` semantic is now updated to use a megaphone instead of sparkles. + +This change will run through all semantic usages, for example `Alert`, `Notice`, etc. diff --git a/packages/braid-design-system/icons/promote.svg b/packages/braid-design-system/icons/promote.svg index fc66ed36d9..5a76faf0af 100644 --- a/packages/braid-design-system/icons/promote.svg +++ b/packages/braid-design-system/icons/promote.svg @@ -1,14 +1,3 @@ - - - - - - - - + + diff --git a/packages/braid-design-system/src/lib/components/Accordion/Accordion.docs.tsx b/packages/braid-design-system/src/lib/components/Accordion/Accordion.docs.tsx index 297f393a9f..f88b40afde 100644 --- a/packages/braid-design-system/src/lib/components/Accordion/Accordion.docs.tsx +++ b/packages/braid-design-system/src/lib/components/Accordion/Accordion.docs.tsx @@ -9,7 +9,7 @@ import { Text, TextLink, Strong, - IconPromote, + IconImage, } from '../'; import { Placeholder } from '../../playroom/components'; import { validSpaceValues } from './Accordion'; @@ -163,21 +163,21 @@ const docs: ComponentDocs = { } + icon={} > } + icon={} > } + icon={} > diff --git a/packages/braid-design-system/src/lib/components/Accordion/Accordion.gallery.tsx b/packages/braid-design-system/src/lib/components/Accordion/Accordion.gallery.tsx index a35db7feed..b6eacced17 100644 --- a/packages/braid-design-system/src/lib/components/Accordion/Accordion.gallery.tsx +++ b/packages/braid-design-system/src/lib/components/Accordion/Accordion.gallery.tsx @@ -5,7 +5,7 @@ import { Accordion, AccordionItem, Badge, - IconPromote, + IconImage, Placeholder, } from '../../playroom/components'; import type { ComponentExample } from 'site/types'; @@ -74,13 +74,13 @@ export const galleryItems: ComponentExample[] = [ Example: () => source( - }> + }> - }> + }> - }> + }> , diff --git a/packages/braid-design-system/src/lib/components/Accordion/Accordion.screenshots.tsx b/packages/braid-design-system/src/lib/components/Accordion/Accordion.screenshots.tsx index 88ba096c50..7b68dae54b 100644 --- a/packages/braid-design-system/src/lib/components/Accordion/Accordion.screenshots.tsx +++ b/packages/braid-design-system/src/lib/components/Accordion/Accordion.screenshots.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react'; import type { ComponentScreenshot } from 'site/types'; -import { AccordionItem, Accordion, Badge, Text, IconPromote, Stack } from '../'; +import { AccordionItem, Accordion, Badge, Text, IconImage, Stack } from '../'; import { Placeholder } from '../../playroom/components'; import { Box } from '../Box/Box'; import { debugTouchableAttrForDataProp } from '../private/touchable/debugTouchable'; @@ -428,7 +428,7 @@ export const screenshots: ComponentScreenshot = { label="Label" size="xsmall" id={`${id}_1`} - icon={} + icon={} > Content @@ -438,7 +438,7 @@ export const screenshots: ComponentScreenshot = { label="Label" size="small" id={`${id}_2`} - icon={} + icon={} > Content @@ -448,7 +448,7 @@ export const screenshots: ComponentScreenshot = { label="Label" size="standard" id={`${id}_3`} - icon={} + icon={} > Content @@ -458,7 +458,7 @@ export const screenshots: ComponentScreenshot = { label="Label" size="large" id={`${id}_4`} - icon={} + icon={} > Content @@ -491,7 +491,7 @@ export const screenshots: ComponentScreenshot = { size="xsmall" tone="secondary" id={`${id}_1`} - icon={} + icon={} > Content @@ -502,7 +502,7 @@ export const screenshots: ComponentScreenshot = { size="small" tone="secondary" id={`${id}_2`} - icon={} + icon={} > Content @@ -513,7 +513,7 @@ export const screenshots: ComponentScreenshot = { size="standard" tone="secondary" id={`${id}_3`} - icon={} + icon={} > Content @@ -524,7 +524,7 @@ export const screenshots: ComponentScreenshot = { size="large" tone="secondary" id={`${id}_4`} - icon={} + icon={} > Content diff --git a/packages/braid-design-system/src/lib/components/Heading/Heading.docs.tsx b/packages/braid-design-system/src/lib/components/Heading/Heading.docs.tsx index db7fc46d32..bc038b0044 100644 --- a/packages/braid-design-system/src/lib/components/Heading/Heading.docs.tsx +++ b/packages/braid-design-system/src/lib/components/Heading/Heading.docs.tsx @@ -8,7 +8,7 @@ import { Text, Strong, TextLink, - IconPromote, + IconImage, Alert, } from '../'; @@ -157,7 +157,7 @@ const docs: ComponentDocs = { ), Example: () => source( - }> + }> Heading with an icon , ), diff --git a/packages/braid-design-system/src/lib/components/Heading/Heading.gallery.tsx b/packages/braid-design-system/src/lib/components/Heading/Heading.gallery.tsx index ccb3eb29b8..d1481fa955 100644 --- a/packages/braid-design-system/src/lib/components/Heading/Heading.gallery.tsx +++ b/packages/braid-design-system/src/lib/components/Heading/Heading.gallery.tsx @@ -1,6 +1,6 @@ import React from 'react'; import type { ComponentExample } from 'site/types'; -import { Box, Heading, Stack, IconPromote } from '../'; +import { Box, Heading, Stack, IconImage } from '../'; import source from '@braid-design-system/source.macro'; @@ -73,16 +73,16 @@ export const galleryItems: ComponentExample[] = [ Example: () => source( - }> + }> Level 1 with icon - }> + }> Level 2 with icon - }> + }> Level 3 with icon - }> + }> Level 4 with icon , diff --git a/packages/braid-design-system/src/lib/components/Heading/Heading.screenshots.tsx b/packages/braid-design-system/src/lib/components/Heading/Heading.screenshots.tsx index f4fa46d112..02764d0576 100644 --- a/packages/braid-design-system/src/lib/components/Heading/Heading.screenshots.tsx +++ b/packages/braid-design-system/src/lib/components/Heading/Heading.screenshots.tsx @@ -1,7 +1,7 @@ import React, { Fragment, type ReactNode } from 'react'; import type { ComponentScreenshot } from 'site/types'; import { heading } from '../../css/typography.css'; -import { Box, Heading, IconPositive, IconPromote, Stack, Text } from '../'; +import { Box, Heading, IconPositive, IconImage, Stack, Text } from '../'; import { textAlignments } from '../../utils/docsHelpers'; import { BackgroundContrastTest } from '../../utils/BackgroundContrastTest'; @@ -130,7 +130,7 @@ export const screenshots: ComponentScreenshot = { {headingLevels.map((level) => ( - }> + }> Level {level} with icon @@ -147,7 +147,7 @@ export const screenshots: ComponentScreenshot = { } + icon={} key={alignment} > {alignment} @@ -163,7 +163,7 @@ export const screenshots: ComponentScreenshot = { } + icon={} > Right aligned mobile, center on tablet, left on desktop @@ -181,7 +181,7 @@ export const screenshots: ComponentScreenshot = { - + @@ -190,13 +190,13 @@ export const screenshots: ComponentScreenshot = { , Abc - + - + @@ -205,7 +205,7 @@ export const screenshots: ComponentScreenshot = { , เอบีซี - + diff --git a/packages/braid-design-system/src/lib/components/Tag/Tag.gallery.tsx b/packages/braid-design-system/src/lib/components/Tag/Tag.gallery.tsx index 9450807d45..08903f022c 100644 --- a/packages/braid-design-system/src/lib/components/Tag/Tag.gallery.tsx +++ b/packages/braid-design-system/src/lib/components/Tag/Tag.gallery.tsx @@ -1,6 +1,6 @@ import React from 'react'; import type { ComponentExample } from 'site/types'; -import { Tag, Inline, Text, TextLinkButton, IconPromote } from '../'; +import { Tag, Inline, Text, TextLinkButton, IconTag } from '../'; import source from '@braid-design-system/source.macro'; export const galleryItems: ComponentExample[] = [ @@ -17,7 +17,7 @@ export const galleryItems: ComponentExample[] = [ { label: 'With an icon', background: 'surface', - Example: () => source(}>Tag), + Example: () => source(}>Tag), }, { label: 'Clearable', diff --git a/packages/braid-design-system/src/lib/components/Text/Text.docs.tsx b/packages/braid-design-system/src/lib/components/Text/Text.docs.tsx index d3dc8e64fa..dd32e416ec 100644 --- a/packages/braid-design-system/src/lib/components/Text/Text.docs.tsx +++ b/packages/braid-design-system/src/lib/components/Text/Text.docs.tsx @@ -8,7 +8,7 @@ import { TextLink, Inline, List, - IconPromote, + IconImage, Alert, } from '../'; import source from '@braid-design-system/source.macro'; @@ -240,7 +240,7 @@ const docs: ComponentDocs = { ), Example: () => - source(}>Text with an icon), + source(}>Text with an icon), }, { label: 'Custom semantics', diff --git a/packages/braid-design-system/src/lib/components/Text/Text.gallery.tsx b/packages/braid-design-system/src/lib/components/Text/Text.gallery.tsx index a696cbb50b..36d3aaa699 100644 --- a/packages/braid-design-system/src/lib/components/Text/Text.gallery.tsx +++ b/packages/braid-design-system/src/lib/components/Text/Text.gallery.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Box, Text, Stack, IconPromote } from '../'; +import { Box, Text, Stack, IconImage } from '../'; import type { ComponentExample } from 'site/types'; import source from '@braid-design-system/source.macro'; @@ -70,16 +70,16 @@ export const galleryItems: ComponentExample[] = [ Example: () => source( - }> + }> Large with icon - }> + }> Standard with icon - }> + }> Small with icon - }> + }> Xsmall with icon , diff --git a/packages/braid-design-system/src/lib/components/Text/Text.screenshots.tsx b/packages/braid-design-system/src/lib/components/Text/Text.screenshots.tsx index 246e4a8705..d0289618ff 100644 --- a/packages/braid-design-system/src/lib/components/Text/Text.screenshots.tsx +++ b/packages/braid-design-system/src/lib/components/Text/Text.screenshots.tsx @@ -8,7 +8,7 @@ import { Column, Columns, IconPositive, - IconPromote, + IconImage, } from '../'; import { textSizeUntrimmed, fontWeight } from '../../css/typography.css'; import { textAlignments } from '../../utils/docsHelpers'; @@ -157,7 +157,7 @@ export const screenshots: ComponentScreenshot = { {textSizes.map((size) => ( - }> + }> {titleCase(size)} with icon @@ -171,7 +171,7 @@ export const screenshots: ComponentScreenshot = { Example: () => ( {textAlignments.map((alignment) => ( - }> + }> {titleCase(alignment)} ))} @@ -182,7 +182,7 @@ export const screenshots: ComponentScreenshot = { label: 'Responsive alignment with an icon', Example: () => ( - }> + }> Right aligned mobile, center on tablet, left on desktop @@ -200,7 +200,7 @@ export const screenshots: ComponentScreenshot = { - + @@ -209,13 +209,13 @@ export const screenshots: ComponentScreenshot = { , Abc - + - + @@ -224,7 +224,7 @@ export const screenshots: ComponentScreenshot = { , เอบีซี - + diff --git a/packages/braid-design-system/src/lib/components/icons/__snapshots__/icons.test.ts.snap b/packages/braid-design-system/src/lib/components/icons/__snapshots__/icons.test.ts.snap index 5bb14fbaeb..05a94f7d55 100644 --- a/packages/braid-design-system/src/lib/components/icons/__snapshots__/icons.test.ts.snap +++ b/packages/braid-design-system/src/lib/components/icons/__snapshots__/icons.test.ts.snap @@ -1562,7 +1562,6 @@ export const IconPromoteSvg = ({ title, titleId, ...props }: SVGProps) => ( ( {...props} > {title ? {title} : null} - + ); " diff --git a/packages/braid-design-system/src/lib/components/useToast/useToast.docs.tsx b/packages/braid-design-system/src/lib/components/useToast/useToast.docs.tsx index 4472eabcbd..f7072fc19e 100644 --- a/packages/braid-design-system/src/lib/components/useToast/useToast.docs.tsx +++ b/packages/braid-design-system/src/lib/components/useToast/useToast.docs.tsx @@ -8,7 +8,6 @@ import { Inline, TextLink, Strong, - IconPromote, Notice, IconLanguage, IconBookmark, @@ -32,7 +31,6 @@ const docs: ComponentDocs = { tone: 'positive', }) } - icon={} > Show animation @@ -274,7 +272,7 @@ const docs: ComponentDocs = { }) } > - Show animation + Show animation , ); @@ -336,7 +334,7 @@ const docs: ComponentDocs = { }) } > - Show animation + Show animation , ); @@ -394,7 +392,7 @@ const docs: ComponentDocs = { }) } > - Show animation + Show animation , ); @@ -457,7 +455,7 @@ const docs: ComponentDocs = { }) } > - Show animation + Show animation , ); diff --git a/packages/braid-design-system/src/lib/components/useToast/useToast.gallery.tsx b/packages/braid-design-system/src/lib/components/useToast/useToast.gallery.tsx index efc90aaff8..b67d66df71 100644 --- a/packages/braid-design-system/src/lib/components/useToast/useToast.gallery.tsx +++ b/packages/braid-design-system/src/lib/components/useToast/useToast.gallery.tsx @@ -1,7 +1,7 @@ import React from 'react'; import type { ComponentExample } from 'site/types'; import { useBraidTheme } from '../BraidProvider/BraidThemeContext'; -import { Button, IconBookmark, IconPromote, Inline } from '..'; +import { Button, IconBookmark, Inline } from '..'; import Toast from './Toast'; import source from '@braid-design-system/source.macro'; @@ -293,7 +293,6 @@ export const galleryItems: ComponentExample[] = [ action: { label: 'Action', onClick: () => {} }, }) } - icon={} > Show animation