ref(pageFilters): Remove leading icons

static/app/components/organizations/datePageFilter.tsx

@@ -1,17 +1,11 @@
-import styled from '@emotion/styled';
-
 import {updateDateTime} from 'sentry/actionCreators/pageFilters';
 import type {TimeRangeSelectorProps} from 'sentry/components/timeRangeSelector';
 import {TimeRangeSelector} from 'sentry/components/timeRangeSelector';
-import {IconCalendar} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import usePageFilters from 'sentry/utils/usePageFilters';
 import useRouter from 'sentry/utils/useRouter';
 
-import {
-  DesyncedFilterIndicator,
-  DesyncedFilterMessage,
-} from './pageFilters/desyncedFilter';
+import {DesyncedFilterMessage} from './pageFilters/desyncedFilter';
 
 interface DatePageFilterProps
   extends Partial<
@@ -48,6 +42,7 @@ export function DatePageFilter({
       utc={utc}
       relative={period}
       disabled={disabled ?? !pageFilterIsReady}
+      desynced={desynced}
       onChange={timePeriodUpdate => {
         const {relative, ...startEndUtc} = timePeriodUpdate;
         const newTimePeriod = {period: relative, ...startEndUtc};
@@ -63,21 +58,7 @@ export function DatePageFilter({
       menuTitle={menuTitle ?? t('Filter Time Range')}
       menuWidth={menuWidth ?? desynced ? '22em' : undefined}
       menuBody={desynced && <DesyncedFilterMessage />}
-      triggerProps={{
-        icon: (
-          <TriggerIconWrap>
-            <IconCalendar />
-            {desynced && <DesyncedFilterIndicator />}
-          </TriggerIconWrap>
-        ),
-        ...triggerProps,
-      }}
+      triggerProps={triggerProps}
     />
   );
 }
-
-const TriggerIconWrap = styled('div')`
-  position: relative;
-  display: flex;
-  align-items: center;
-`;

static/app/components/organizations/environmentPageFilter/trigger.tsx

@@ -4,7 +4,6 @@ import styled from '@emotion/styled';
 import Badge from 'sentry/components/badge/badge';
 import type {DropdownButtonProps} from 'sentry/components/dropdownButton';
 import DropdownButton from 'sentry/components/dropdownButton';
-import {IconWindow} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {trimSlug} from 'sentry/utils/string/trimSlug';
@@ -43,32 +42,28 @@ function BaseEnvironmentPageFilterTrigger(
       {...props}
       ref={forwardedRef}
       data-test-id="page-filter-environment-selector"
-      icon={
-        <TriggerIconWrap>
-          <IconWindow />
-          {desynced && <DesyncedFilterIndicator role="presentation" />}
-        </TriggerIconWrap>
-      }
     >
-      <TriggerLabel>{ready ? label : t('Loading\u2026')}</TriggerLabel>
+      <TriggerLabelWrap>
+        <TriggerLabel>{ready ? label : t('Loading\u2026')}</TriggerLabel>
+        {desynced && <DesyncedFilterIndicator role="presentation" />}
+      </TriggerLabelWrap>
       {remainingCount > 0 && <StyledBadge text={`+${remainingCount}`} />}
     </DropdownButton>
   );
 }
 
 export const EnvironmentPageFilterTrigger = forwardRef(BaseEnvironmentPageFilterTrigger);
 
+const TriggerLabelWrap = styled('span')`
+  position: relative;
+  min-width: 0;
+`;
+
 const TriggerLabel = styled('span')`
   ${p => p.theme.overflowEllipsis};
   width: auto;
 `;
 
-const TriggerIconWrap = styled('div')`
-  position: relative;
-  display: flex;
-  align-items: center;
-`;
-
 const StyledBadge = styled(Badge)`
   margin-top: -${space(0.5)};
   margin-bottom: -${space(0.5)};

static/app/components/organizations/pageFilterBar.tsx

@@ -1,5 +1,7 @@
 import styled from '@emotion/styled';
 
+import {space} from 'sentry/styles/space';
+
 const PageFilterBar = styled('div')<{condensed?: boolean}>`
   display: flex;
   position: relative;
@@ -37,6 +39,14 @@ const PageFilterBar = styled('div')<{condensed?: boolean}>`
     z-index: 0;
   }
 
+  /* Less inner padding between buttons */
+  & > div:not(:first-child) > button[aria-haspopup] {
+    padding-left: ${space(1.5)};
+  }
+  & > div:not(:last-child) > button[aria-haspopup] {
+    padding-right: ${space(1.5)};
+  }
+
   & button[aria-haspopup]:focus-visible {
     border-color: ${p => p.theme.focusBorder};
     box-shadow: 0 0 0 1px ${p => p.theme.focusBorder};

static/app/components/organizations/pageFilters/desyncedFilter.tsx

@@ -36,14 +36,14 @@ export function DesyncedFilterMessage() {
 }
 
 export const DesyncedFilterIndicator = styled('div')`
-  width: 9px;
-  height: 9px;
+  width: 8px;
+  height: 8px;
   border-radius: 50%;
   background: ${p => p.theme.active};
   border: solid 1px ${p => p.theme.background};
   position: absolute;
-  top: -${space(0.5)};
-  right: -${space(0.5)};
+  top: -${space(0.25)};
+  right: -${space(0.75)};
 `;
 
 const DesyncedFilterMessageWrap = styled('div')`

static/app/components/organizations/projectPageFilter/trigger.tsx

@@ -5,7 +5,6 @@ import Badge from 'sentry/components/badge/badge';
 import type {DropdownButtonProps} from 'sentry/components/dropdownButton';
 import DropdownButton from 'sentry/components/dropdownButton';
 import PlatformList from 'sentry/components/platformList';
-import {IconProject} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Project} from 'sentry/types/project';
@@ -81,36 +80,35 @@ function BaseProjectPageFilterTrigger(
       ref={forwardedRef}
       data-test-id="page-filter-project-selector"
       icon={
-        <TriggerIconWrap>
-          {!ready || isAllProjectsSelected || isMyProjectsSelected ? (
-            <IconProject />
-          ) : (
-            <PlatformList
-              platforms={projectsToShow.map(p => p.platform ?? 'other').reverse()}
-            />
-          )}
-          {desynced && <DesyncedFilterIndicator role="presentation" />}
-        </TriggerIconWrap>
+        ready &&
+        !isAllProjectsSelected &&
+        !isMyProjectsSelected && (
+          <PlatformList
+            platforms={projectsToShow.map(p => p.platform ?? 'other').reverse()}
+          />
+        )
       }
     >
-      <TriggerLabel>{ready ? label : t('Loading\u2026')}</TriggerLabel>
+      <TriggerLabelWrap>
+        <TriggerLabel>{ready ? label : t('Loading\u2026')}</TriggerLabel>
+        {desynced && <DesyncedFilterIndicator role="presentation" />}
+      </TriggerLabelWrap>
       {remainingCount > 0 && <StyledBadge text={`+${remainingCount}`} />}
     </DropdownButton>
   );
 }
 
 export const ProjectPageFilterTrigger = forwardRef(BaseProjectPageFilterTrigger);
 
-const TriggerLabel = styled('span')`
-  ${p => p.theme.overflowEllipsis};
+const TriggerLabelWrap = styled('span')`
   position: relative;
-  width: auto;
+  min-width: 0;
 `;
 
-const TriggerIconWrap = styled('div')`
+const TriggerLabel = styled('span')`
+  ${p => p.theme.overflowEllipsis};
   position: relative;
-  display: flex;
-  align-items: center;
+  width: auto;
 `;
 
 const StyledBadge = styled(Badge)`

static/app/components/timeRangeSelector/index.tsx

@@ -7,8 +7,9 @@ import {CompactSelect} from 'sentry/components/compactSelect';
 import type {Item} from 'sentry/components/dropdownAutoComplete/types';
 import DropdownButton from 'sentry/components/dropdownButton';
 import HookOrDefault from 'sentry/components/hookOrDefault';
+import {DesyncedFilterIndicator} from 'sentry/components/organizations/pageFilters/desyncedFilter';
 import {DEFAULT_RELATIVE_PERIODS, DEFAULT_STATS_PERIOD} from 'sentry/constants';
-import {IconArrow, IconCalendar} from 'sentry/icons';
+import {IconArrow} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {DateString} from 'sentry/types/core';
@@ -78,6 +79,11 @@ export interface TimeRangeSelectorProps
    * unclearable.
    */
   defaultPeriod?: string;
+  /**
+   * (Specific to DatePageFilter) Whether the current value is out of sync with the
+   * stored persistent value.
+   */
+  desynced?: boolean;
   /**
    * Forces the user to select from the set of defined relative options
    */
@@ -158,6 +164,7 @@ export function TimeRangeSelector({
   menuBody,
   menuFooter,
   menuFooterMessage,
+  desynced,
   ...selectProps
 }: TimeRangeSelectorProps) {
   const router = useRouter();
@@ -348,12 +355,16 @@ export function TimeRangeSelector({
                 <DropdownButton
                   isOpen={isOpen}
                   size={selectProps.size}
-                  icon={<IconCalendar />}
                   data-test-id="page-filter-timerange-selector"
                   {...triggerProps}
                   {...selectProps.triggerProps}
                 >
-                  <TriggerLabel>{selectProps.triggerLabel ?? defaultLabel}</TriggerLabel>
+                  <TriggerLabelWrap>
+                    <TriggerLabel>
+                      {selectProps.triggerLabel ?? defaultLabel}
+                    </TriggerLabel>
+                    {desynced && <DesyncedFilterIndicator />}
+                  </TriggerLabelWrap>
                 </DropdownButton>
               );
             })
@@ -466,6 +477,11 @@ export function TimeRangeSelector({
   );
 }
 
+const TriggerLabelWrap = styled('span')`
+  position: relative;
+  min-width: 0;
+`;
+
 const TriggerLabel = styled('span')`
   ${p => p.theme.overflowEllipsis}
   width: auto;