Tokens: Move Emoji Fonts Higher (#3117)

Co-authored-by: ponori <[email protected]> Co-authored-by: Gestalt Bot <[email protected]> Co-authored-by: Enio Moura <[email protected]> Co-authored-by: Alberto Carreras <[email protected]> Co-authored-by: Hector Jaime <[email protected]> Co-authored-by: laylaleeal <[email protected]>
pinterest · Jul 31, 2023 · 14b623d · 14b623d
1 parent 990fca5
commit 14b623d
Show file tree

Hide file tree

Showing 30 changed files with 827 additions and 456 deletions.
diff --git a/docs/docs-components/Header.js b/docs/docs-components/Header.js
@@ -63,28 +63,20 @@ function Header() {
   );
 
   useEffect(() => {
-    const devModeSetFromUrl = router.query.devexample && router.query.devexample === 'true';
-
-    // do not show switch if set via url
-    if (devModeSetFromUrl) {
-      setShowDevelopmentEditorSwitch(false);
-      return;
-    }
-
     const isDeployPreviewEnvironment =
       process.env.NODE_ENV === 'production' &&
       window?.location?.href?.startsWith('https://deploy-preview-');
 
-    if (isDeployPreviewEnvironment || process.env.NODE_ENV === 'development')
+    const devModeSetFromUrl = router.query.devexample && router.query.devexample === 'true';
+
+    // show switch if set via url or is a deployment URL
+    if (devModeSetFromUrl || isDeployPreviewEnvironment) {
       setShowDevelopmentEditorSwitch(true);
+    }
   }, [setShowDevelopmentEditorSwitch, router.pathname, router.query]);
 
   const { colorScheme, setColorScheme, devExampleMode, setDevExampleMode } = useAppContext();
 
-  const devExampleModeButtonLabel = `Toggle dev example mode ${
-    devExampleMode === 'development' ? 'off' : 'on'
-  }`;
-
   const darkModeButtonLabel = `Toggle ${colorScheme === 'dark' ? 'light' : 'dark'} mode`;
   const onChangeColorScheme = () => {
     trackButtonClick(
@@ -198,7 +190,9 @@ function Header() {
                 onClick={onChangeDevExampleMode}
                 selected={devExampleMode === 'development'}
                 tooltip={{
-                  text: devExampleModeButtonLabel,
+                  text: `Toggle dev example mode ${
+                    devExampleMode === 'development' ? 'off' : 'on'
+                  }`,
                   inline: true,
                   idealDirection: 'down',
                   accessibilityLabel: '',

diff --git a/docs/docs-components/data/components.js b/docs/docs-components/data/components.js
@@ -8,7 +8,6 @@ import Layer from '../../graphics/building-blocks/Layer.svg';
 import Letterbox from '../../graphics/building-blocks/Letterbox.svg';
 import Mask from '../../graphics/building-blocks/Mask.svg';
 import Pog from '../../graphics/building-blocks/Pog.svg';
-import Popover from '../../graphics/building-blocks/Popover.svg';
 import ScrollBoundaryContainer from '../../graphics/building-blocks/ScrollBoundaryContainer.svg';
 import SheetMobile from '../../graphics/building-blocks/SheetMobile.svg';
 import Sticky from '../../graphics/building-blocks/Sticky.svg';
@@ -22,6 +21,7 @@ import Button from '../../graphics/general/Button.svg';
 import ButtonGroup from '../../graphics/general/ButtonGroup.svg';
 import ButtonLink from '../../graphics/general/ButtonLink.svg';
 import Callout from '../../graphics/general/Callout.svg';
+import Card from '../../graphics/general/Card.svg';
 import Checkbox from '../../graphics/general/Checkbox.svg';
 import Collage from '../../graphics/general/Collage.svg';
 import ComboBox from '../../graphics/general/ComboBox.svg';
@@ -47,6 +47,8 @@ import Module from '../../graphics/general/Module.svg';
 import NumberField from '../../graphics/general/NumberField.svg';
 import OverlayPanel from '../../graphics/general/OverlayPanel.svg';
 import PageHeader from '../../graphics/general/PageHeader.svg';
+import Popover from '../../graphics/general/Popover.svg';
+import PopoverEducational from '../../graphics/general/PopoverEducational.svg';
 import Pulsar from '../../graphics/general/Pulsar.svg';
 import RadioGroup from '../../graphics/general/RadioGroup.svg';
 import SearchField from '../../graphics/general/SearchField.svg';
@@ -70,10 +72,10 @@ import Tooltip from '../../graphics/general/Tooltip.svg';
 import Upsell from '../../graphics/general/Upsell.svg';
 import Video from '../../graphics/general/Video.svg';
 import WashAnimated from '../../graphics/general/WashAnimated.svg';
+import GlobalEventsHandlerProvider from '../../graphics/utilities/GlobalEventsHandlerProvider.svg';
 import HookFocusVisible from '../../graphics/utilities/hook-focus-visible.svg';
 import HookReducedMotion from '../../graphics/utilities/hook-reduced-motion.svg';
 import ProviderColorScheme from '../../graphics/utilities/provider-color-scheme.svg';
-import ProviderHandlers from '../../graphics/utilities/provider-global-events-handler.svg';
 
 const componentData: $ReadOnlyArray<ComponentData> = [
   {
@@ -471,6 +473,26 @@ const componentData: $ReadOnlyArray<ComponentData> = [
       },
     },
   },
+  {
+    id: 'Card',
+    platform: {
+      ios: {
+        name: 'Card',
+        visual: {
+          svg: <Card />,
+        },
+        path: '/ios/card/card',
+        alias: ['Entry Card', 'Module', 'Panel', 'Teaser'],
+        description:
+          'Card is a semi-modular container used to house Card.Header and a variant of the available preview blocks.',
+        category: ['Pins and imagery'],
+        status: {
+          documentation: 'ready',
+          status: 'planned',
+        },
+      },
+    },
+  },
   {
     id: 'Checkbox',
     platform: {
@@ -869,7 +891,7 @@ const componentData: $ReadOnlyArray<ComponentData> = [
       web: {
         name: 'GlobalEventsHandlerProvider',
         visual: {
-          svg: <ProviderHandlers />,
+          svg: <GlobalEventsHandlerProvider />,
         },
         alias: ['OnLinkNavigationProvider'],
         path: '/web/utilities/globaleventshandlerprovider',
@@ -1539,7 +1561,7 @@ const componentData: $ReadOnlyArray<ComponentData> = [
         alias: ['Flyout'],
         description:
           'Popover is a floating view that contains a task related to the content on screen.',
-        category: ['Building blocks'],
+        category: ['Overlays'],
         status: {
           accessible: {
             summary: 'partial',
@@ -1571,7 +1593,7 @@ const componentData: $ReadOnlyArray<ComponentData> = [
       web: {
         name: 'PopoverEducational',
         visual: {
-          svg: <Popover />,
+          svg: <PopoverEducational />,
         },
         description:
           'PopoverEducational is a floating container that introduces users to elements on the screen. Used for education or onboarding experiences.',

diff --git a/docs/examples/table/sortableTableCells.js b/docs/examples/table/sortableTableCells.js
@@ -18,6 +18,11 @@ export default function SortableHeaderExample(): Node {
   return (
     <Box height="100%" display="flex" justifyContent="center" alignItems="center">
       <Table accessibilityLabel="Sortable header cells">
+        <colgroup>
+          <col span="1" style={{ width: '10%' }} />
+          <col span="1" style={{ width: '10%' }} />
+          <col span="1" style={{ width: '80%' }} />
+        </colgroup>
         <Table.Header>
           <Table.Row>
             <Table.SortableHeaderCell

diff --git a/docs/graphics/building-blocks/Popover.svg b/docs/graphics/building-blocks/Popover.svg
diff --git a/docs/graphics/general/DateField.svg b/docs/graphics/general/DateField.svg
diff --git a/docs/graphics/general/DatePicker.svg b/docs/graphics/general/DatePicker.svg