Skip to content

Commit

Permalink
Merge branch 'master' into alpha
Browse files Browse the repository at this point in the history
  • Loading branch information
diyorbek committed Jul 8, 2024
2 parents 49632ce + f4bf682 commit 161c840
Show file tree
Hide file tree
Showing 146 changed files with 13,233 additions and 4,391 deletions.
72 changes: 69 additions & 3 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,74 @@
## 154.0.1-alpha.0 (Jun 26, 2024)
## 154.6.0 (Jul 4, 2024)

### Prerelease
### Minor

- Tokens: June 2024 release ([#3661](https://github.com/pinterest/gestalt/pull/3661)) - [Preview link](https://deploy-preview-3661--gestalt.netlify.app?devexample=true)

## 154.5.1 (Jul 3, 2024)

### Patch

- Tokens: Support Token Studio Structure ([#3652](https://github.com/pinterest/gestalt/pull/3652)) - [Preview link](https://deploy-preview-3652--gestalt.netlify.app?devexample=true)

## 154.5.0 (Jul 3, 2024)

### Minor

- SideNavigation: SideNavigationGroupItem with link ([#3642](https://github.com/pinterest/gestalt/pull/3642)) - [Preview link](https://deploy-preview-3642--gestalt.netlify.app?devexample=true)

## 154.4.0 (Jul 3, 2024)

### Minor

- Button, ButtonLink: Add leading icon to Button/ButtonLink ([#3656](https://github.com/pinterest/gestalt/pull/3656)) - [Preview link](https://deploy-preview-3656--gestalt.netlify.app?devexample=true)

## 154.3.2 (Jul 2, 2024)

### Patch

- SelectList/TextArea: fix rounding bug introduced in #3651 ([#3658](https://github.com/pinterest/gestalt/pull/3658)) - [Preview link](https://deploy-preview-3658--gestalt.netlify.app?devexample=true)

## 154.3.1 (Jul 2, 2024)

### Patch

- TextField, SearchField, TextArea, SelectList: fix Label implementation consistency ([#3654](https://github.com/pinterest/gestalt/pull/3654)) - [Preview link](https://deploy-preview-3654--gestalt.netlify.app?devexample=true)

## 154.3.0 (Jul 2, 2024)

### Minor

- SelectList: Added onBlur/onFocus props ([#3651](https://github.com/pinterest/gestalt/pull/3651)) - [Preview link](https://deploy-preview-3651--gestalt.netlify.app?devexample=true)

## 154.2.0 (Jul 2, 2024)

### Minor

- Popover: Release v2 ([#3655](https://github.com/pinterest/gestalt/pull/3655)) - [Preview link](https://deploy-preview-3655--gestalt.netlify.app?devexample=true)

## 154.1.2 (Jul 1, 2024)

### Patch

- Internal: update eslint-plugin-react-compiler package ([#3650](https://github.com/pinterest/gestalt/pull/3650)) - [Preview link](https://deploy-preview-3650--gestalt.netlify.app?devexample=true)

## 154.1.1 (Jul 1, 2024)

### Patch

- AvatarGroup: fix, remove xs from actions ([#3648](https://github.com/pinterest/gestalt/pull/3648)) - [Preview link](https://deploy-preview-3648--gestalt.netlify.app?devexample=true)

## 154.1.0 (Jul 1, 2024)

### Minor

- AvatarGroup: enable actions in smaller sizes ([#3646](https://github.com/pinterest/gestalt/pull/3646)) - [Preview link](https://deploy-preview-3646--gestalt.netlify.app?devexample=true)

## 154.0.1 (Jun 27, 2024)

### Patch

- Popover: V2 pre-release
- Internal: upgrade @typescript-eslint ([#3647](https://github.com/pinterest/gestalt/pull/3647)) - [Preview link](https://deploy-preview-3647--gestalt.netlify.app?devexample=true)

## 154.0.0 (Jun 21, 2024)

Expand Down
68 changes: 0 additions & 68 deletions docs/docs-components/Example.tsx

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,13 @@ import { Button, Flex } from 'gestalt';
export default function Example() {
return (
<Flex alignItems="center" height="100%" justifyContent="center" width="100%">
<Button accessibilityLabel="Menu" iconEnd="arrow-down" size="lg" text="Menu" />
<Button
accessibilityLabel="AI Options"
iconEnd="arrow-down"
iconStart="sparkle"
size="lg"
text="AI Options"
/>
</Flex>
);
}
3 changes: 2 additions & 1 deletion docs/examples/buttonlink/iconEndExample.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,9 @@ export default function Example() {
accessibilityLabel=""
href="https://www.pinterest.com/"
iconEnd="visit"
iconStart="sparkle"
size="lg"
text="Visit Pinterest"
text="Visit AI solution"
/>
</Flex>
);
Expand Down
6 changes: 3 additions & 3 deletions docs/examples/popover/variantScrollingContainers.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,8 @@ export default function Example() {
overflow="auto"
position="relative" // this prevents Popover from overflowing the container
>
<Box ref={viewRef} color="default" padding={4} width={600} position="relative">
<Flex gap={{ column: 0, row: 4 }} alignItems="center">
<Box ref={viewRef} color="default" padding={4} position="relative" width={600}>
<Flex alignItems="center" gap={{ column: 0, row: 4 }}>
<Box width={220}>
<Text>
You need to add your data source URL to Pinterest so we can access your data source
Expand Down Expand Up @@ -54,9 +54,9 @@ export default function Example() {
{open && (
<Popover
anchor={anchorRef.current}
disablePortal
idealDirection="right"
onDismiss={() => {}}
disablePortal={true}
size="xs"
>
<Box alignItems="center" display="flex" height={100} justifyContent="center">
Expand Down
4 changes: 2 additions & 2 deletions docs/examples/sidenavigation/displayExpandable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ import { Box, SideNavigation } from 'gestalt';

export default function Example() {
return (
<Box height={362} overflow="scroll" width={280}>
<SideNavigation accessibilityLabel="Nested items example">
<Box height="100%" width={280}>
<SideNavigation accessibilityLabel="Nested items example" showBorder>
<SideNavigation.Group icon="people" label="Christmas">
<SideNavigation.NestedItem
href="#"
Expand Down
4 changes: 2 additions & 2 deletions docs/examples/sidenavigation/displayExpanded.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@ export default function Example() {
};

return (
<Box height={362} overflow="scroll" width={280}>
<SideNavigation accessibilityLabel="Nested items example">
<Box height="100%" width={280}>
<SideNavigation accessibilityLabel="Nested items example" showBorder>
<SideNavigation.Group
display="expandable"
expanded={expandedElements.includes('Christmas')}
Expand Down
4 changes: 2 additions & 2 deletions docs/examples/sidenavigation/displayStatic.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ import { Box, SideNavigation } from 'gestalt';

export default function Example() {
return (
<Box height={362} overflow="scroll" width={280}>
<SideNavigation accessibilityLabel="Nested items example">
<Box height="100%" width={280}>
<SideNavigation accessibilityLabel="Nested items example" showBorder>
<SideNavigation.Group display="static" icon="people" label="Christmas">
<SideNavigation.NestedItem
href="#"
Expand Down
100 changes: 48 additions & 52 deletions docs/examples/sidenavigation/footerVariant.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,60 +3,56 @@ import { DatePicker } from 'gestalt-datepicker';

export default function Example() {
return (
<Box alignItems="center" display="flex" height="100%" justifyContent="center" padding={8}>
<Box height="100%" width="100%">
<Box height="100%" overflow="scroll" width={280}>
<SideNavigation
accessibilityLabel="Footer example"
footer={
<Box height="100%" padding={2} width={300}>
<SideNavigation
accessibilityLabel="Footer example"
footer={
<Flex direction="column" gap={{ column: 4, row: 0 }}>
<Text size="300" weight="bold">
Filters
</Text>
<Fieldset legend="Campaign filters" legendDisplay="hidden">
<Flex direction="column" gap={{ column: 4, row: 0 }}>
<Text size="300" weight="bold">
Filters
</Text>
<Fieldset legend="Campaign filters" legendDisplay="hidden">
<Flex direction="column" gap={{ column: 4, row: 0 }}>
<DatePicker
id="example-start-date"
label="Start"
onChange={() => {}}
rangeSelector="start"
value={new Date()}
/>
<DatePicker
id="example-end-date"
label="End"
onChange={() => {}}
rangeSelector="end"
value={new Date(+7)}
/>
</Flex>
</Fieldset>
</Flex>
}
>
<SideNavigation.Section label="Campaigns">
{[
{
label: 'Active',
counter: { number: '200', accessibilityLabel: '200 Pins' },
},
{
label: 'Draft',
counter: { number: '100', accessibilityLabel: '100 Pins' },
},
].map(({ label, counter }) => (
<SideNavigation.TopItem
key={label}
counter={counter}
href="#"
icon="ads-stats"
label={label}
<DatePicker
id="example-start-date"
label="Start"
onChange={() => {}}
rangeSelector="start"
value={new Date()}
/>
<DatePicker
id="example-end-date"
label="End"
onChange={() => {}}
rangeSelector="end"
value={new Date(+7)}
/>
))}
</SideNavigation.Section>
</SideNavigation>
</Box>
</Box>
</Flex>
</Fieldset>
</Flex>
}
>
<SideNavigation.Section label="Campaigns">
{[
{
label: 'Active',
counter: { number: '200', accessibilityLabel: '200 Pins' },
},
{
label: 'Draft',
counter: { number: '100', accessibilityLabel: '100 Pins' },
},
].map(({ label, counter }) => (
<SideNavigation.TopItem
key={label}
counter={counter}
href="#"
icon="ads-stats"
label={label}
/>
))}
</SideNavigation.Section>
</SideNavigation>
</Box>
);
}
61 changes: 61 additions & 0 deletions docs/examples/sidenavigation/groupLinkDisplayExpadable.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
import React, { useState } from 'react';
import { Box, SideNavigation } from 'gestalt';

export default function Example() {
const [page, setPage] = useState('1');

return (
<Box height="100%" width={280}>
<SideNavigation accessibilityLabel="Nested items example" showBorder>
<SideNavigation.Group
active={page === '1' ? 'page' : undefined}
href="#"
icon="people"
label="Christmas"
onClick={({ event }) => {
event.preventDefault();
setPage('1');
}}
>
<SideNavigation.NestedItem
active={page === '2' ? 'page' : undefined}
href="#"
label="Luxury Christmas"
onClick={({ event }) => {
event.preventDefault();
setPage('2');
}}
/>
<SideNavigation.NestedGroup
active={page === '3' ? 'page' : undefined}
href="#"
label="Classic Christmas"
onClick={({ event }) => {
event.preventDefault();
setPage('3');
}}
>
<SideNavigation.NestedItem
active={page === '4' ? 'page' : undefined}
href="#"
label="West Coast"
onClick={({ event }) => {
event.preventDefault();
setPage('4');
}}
/>
</SideNavigation.NestedGroup>
<SideNavigation.NestedItem
active={page === '5' ? 'page' : undefined}
href="#"
label="Luxury Christmas"
onClick={({ event }) => {
event.preventDefault();
setPage('5');
}}
/>
</SideNavigation.Group>
</SideNavigation>
</Box>
);
}
Loading

0 comments on commit 161c840

Please sign in to comment.