Skip to content

Commit

Permalink
Merge branch 'master' into release-dropdown-v2
Browse files Browse the repository at this point in the history
  • Loading branch information
diyorbek committed Apr 10, 2024
2 parents 2fd44cf + e7ff8b4 commit 19c7279
Show file tree
Hide file tree
Showing 115 changed files with 3,655 additions and 1,933 deletions.
2 changes: 0 additions & 2 deletions .eslintignore
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
coverage
docs/build
docs/.next
docs/docs-components/metadata.js
flow-typed
Expand Down
8 changes: 8 additions & 0 deletions .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ module.exports = {
'plugins': [
'eslint-comments',
'flowtype',
'eslint-plugin-gestalt',
'import',
'jest',
'jsx-a11y',
Expand Down Expand Up @@ -57,6 +58,7 @@ module.exports = {
'flowtype/space-after-type-colon': [ERROR, ALWAYS, { 'allowLineBreak': true }],
'flowtype/space-before-type-colon': [ERROR, NEVER],
'flowtype/type-import-style': ERROR,
'gestalt/only-valid-tokens': ERROR,
'import/extensions': [ERROR, 'ignorePackages', { 'js': 'never' }],
'import/first': ERROR,
'import/newline-after-import': ERROR,
Expand Down Expand Up @@ -120,6 +122,12 @@ module.exports = {
'validate-jsx-nesting/no-invalid-jsx-nesting': ERROR,
},
'overrides': [
{
'files': ['packages/gestalt-design-tokens/**/*.js'],
'rules': {
'gestalt/only-valid-tokens': OFF,
},
},
{
'files': ['scripts/templates/*.js'],
'rules': {
Expand Down
2 changes: 0 additions & 2 deletions .stylelintignore
Original file line number Diff line number Diff line change
@@ -1,3 +1 @@
coverage
docs/build
node_modules
12 changes: 10 additions & 2 deletions .stylelintrc.json
Original file line number Diff line number Diff line change
@@ -1,8 +1,16 @@
{
"extends": ["stylelint-config-standard", "stylelint-config-prettier"],
"ignoreFiles": ["packages/*/dist/**/*.css", "packages/**/*.js"],
"plugins": ["stylelint-order"],
"ignoreFiles": [
"packages/*/dist/**/*.css",
"packages/**/*.js",
"packages/stylelint-plugin-gestalt/src/__fixtures__/**/*.css"
],
"plugins": [
"stylelint-order",
"./packages/stylelint-plugin-gestalt/src/no-invalid-design-tokens.js"
],
"rules": {
"stylelint-gestalt-plugin/no-invalid-design-tokens": true,
"alpha-value-notation": null,
"color-named": [
"never",
Expand Down
138 changes: 138 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,141 @@
## 146.13.0 (Apr 9, 2024)

### Minor

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

## 146.12.2 (Apr 9, 2024)

### Patch

- Icon: Pinterest logo change ([#3522](https://github.com/pinterest/gestalt/pull/3522)) - [Preview link](https://deploy-preview-3522--gestalt.netlify.app?devexample=true)

## 146.12.1 (Apr 9, 2024)

### Patch

- Masonry: Fix incorrect node to solve graph positioning for two column items ([#3519](https://github.com/pinterest/gestalt/pull/3519)) - [Preview link](https://deploy-preview-3519--gestalt.netlify.app?devexample=true)

## 146.12.0 (Apr 9, 2024)

### Minor

- TextArea, NumberField, SelectList: Adding new datatestids ([#3518](https://github.com/pinterest/gestalt/pull/3518)) - [Preview link](https://deploy-preview-3518--gestalt.netlify.app?devexample=true)

## 146.11.2 (Apr 9, 2024)

### Patch

- Masonry: Update useElementWidth for MasonryV2 ([#3521](https://github.com/pinterest/gestalt/pull/3521)) - [Preview link](https://deploy-preview-3521--gestalt.netlify.app?devexample=true)

## 146.11.1 (Apr 8, 2024)

### Patch

- Icon: Added icon to Android folder ([#3517](https://github.com/pinterest/gestalt/pull/3517)) - [Preview link](https://deploy-preview-3517--gestalt.netlify.app?devexample=true)

## 146.11.0 (Apr 5, 2024)

### Minor

- Masonry: Experimental Masonry Refactor ([#3505](https://github.com/pinterest/gestalt/pull/3505)) - [Preview link](https://deploy-preview-3505--gestalt.netlify.app?devexample=true)

## 146.10.0 (Apr 4, 2024)

### Minor

- Revert "ComboBox: Use Popover v2" ([#3516](https://github.com/pinterest/gestalt/pull/3516)) - [Preview link](https://deploy-preview-3516--gestalt.netlify.app?devexample=true)

## 146.9.4 (Apr 4, 2024)

### Patch

- PageHeader: update heading to BreakAll to split on long titles ([#3514](https://github.com/pinterest/gestalt/pull/3514)) - [Preview link](https://deploy-preview-3514--gestalt.netlify.app?devexample=true)

## 146.9.3 (Apr 4, 2024)

### Patch

- Internal: Bump undici from 5.28.3 to 5.28.4 ([#3515](https://github.com/pinterest/gestalt/pull/3515)) - [Preview link](https://deploy-preview-3515--gestalt.netlify.app?devexample=true)

## 146.9.2 (Apr 4, 2024)

### Patch

- Internal: replace interpolated strings with design tokens constants. ([#3513](https://github.com/pinterest/gestalt/pull/3513)) - [Preview link](https://deploy-preview-3513--gestalt.netlify.app?devexample=true)

## 146.9.1 (Apr 3, 2024)

### Patch

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

## 146.9.0 (Apr 3, 2024)

### Minor

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

## 146.8.2 (Apr 3, 2024)

### Patch

- Docs: Update redirects.js ([#3510](https://github.com/pinterest/gestalt/pull/3510)) - [Preview link](https://deploy-preview-3510--gestalt.netlify.app?devexample=true)

## 146.8.1 (Apr 3, 2024)

### Patch

- Internal: added Stylelint rule to prevent Gestalt token errors ([#3504](https://github.com/pinterest/gestalt/pull/3504)) - [Preview link](https://deploy-preview-3504--gestalt.netlify.app?devexample=true)

## 146.8.0 (Apr 3, 2024)

### Minor

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

## 146.7.2 (Apr 3, 2024)

### Patch

- Docs: Update contributions image ([#3508](https://github.com/pinterest/gestalt/pull/3508)) - [Preview link](https://deploy-preview-3508--gestalt.netlify.app?devexample=true)

## 146.7.1 (Apr 2, 2024)

### Patch

- Docs: Design contributions updates ([#3494](https://github.com/pinterest/gestalt/pull/3494)) - [Preview link](https://deploy-preview-3494--gestalt.netlify.app?devexample=true)

## 146.7.0 (Apr 2, 2024)

### Minor

- OverlayPanel: Use ConfirmationPopover v2 #3501 ([#3506](https://github.com/pinterest/gestalt/pull/3506)) - [Preview link](https://deploy-preview-3506--gestalt.netlify.app?devexample=true)

## 146.6.1 (Apr 2, 2024)

### Patch

- SideNavigation: Fix scrollbar clipping in collapsed state ([#3500](https://github.com/pinterest/gestalt/pull/3500)) - [Preview link](https://deploy-preview-3500--gestalt.netlify.app?devexample=true)

## 146.6.0 (Apr 2, 2024)

### Minor

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

## 146.5.15 (Apr 1, 2024)

### Patch

- Tokens: remove dead code in color token ([#3502](https://github.com/pinterest/gestalt/pull/3502)) - [Preview link](https://deploy-preview-3502--gestalt.netlify.app?devexample=true)

## 146.5.14 (Apr 1, 2024)

### Patch

- TileData: Fixing width Overlap issues ([#3490](https://github.com/pinterest/gestalt/pull/3490)) - [Preview link](https://deploy-preview-3490--gestalt.netlify.app?devexample=true)

## 146.5.13 (Mar 27, 2024)

### Patch
Expand Down
65 changes: 33 additions & 32 deletions docs/docs-components/ColorPalette.js
Original file line number Diff line number Diff line change
@@ -1,46 +1,47 @@
// @flow strict
import { type Node as ReactNode } from 'react';
import { Fragment, type Node as ReactNode } from 'react';
import { Box, Text } from 'gestalt';
import tokens from 'gestalt-design-tokens/dist/json/variables.json';
import ColorTile from './ColorTile';

type Props = {
name: string,
tokenId: string,
tokenData: $ReadOnlyArray<string>,
};

function ColorPalette({ name, tokenId }: Props): ReactNode {
const tokenNumbers = [0, 50, 100, 200, 300, 400, 500, 550, 600, 700, 800, 900];
const colorId = `${tokenId}-${name.toLowerCase()}`;
function ColorPalette({ name, tokenId, tokenData }: Props): ReactNode {
if (tokenData) {
const tiles = tokenData.map((token) => {
const regex = /\d+(?=\D*$)/;
const grade = (token.match(regex) || [])[0];
const isTransparent = tokenId === 'transparent';
const textColor = Number(grade) <= 400 || isTransparent ? 'dark' : 'light';

const isTransparent = tokenId === 'transparent';
if (isTransparent || (grade !== '450' && !Number.isNaN(Number(grade)))) {
return (
<ColorTile
key={token}
description={grade || 'transparent'}
number={Number(grade) || 0}
textColor={textColor}
token={token}
/>
);
}

return (
<Box marginBottom={8} marginTop={8}>
<Text weight="bold">
{name} ({tokenId})
</Text>
{isTransparent ? (
<Box marginTop={2}>
<ColorTile description="" fullTokenName="color-transparent" number={0} />
</Box>
) : (
<Box marginTop={2}>
{tokenNumbers.map((number) => {
const textColor = number > 400 ? 'light' : 'dark';
const colorVariableName = `color-${colorId}-${number}`;
return tokens[colorVariableName] ? (
<ColorTile
description={`${number}`}
fullTokenName={colorVariableName}
number={number}
textColor={textColor}
/>
) : null;
})}
return null;
});

return (
<Fragment>
<Box marginBottom={8} marginTop={8}>
<Text weight="bold">
{name} ({tokenId})
</Text>
</Box>
)}
</Box>
);
{tiles}
</Fragment>
);
}
}
export default ColorPalette;
23 changes: 13 additions & 10 deletions docs/docs-components/ColorTile.js
Original file line number Diff line number Diff line change
@@ -1,32 +1,35 @@
// @flow strict
import { type Node as ReactNode } from 'react';
import { Box, Text, useColorScheme } from 'gestalt';
import { TOKEN_COLOR_TRANSPARENT } from 'gestalt-design-tokens';
import tokens from 'gestalt-design-tokens/dist/json/variables.json';
import darkModeTokens from 'gestalt-design-tokens/dist/json/variables-dark.json';

type Props = {
fullTokenName: string,
token: ?string,
description: string,
number?: number,
textColor?: 'dark' | 'light' | 'default' | 'inverse',
};

function ColorTile({ description, fullTokenName, number = 400, textColor }: Props): ReactNode {
const isTransparent = fullTokenName === 'color-transparent';
function ColorTile({ description, token, number = 400, textColor }: Props): ReactNode {
const isTransparent = token === TOKEN_COLOR_TRANSPARENT;
const newTextColor = textColor || (number > 400 ? 'light' : 'dark');
const borderNeeded =
fullTokenName?.includes('white') ||
fullTokenName?.includes('black') ||
fullTokenName?.includes('inverse') ||
token?.includes('white') ||
token?.includes('black') ||
token?.includes('inverse') ||
isTransparent;
const { colorSchemeName } = useColorScheme();

const regex = /(?<=--)(.*?)(?=\))/g;
const tokenName = token?.match(regex)?.[0];
return (
<Box
alignItems="center"
borderStyle={borderNeeded ? 'lg' : 'none'}
dangerouslySetInlineStyle={{
__style: { backgroundColor: `var(--${fullTokenName})` },
__style: token ? { backgroundColor: token } : {},
}}
display="flex"
height={50}
Expand All @@ -40,9 +43,9 @@ function ColorTile({ description, fullTokenName, number = 400, textColor }: Prop
</Text>
</Box>
<Text color={newTextColor}>
{colorSchemeName === 'darkMode' && darkModeTokens[fullTokenName]
? darkModeTokens[fullTokenName]?.toUpperCase()
: tokens[fullTokenName]?.toUpperCase()}
{colorSchemeName === 'darkMode' && tokenName && darkModeTokens[tokenName]
? darkModeTokens[tokenName]?.toUpperCase()
: tokenName && tokens[tokenName]?.toUpperCase()}
</Text>
</Box>
);
Expand Down
3 changes: 0 additions & 3 deletions docs/docs-components/ExampleCode.js
Original file line number Diff line number Diff line change
Expand Up @@ -116,9 +116,6 @@ export default function ExampleCode({
</Flex>
<Flex direction="column" width="100%">
<Box
dangerouslySetInlineStyle={{
__style: { transition: 'max-height 0.4s' },
}}
display="flex"
maxHeight={containerBoxMaxHeight}
overflow="hidden"
Expand Down
1 change: 0 additions & 1 deletion docs/docs-components/Header.js
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@ function getTabs(componentPlatform: 'web' | 'android' | 'ios') {
},
{ href: '/team_support/overview', text: 'Team support' },
{ href: '/whats_new', text: "What's new" },
{ href: '/roadmap', text: 'Roadmap' },
];
}

Expand Down
6 changes: 3 additions & 3 deletions docs/docs-components/IllustrationCard.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { MIN_SVG_ILLUSTRATION_WIDTH } from './IllustrationSection';
import illustrations, { type Illustrations } from '../graphics/index';

export type Props = {
color: string,
backgroundColor: string,
description?: string,
headingLevel: 2 | 3,
href: string,
Expand All @@ -15,7 +15,7 @@ export type Props = {
};

export default function IllustrationCard({
color,
backgroundColor,
description,
headingLevel,
href,
Expand All @@ -36,7 +36,7 @@ export default function IllustrationCard({
alignItems="center"
dangerouslySetInlineStyle={{
__style: {
backgroundColor: `var(--color-${color})`,
backgroundColor,
},
}}
display="flex"
Expand Down
Loading

0 comments on commit 19c7279

Please sign in to comment.