Merge branch 'master' into alpha

.dockerignore

@@ -1,4 +1,3 @@
 **/.git
 **/.vscode
-**/flow-typed
 **/node_modules

.eslintignore

@@ -1,10 +1,10 @@
 coverage
 docs/.next
 docs/docs-components/metadata.js
-flow-typed
 node_modules
 packages/gestalt/dist
 packages/gestalt-charts/dist
 packages/gestalt-datepicker/dist
 packages/eslint-plugin-gestalt/dist
 packages/eslint-plugin-gestalt/src/__fixtures__
+packages/gestalt-icons-android/dist

.eslintrc.js

@@ -30,7 +30,14 @@ const baseRules = {
   'gestalt/only-valid-tokens': ERROR,
   'import/extensions': [
     ERROR,
-    { css: 'always', js: 'never', ts: 'never', tsx: 'never', json: 'always', mjs: 'never' },
+    {
+      css: 'always',
+      js: 'never',
+      ts: 'never',
+      tsx: 'never',
+      json: 'always',
+      mjs: 'never',
+    },
   ],
   'import/first': ERROR,
   'import/newline-after-import': ERROR,

.github/pull_request_template.md

@@ -30,7 +30,7 @@ What is the purpose of this PR? Please include the context around these changes
 
 ### Checklist
 
-- [ ] Added unit and Flow Tests
+- [ ] Added unit tests
 - [ ] Added documentation + accessibility tests
 - [ ] Verified accessibility: keyboard & screen reader interaction
 - [ ] Checked dark mode, responsiveness, and right-to-left support

.github/workflows/release.yml

@@ -93,6 +93,8 @@ jobs:
           yarn publish --registry=https://registry.npmjs.org --no-git-tag-version --new-version ${{ steps.release.outputs.VERSION }}
           cd ../gestalt-charts
           yarn publish --registry=https://registry.npmjs.org --no-git-tag-version --new-version ${{ steps.release.outputs.VERSION }}
+          cd ../stylelint-plugin-gestalt
+          yarn publish --registry=https://registry.npmjs.org --no-git-tag-version --new-version ${{ steps.release.outputs.VERSION }}
       - name: Trigger VSCode Gestalt release
         uses: actions/github-script@v5
         with:

.gitignore

@@ -17,14 +17,6 @@ packages/gestalt-datepicker/dist/*
 packages/eslint-plugin-gestalt/dist/*
 packages/gestalt-design-tokens/dist
 
-# the following files as they are maintained by hand
-!packages/gestalt/dist/gestalt.js.flow
-!packages/gestalt-charts/dist/gestalt-charts.js.flow
-!packages/gestalt-datepicker/dist/gestalt-datepicker.js.flow
-!packages/gestalt/dist/index.d.ts
-!packages/gestalt-charts/dist/index.d.ts
-!packages/gestalt-datepicker/dist/index.d.ts
-
 playwright/test-results
 
 .rollup.cache/

.prettierignore

@@ -6,7 +6,6 @@ dist
 docs/.next/
 docs/docs-components/metadata.js
 docs/markdown/**/*.md
-flow-typed
 node_modules
 package.json
 docs/graphics/year-in-review-2023/lottie/*.json

CHANGELOG.md

@@ -1,8 +1,92 @@
-## 150.2.2-alpha.0 (May 29, 2024)
+## 152.1.2 (Jun 5, 2024)
 
-### Prerelease
+### Patch
+
+- Internal: remove flow-typed and updated docs ([#3614](https://github.com/pinterest/gestalt/pull/3614)) - [Preview link](https://deploy-preview-3614--gestalt.netlify.app?devexample=true)
+
+## 152.1.1 (Jun 5, 2024)
+
+### Patch
+
+- Docs: removed Accessibility checklist module and badge ([#3613](https://github.com/pinterest/gestalt/pull/3613)) - [Preview link](https://deploy-preview-3613--gestalt.netlify.app?devexample=true)
+
+## 152.1.0 (Jun 5, 2024)
+
+### Minor
+
+- Image: Address onLoad not being called for SSR images ([#3612](https://github.com/pinterest/gestalt/pull/3612)) - [Preview link](https://deploy-preview-3612--gestalt.netlify.app?devexample=true)
+
+## 152.0.0 (Jun 4, 2024)
+
+### Major
+
+- Icon: additions, deprecations, renames in classic + added all vr-theme icons for web & android ([#3587](https://github.com/pinterest/gestalt/pull/3587)) - [Preview link](https://deploy-preview-3587--gestalt.netlify.app?devexample=true)
+
+## 151.2.6 (Jun 3, 2024)
+
+### Patch
+
+- Internal: remove .mjs folder for snapshots ([#3610](https://github.com/pinterest/gestalt/pull/3610)) - [Preview link](https://deploy-preview-3610--gestalt.netlify.app?devexample=true)
+
+## 151.2.5 (Jun 3, 2024)
+
+### Patch
+
+- Internal: fix some TS suppressions due to ReactNode ([#3609](https://github.com/pinterest/gestalt/pull/3609)) - [Preview link](https://deploy-preview-3609--gestalt.netlify.app?devexample=true)
+
+## 151.2.4 (May 31, 2024)
+
+### Patch
+
+- Internal: remove rollup from stylelint-plugin-gestalt folder ([#3608](https://github.com/pinterest/gestalt/pull/3608)) - [Preview link](https://deploy-preview-3608--gestalt.netlify.app?devexample=true)
+
+## 151.2.3 (May 31, 2024)
+
+### Patch
+
+- Internal: add stylelint-plugin-gestalt to the npm release schedule ([#3607](https://github.com/pinterest/gestalt/pull/3607)) - [Preview link](https://deploy-preview-3607--gestalt.netlify.app?devexample=true)
+
+## 151.2.2 (May 31, 2024)
+
+### Patch
+
+- Docs: fixes ([#3606](https://github.com/pinterest/gestalt/pull/3606)) - [Preview link](https://deploy-preview-3606--gestalt.netlify.app?devexample=true)
+
+## 151.2.1 (May 31, 2024)
+
+### Patch
+
+- ButtonToggle: cleanup docs. ([#3605](https://github.com/pinterest/gestalt/pull/3605)) - [Preview link](https://deploy-preview-3605--gestalt.netlify.app?devexample=true)
+
+## 151.2.0 (May 31, 2024)
+
+### Minor
+
+- Icon: new `performance-plus` icon ([#3604](https://github.com/pinterest/gestalt/pull/3604)) - [Preview link](https://deploy-preview-3604--gestalt.netlify.app?devexample=true)
+
+## 151.1.0 (May 30, 2024)
+
+### Minor
+
+- Tokens: VR mapping base/semantic tokens layer for web ([#3596](https://github.com/pinterest/gestalt/pull/3596)) - [Preview link](https://deploy-preview-3596--gestalt.netlify.app?devexample=true)
+
+## 151.0.1 (May 30, 2024)
+
+### Patch
+
+- ButtonToggle: Follow-up Fixes ([#3603](https://github.com/pinterest/gestalt/pull/3603)) - [Preview link](https://deploy-preview-3603--gestalt.netlify.app?devexample=true)
+
+## 151.0.0 (May 30, 2024)
+
+### Major
+
+- Internal: Auto-generate .d.ts type declaration files ([#3597](https://github.com/pinterest/gestalt/pull/3597)) - [Preview link](https://deploy-preview-3597--gestalt.netlify.app?devexample=true)
+
+## 150.3.0 (May 30, 2024)
+
+### Minor
 
-- Dropdown: Remove experiment for alpha release ([#3602](https://github.com/pinterest/gestalt/pull/3602)) - [Preview link](https://deploy-preview-3602--gestalt.netlify.app?devexample=true)
+- Status: support to Text (& links) in `title` prop ([#3601](https://github.com/pinterest/gestalt/pull/3601)) - [Preview link](https://deploy-preview-3601--gestalt.netlify.app?devexample=true)
 
 ## 150.2.1 (May 29, 2024)
 

docs/docs-components/AccessibilityChecklist.tsx

@@ -46,8 +46,12 @@ function AccessibilityTable({ accessibilityData }: { accessibilityData?: Compone
           return (
             <Table.Row key={item}>
               <Table.Cell>
-                {/* @ts-expect-error - TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Readonly<{ a11yVisual: { title: string; ready: string; partial: string; notAvailable: string; planned: string; }; a11yNavigation: { title: string; ready: string; partial: string; notAvailable: string; planned: string; }; a11yScreenreader: { ...; }; a11yComprehension: { ...; }; }>'. */}
-                <Text>{COMPONENT_A11Y_STATUS_MESSAGING[item].title}</Text>
+                <Text>
+                  {
+                    // @ts-expect-error - TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Readonly<{ a11yVisual: { title: string; ready: string; partial: string; notAvailable: string; planned: string; }; a11yNavigation: { title: string; ready: string; partial: string; notAvailable: string; planned: string; }; a11yScreenreader: { ...; }; a11yComprehension: { ...; }; }>'.
+                    COMPONENT_A11Y_STATUS_MESSAGING[item].title
+                  }
+                </Text>
               </Table.Cell>
               <Table.Cell>
                 <StatusData

docs/docs-components/AccessibilitySection.tsx

@@ -18,9 +18,12 @@ export default function AccessibilitySection({
   hideChecklist = false,
   name,
 }: Props) {
+  let override = hideChecklist;
+
+  override = true;
   return (
     <Card name="Accessibility" showHeading>
-      {hideChecklist ? null : <AccessibilityChecklist component={name} />}
+      {override ? null : <AccessibilityChecklist component={name} />}
       {description && (
         <Box marginBottom={8} marginTop={6} maxWidth={DOCS_COPY_MAX_WIDTH_PX}>
           <Markdown text={description} />

docs/docs-components/App.tsx

@@ -70,7 +70,6 @@ export default function App({ children, files }: Props) {
   return (
     <AppContextProvider>
       <DocsExperimentProvider>
-        {/* @ts-expect-error - TS2786 - 'AppContextConsumer' cannot be used as a JSX component. */}
         <AppContextConsumer>
           {({ colorScheme }) => (
             <ColorSchemeProvider colorScheme={colorScheme}>

docs/docs-components/Checkerboard.tsx

@@ -2,7 +2,6 @@ import { Box, useColorScheme } from 'gestalt';
 import { TOKEN_COLOR_BACKGROUND_DARK } from 'gestalt-design-tokens';
 
 export default function Checkerboard() {
-  // @ts-expect-error - TS2339 - Property 'colorSchemeName' does not exist on type '{ name: "lightMode" | "darkMode"; }'.
   const { colorSchemeName } = useColorScheme();
   const color =
     colorSchemeName === 'lightMode' ? TOKEN_COLOR_BACKGROUND_DARK : '#efefef'.replace('#', '%23');

docs/docs-components/ColorPalette.tsx

@@ -1,4 +1,3 @@
-import { Fragment } from 'react';
 import { Box, Text } from 'gestalt';
 import ColorTile from './ColorTile';
 
@@ -9,38 +8,36 @@ type Props = {
 };
 
 function ColorPalette({ name, tokenId, tokenData }: Props) {
-  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 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';
 
-      if (isTransparent || (grade !== '450' && !Number.isNaN(Number(grade)))) {
-        return (
-          <ColorTile
-            key={token}
-            description={grade || 'transparent'}
-            number={Number(grade) || 0}
-            textColor={textColor}
-            token={token}
-          />
-        );
-      }
+    if (isTransparent || (grade !== '450' && !Number.isNaN(Number(grade)))) {
+      return (
+        <ColorTile
+          key={token}
+          description={grade || 'transparent'}
+          number={Number(grade) || 0}
+          textColor={textColor}
+          token={token}
+        />
+      );
+    }
 
-      return null;
-    });
+    return null;
+  });
 
-    return (
-      <Fragment>
-        <Box marginBottom={8} marginTop={8}>
-          <Text weight="bold">
-            {name} ({tokenId})
-          </Text>
-        </Box>
-        {tiles}
-      </Fragment>
-    );
-  }
+  return (
+    <Box>
+      <Box marginBottom={8} marginTop={8}>
+        <Text weight="bold">
+          {name} ({tokenId})
+        </Text>
+      </Box>
+      {tiles}
+    </Box>
+  );
 }
 export default ColorPalette;

docs/docs-components/ColorTile.tsx

@@ -18,7 +18,7 @@ function ColorTile({ description, token, number = 400, textColor }: Props) {
     token?.includes('black') ||
     token?.includes('inverse') ||
     isTransparent;
-  // @ts-expect-error - TS2339 - Property 'colorSchemeName' does not exist on type '{ name: "lightMode" | "darkMode"; }'.
+
   const { colorSchemeName } = useColorScheme();
 
   const regex = /(?<=--)(.*?)(?=\))/g;

docs/docs-components/ErrorBoundary.tsx

@@ -31,7 +31,7 @@ class ErrorBoundary extends React.Component<
     console.log({ error, errorInfo });
   }
 
-  render(): ReactNode {
+  render() {
     // Check if the error is thrown
     if (this.state.hasError) {
       // You can render any custom fallback UI

docs/docs-components/Header.tsx

@@ -186,7 +186,6 @@ function Header() {
               <Badge
                 position="middle"
                 text="Dev mode"
-                // @ts-expect-error - TS2322 - Type '{ position: "middle"; text: string; tooltip: { text: string; idealDirection: string; accessibilityLabel: string; zIndex: CompositeZIndex; }; type: "info"; }' is not assignable to type 'IntrinsicAttributes & BadgeProps'.
                 tooltip={{
                   text: 'You are currently in dev mode, which allows you to see dev-only example previews.',
                   idealDirection: 'down',
@@ -199,7 +198,7 @@ function Header() {
             {showDevelopmentEditorSwitch && (
               <IconButton
                 accessibilityLabel="Toggle dev example mode"
-                icon={devExampleMode === 'development' ? 'code-checked' : 'code'}
+                icon={devExampleMode === 'development' ? 'code-check' : 'code'}
                 onClick={onChangeDevExampleMode}
                 selected={devExampleMode === 'development'}
                 size="sm"

docs/docs-components/InternalDocumentationSection.tsx

@@ -11,7 +11,6 @@ type Props = {
 export default function InternalDocumentationSection({ items }: Props) {
   return (
     <Card name="Internal documentation" showHeading>
-      {/* @ts-expect-error - TS2739 - Type '{ id: string; items: { title: string; icon: "lock"; iconAccessibilityLabel: string; children: Element; }[]; }' is missing the following properties from type 'AccordionExpandableProps': accessibilityCollapseLabel, accessibilityExpandLabel */}
       <Accordion.Expandable
         id="internal-documentation-accordion"
         items={[

docs/docs-components/MainSectionSubsection.tsx

@@ -61,7 +61,6 @@ function MainSectionSubsection({
                 <Badge
                   position="middle"
                   text={badge === 'experimental' ? 'Experimental' : 'Alpha'}
-                  // @ts-expect-error - TS2322 - Type '{ position: "middle"; text: string; tooltip: { text: string; }; }' is not assignable to type 'IntrinsicAttributes & BadgeProps'.
                   tooltip={
                     badge === 'experimental'
                       ? {

docs/docs-components/Overview.tsx

@@ -74,7 +74,6 @@ Not sure which component to use? [Reach out to the Gestalt team.](/team_support/
 
         <IllustrationContainer>
           <Box flex="none" minWidth={230} width="40%">
-            {/* @ts-expect-error - TS2741 - Property 'size' is missing in type '{ items: string[]; onChange: ({ activeIndex }: { activeIndex: number; } & { readonly event: MouseEvent<HTMLButtonElement, MouseEvent>; }) => void; selectedItemIndex: number; }' but required in type 'SegmentedControlProps'. */}
             <SegmentedControl
               items={sortOrders.map(capitalizeFirstLetter)}
               onChange={({ activeIndex }) => {

docs/docs-components/PageHeader.tsx

@@ -148,7 +148,6 @@ export default function PageHeader({
                   <Badge
                     position="top"
                     text={badgeMap[badge].text}
-                    // @ts-expect-error - TS2322 - Type '{ position: "top"; text: "Pilot" | "Experimental" | "Deprecated" | "Comparison" | "Comparison + Trends" | "Connection" | "Parts-to-whole" | "Trends"; tooltip: { text: `This is the initial version of ${string}, and additional (non-breaking) functionality is planned for the future. Any feedback is greatly appreciated!...' is not assignable to type 'IntrinsicAttributes & BadgeProps'.
                     tooltip={{ text: badgeMap[badge].tooltipText }}
                     // @ts-expect-error - TS2339 - Property 'type' does not exist on type '{ readonly text: "Pilot"; readonly tooltipText: `This is the initial version of ${string}, and additional (non-breaking) functionality is planned for the future. Any feedback is greatly appreciated!`; } | { readonly text: "Experimental"; readonly tooltipText: `This is an experimental version of ${string}. This compo...'.
                     type={badgeMap[badge].type || 'info'}

docs/docs-components/PageHeaderQualitySummary.tsx

@@ -60,7 +60,7 @@ export default function PageHeaderQualitySummary({ name }: Props) {
 
   return (
     <Flex gap={4} wrap>
-      {['figmaStatus', 'responsive', 'mobileAdaptive', 'accessible'].map((item, i, arr) => (
+      {['figmaStatus', 'responsive', 'mobileAdaptive'].map((item, i, arr) => (
         <Flex key={`summary-${item}`}>
           <QualityItem
             // @ts-expect-error - TS2322 - Type 'string' is not assignable to type '"accessible" | "mobileAdaptive" | "figmaStatus" | "responsive"'.

docs/docs-components/PatternBarFill.tsx

@@ -18,7 +18,6 @@ type DataVisualizationColors =
   | '12';
 
 export const useHexColor: () => (arg1: DataVisualizationColors) => string = () => {
-  // @ts-expect-error - TS2339 - Property 'colorSchemeName' does not exist on type '{ name: "lightMode" | "darkMode"; }'.
   const { colorSchemeName } = useColorScheme();
   return (vizColor: DataVisualizationColors) =>
     colorSchemeName === 'lightMode'

docs/docs-components/PatternLineMarker.tsx

@@ -18,7 +18,6 @@ type DataVisualizationColors =
   | '12';
 
 export const useHexColor: () => (arg1: DataVisualizationColors) => string = () => {
-  // @ts-expect-error - TS2339 - Property 'colorSchemeName' does not exist on type '{ name: "lightMode" | "darkMode"; }'.
   const { colorSchemeName } = useColorScheme();
   return (vizColor: DataVisualizationColors) =>
     colorSchemeName === 'lightMode'

docs/docs-components/StatusData.tsx

@@ -28,7 +28,7 @@ export default function StatusData({ status, text, href }: Props) {
           accessibilityLabel={`This component is ${label}`}
           title={href ? '' : label}
           // @ts-expect-error - TS2322 - Type 'string' is not assignable to type '"ok" | "inProgress" | "unstarted" | "canceled" | "queued" | "halted" | "problem" | "warning"'.
-          type={STATUS_EQUIVALENCY_MAP[status]}
+          type={STATUS_EQUIVALENCY_MAP[status] !== 'notAvailable' && STATUS_EQUIVALENCY_MAP[status]}
         />
       )}
       {href ? (