Skip to content

Commit

Permalink
Merge branch 'master' into react-18-2
Browse files Browse the repository at this point in the history
  • Loading branch information
pabmacias authored Jan 7, 2025
2 parents 92adf61 + 7e0f67e commit 9ab02e4
Show file tree
Hide file tree
Showing 53 changed files with 769 additions and 179 deletions.
2 changes: 1 addition & 1 deletion .github/pr-title-checker-config.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
"ESLint plugin: ",
"Tokens: "
],
"regexp": "^(?=.*(?:Accordion|ActivationCard|Avatar|AvatarGroup|Badge|BannerCallout|BannerOverlay|BannerSlim|BannerUpsell|Box|Button|ButtonGroup|ButtonToggle|ChartGraph|Checkbox|Collage|ColorSchemeProvider|Column|ComboBox|Container|Datapoint|DateRange|DateField|DatePicker|DefaultLabelProvider|DeviceTypeProvider|Divider|Dropdown|GlobalEventsHandlerProvider|Fieldset|Flex|Heading|HelpButton|Icon|IconButton|IconButtonFloating|Image|Label|Layer|Letterbox|Link|List|Mask|Masonry|Modal|ModalAlert|NumberField|OverlayPanel|PageHeader|Pog|Popover|PopoverEducational|Pulsar|RadioButton|RadioGroup|ScrollBoundaryContainer|SearchField|SearchGuide|SegmentedControl|SelectList|Sheet|SheetMobile|SideNavigation|Spinner|Status|Sticky|Switch|Table|TableOfContents|Tabs|Tag|TagData|TapArea|Text|TextCompact|TextUI|TextArea|TextField|TileData|Toast|Tooltip|useFocusVisible|useReducedMotion|Video|WashAnimated|ZIndex-Classes):\\s.*)+",
"regexp": "^(?=.*(?:Accordion|ActivationCard|Avatar|AvatarGroup|Badge|BannerCallout|BannerOverlay|BannerSlim|BannerUpsell|Box|Button|ButtonGroup|ButtonToggle|ChartGraph|Checkbox|Collage|ColorSchemeProvider|Column|ComboBox|Container|Datapoint|DateRange|DateField|DatePicker|DefaultLabelProvider|DeviceTypeProvider|Divider|Dropdown|GlobalEventsHandlerProvider|Fieldset|Flex|Heading|HelpButton|Icon|IconButton|IconButtonFloating|IconCompact|Image|Label|Layer|Letterbox|Link|List|Mask|Masonry|Modal|ModalAlert|NumberField|OverlayPanel|PageHeader|Pog|Popover|PopoverEducational|Pulsar|RadioButton|RadioGroup|ScrollBoundaryContainer|SearchField|SearchGuide|SegmentedControl|SelectList|Sheet|SheetMobile|SideNavigation|Spinner|Status|Sticky|Switch|Table|TableOfContents|Tabs|Tag|TagData|TapArea|Text|TextCompact|TextUI|TextArea|TextField|TileData|Toast|Tooltip|useFocusVisible|useReducedMotion|Video|WashAnimated|ZIndex-Classes):\\s.*)+",
"regexpFlags": "",
"ignoreLabels": []
},
Expand Down
54 changes: 54 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,57 @@
## 167.1.2 (Jan 7, 2025)

### Patch

- IconCompact: added docs, accessibility tests, and indexed component ([#3924](https://github.com/pinterest/gestalt/pull/3924)) - [Preview link](https://deploy-preview-3924--gestalt.netlify.app?devexample=true)

## 167.1.1 (Jan 7, 2025)

### Patch

- Internal: remove internal circular dependencies ([#3925](https://github.com/pinterest/gestalt/pull/3925)) - [Preview link](https://deploy-preview-3925--gestalt.netlify.app?devexample=true)

## 167.1.0 (Jan 6, 2025)

### Minor

- DatePicker, TextField: 1. fix open behavior, 2. support to onClick ([#3921](https://github.com/pinterest/gestalt/pull/3921)) - [Preview link](https://deploy-preview-3921--gestalt.netlify.app?devexample=true)

## 167.0.1 (Jan 6, 2025)

### Patch

- DatePicker: upgraded package to latest 7.5.0 ([#3920](https://github.com/pinterest/gestalt/pull/3920)) - [Preview link](https://deploy-preview-3920--gestalt.netlify.app?devexample=true)

## 167.0.0 (Jan 4, 2025)

### Major

- SideNavigation: patch for accessibility aria-selected bug ([#3919](https://github.com/pinterest/gestalt/pull/3919)) - [Preview link](https://deploy-preview-3919--gestalt.netlify.app?devexample=true)

## 166.3.0 (Jan 3, 2025)

### Minor

- BannerSlim: VR ([#3918](https://github.com/pinterest/gestalt/pull/3918)) - [Preview link](https://deploy-preview-3918--gestalt.netlify.app?devexample=true)

## 166.2.3 (Jan 2, 2025)

### Patch

- DateRange: Highlight secondary range in DateRange component (web) ([#3910](https://github.com/pinterest/gestalt/pull/3910)) - [Preview link](https://deploy-preview-3910--gestalt.netlify.app?devexample=true)

## 166.2.2 (Jan 2, 2025)

### Patch

- DateRange: Remove overflow prop and apply border radius with css instead (web) ([#3909](https://github.com/pinterest/gestalt/pull/3909)) - [Preview link](https://deploy-preview-3909--gestalt.netlify.app?devexample=true)

## 166.2.1 (Dec 17, 2024)

### Patch

- Masonry: Update fluid grid to not floor column width (take two) ([#3913](https://github.com/pinterest/gestalt/pull/3913)) - [Preview link](https://deploy-preview-3913--gestalt.netlify.app?devexample=true)

## 166.2.0 (Dec 9, 2024)

### Minor
Expand Down
1 change: 1 addition & 0 deletions docs/docs-components/siteIndex.ts
Original file line number Diff line number Diff line change
Expand Up @@ -149,6 +149,7 @@ const siteIndex: readonly [siteIndexType, ...siteIndexType[]] = [
'IconButton',
'IconButtonLink',
'IconButtonFloating',
'IconCompact',
'Image',
'Indicator',
'Label',
Expand Down
30 changes: 0 additions & 30 deletions docs/examples/icon/compactIcon.tsx

This file was deleted.

9 changes: 9 additions & 0 deletions docs/examples/iconCompact/builtInIcon.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { Flex, IconCompact } from 'gestalt';

export default function Example() {
return (
<Flex alignItems="center" height="100%" justifyContent="center" width="100%">
<IconCompact accessibilityLabel="Add new Pins" icon="compact-add" />
</Flex>
);
}
15 changes: 15 additions & 0 deletions docs/examples/iconCompact/customIcon.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { Flex, IconCompact } from 'gestalt';

export default function Example() {
return (
<Flex alignItems="center" height="100%" justifyContent="center" width="100%">
<IconCompact
accessibilityLabel="Add new Pins"
dangerouslySetSvgPath={{
__path:
'M9.41 1.41a1.41 1.41 0 0 0-2.82 0V6.6H1.4a1.41 1.41 0 1 0 0 2.82h5.2v5.18a1.41 1.41 0 1 0 2.82 0V9.4h5.18a1.41 1.41 0 1 0 0-2.82H9.4z',
}}
/>
</Flex>
);
}
11 changes: 11 additions & 0 deletions docs/examples/iconCompact/main.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { Flex, IconCompact } from 'gestalt';

export default function Example() {
return (
<Flex alignItems="center" height="100%" justifyContent="center" width="100%">
<Flex alignItems="center" gap={2}>
<IconCompact accessibilityLabel="Pin" icon="compact-add" />
</Flex>
</Flex>
);
}
12 changes: 8 additions & 4 deletions docs/pages/visual-test/DateRange-secondary-date.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,14 @@ import { Box, ColorSchemeProvider } from 'gestalt';
import { DateRange } from 'gestalt-datepicker';

export default function Snapshot() {
const [startDate, setStartDate] = useState<Date | null>(null);
const [endDate, setEndDate] = useState<Date | null>(null);
const [compStartDate, setCompStartDate] = useState<Date | null>(null);
const [compEndDate, setCompEndDate] = useState<Date | null>(null);
const [startDate, setStartDate] = useState<Date | null>(new Date('December 16, 2024 03:24:00'));
const [endDate, setEndDate] = useState<Date | null>(new Date('December 20, 2024 03:24:00'));
const [compStartDate, setCompStartDate] = useState<Date | null>(
new Date('December 9, 2024 03:24:00'),
);
const [compEndDate, setCompEndDate] = useState<Date | null>(
new Date('December 13, 2024 03:24:00'),
);

return (
<ColorSchemeProvider colorScheme="light">
Expand Down
27 changes: 27 additions & 0 deletions docs/pages/visual-test/IconCompact-list-dark.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import { Box, ColorSchemeProvider, Flex, IconCompact, Text } from 'gestalt';
import icons from 'gestalt/src/icons/compact';

export default function Snapshot() {
return (
<ColorSchemeProvider colorScheme="dark">
<Box color="default" height={2000} width={2000}>
<Flex
gap={{
row: 1,
column: 0,
}}
wrap
>
{Object.keys(icons).map((name, idk) => (
<Box key={name} padding={2} width={100}>
<Text size="100">{idk}</Text>
{/* @ts-expect-error - TS2322 */}
<IconCompact accessibilityLabel="" color="default" icon={name} />
<Text size="100">{name}</Text>
</Box>
))}
</Flex>
</Box>
</ColorSchemeProvider>
);
}
27 changes: 27 additions & 0 deletions docs/pages/visual-test/IconCompact-list-vr.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import { Box, ColorSchemeProvider, Flex, IconCompact, Text } from 'gestalt';
import icons from 'gestalt/src/icons-vr-theme/compact';

export default function Snapshot() {
return (
<ColorSchemeProvider colorScheme="light">
<Box color="default" height={2000} width={2000}>
<Flex
gap={{
row: 1,
column: 0,
}}
wrap
>
{Object.keys(icons).map((name, idk) => (
<Box key={name} padding={2} width={100}>
<Text size="100">{idk}</Text>
{/* @ts-expect-error - TS2322 */}
<IconCompact accessibilityLabel="" color="default" icon={name} />
<Text size="100">{name}</Text>
</Box>
))}
</Flex>
</Box>
</ColorSchemeProvider>
);
}
27 changes: 27 additions & 0 deletions docs/pages/visual-test/IconCompact-list.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import { Box, ColorSchemeProvider, Flex, IconCompact, Text } from 'gestalt';
import icons from 'gestalt/src/icons/compact';

export default function Snapshot() {
return (
<ColorSchemeProvider colorScheme="light">
<Box color="default" height={2000} width={2000}>
<Flex
gap={{
row: 1,
column: 0,
}}
wrap
>
{Object.keys(icons).map((name, idk) => (
<Box key={name} padding={2} width={100}>
<Text size="100">{idk}</Text>
{/* @ts-expect-error - TS2322 */}
<IconCompact accessibilityLabel="" color="default" icon={name} />
<Text size="100">{name}</Text>
</Box>
))}
</Flex>
</Box>
</ColorSchemeProvider>
);
}
18 changes: 3 additions & 15 deletions docs/pages/web/icon.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import PageHeader from '../../docs-components/PageHeader';
import QualityChecklist from '../../docs-components/QualityChecklist';
import SandpackExample from '../../docs-components/SandpackExample';
import builtInIcon from '../../examples/icon/builtInIcon';
import compactIcon from '../../examples/icon/compactIcon';
import customIcon from '../../examples/icon/customIcon';
import doClarity from '../../examples/icon/doClarity';
import doIntentional from '../../examples/icon/doIntentional';
Expand Down Expand Up @@ -223,20 +222,6 @@ Should be used sparingly and only in places where the UI is very dense and a lar
title="Custom SVG icon"
/>
</MainSection.Subsection>
<MainSection.Subsection
columns={2}
description={`Icons are available as part of a Compact Icon set. These icons have a 16x16 viewboxes and are used in places where space is limited. Refer to your designer for guidance on when to use Compact Icons.
<br/> They can be used with the \`IconCompact\` component.`}
title="Compact icon"
>
<MainSection.Card
cardSize="lg"
sandpackExample={
<SandpackExample code={compactIcon} name="compact icons" previewHeight={HEIGHT} />
}
title="Compact Icon"
/>
</MainSection.Subsection>
</MainSection>
<MainSection name="Writing">
<MainSection.Subsection columns={2}>
Expand Down Expand Up @@ -266,6 +251,9 @@ Use a descriptive label to describe the Icon
<MainSection name="Related">
<MainSection.Subsection
description={`
**[IconCompact](/web/iconcompact)**
Some icons are only available as part of a Compact Icon set. These icons have a 16x16 viewboxes and are used in places where space is limited. Refer to your designer for guidance on when to use Compact Icons.
**[IconButton](/web/iconbutton)**
Use IconButton when only an icon is needed to represent an action instead of text.
Expand Down
2 changes: 1 addition & 1 deletion docs/pages/web/iconbuttonlink.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export default function DocsPage({ generatedDocGen }: DocType) {

<AccessibilitySection name={generatedDocGen?.displayName}>
<MainSection.Subsection
description={`IconButtonLink has an "active" state that visually identifies it. To set them to "active" set 'active="page"' (page redirect) or 'active="section"'. Use routing hooks from React.Router or other frameworks to identify the current route. For example, if the current pathname matches the IconButtonLink href, set IconButtonLink to "page". Use the example below as a reference.`}
description={`IconButtonLink has an "active" state that visually identifies it. To set them to "active" set 'active="page"' (page redirect). Use routing hooks from React.Router or other frameworks to identify the current route. For example, if the current pathname matches the IconButtonLink href, set IconButtonLink to "page". Use the example below as a reference.`}
title="Active state"
>
<MainSection.Card sandpackExample={<SandpackExample code={active} name="Active" />} />
Expand Down
Loading

0 comments on commit 9ab02e4

Please sign in to comment.