From 69ca107a509c90c3dfbda5d5d25924e1cc2df426 Mon Sep 17 00:00:00 2001 From: Vu Luong Date: Fri, 20 Sep 2024 12:45:07 -0700 Subject: [PATCH 1/2] ref(pageFilters): Remove leading icons --- .../organizations/datePageFilter.tsx | 25 ++------------ .../environmentPageFilter/trigger.tsx | 23 +++++-------- .../organizations/pageFilterBar.tsx | 10 ++++++ .../pageFilters/desyncedFilter.tsx | 8 ++--- .../projectPageFilter/trigger.tsx | 34 +++++++++---------- .../components/timeRangeSelector/index.tsx | 22 ++++++++++-- 6 files changed, 61 insertions(+), 61 deletions(-) diff --git a/static/app/components/organizations/datePageFilter.tsx b/static/app/components/organizations/datePageFilter.tsx index 28633b8d046b1..77dd93baf6575 100644 --- a/static/app/components/organizations/datePageFilter.tsx +++ b/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 && } - triggerProps={{ - icon: ( - - - {desynced && } - - ), - ...triggerProps, - }} + triggerProps={triggerProps} /> ); } - -const TriggerIconWrap = styled('div')` - position: relative; - display: flex; - align-items: center; -`; diff --git a/static/app/components/organizations/environmentPageFilter/trigger.tsx b/static/app/components/organizations/environmentPageFilter/trigger.tsx index f003681aa312b..7146b4b5e9a93 100644 --- a/static/app/components/organizations/environmentPageFilter/trigger.tsx +++ b/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,14 +42,11 @@ function BaseEnvironmentPageFilterTrigger( {...props} ref={forwardedRef} data-test-id="page-filter-environment-selector" - icon={ - - - {desynced && } - - } > - {ready ? label : t('Loading\u2026')} + + {ready ? label : t('Loading\u2026')} + {desynced && } + {remainingCount > 0 && } ); @@ -58,17 +54,16 @@ function BaseEnvironmentPageFilterTrigger( 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)}; diff --git a/static/app/components/organizations/pageFilterBar.tsx b/static/app/components/organizations/pageFilterBar.tsx index cf68149840b61..132f5d4fa8ebd 100644 --- a/static/app/components/organizations/pageFilterBar.tsx +++ b/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 */ + x & > 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}; diff --git a/static/app/components/organizations/pageFilters/desyncedFilter.tsx b/static/app/components/organizations/pageFilters/desyncedFilter.tsx index 05f3a92024447..21cb8708ceccd 100644 --- a/static/app/components/organizations/pageFilters/desyncedFilter.tsx +++ b/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')` diff --git a/static/app/components/organizations/projectPageFilter/trigger.tsx b/static/app/components/organizations/projectPageFilter/trigger.tsx index 8005a32380698..93b09ff128186 100644 --- a/static/app/components/organizations/projectPageFilter/trigger.tsx +++ b/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,19 +80,19 @@ function BaseProjectPageFilterTrigger( ref={forwardedRef} data-test-id="page-filter-project-selector" icon={ - - {!ready || isAllProjectsSelected || isMyProjectsSelected ? ( - - ) : ( - p.platform ?? 'other').reverse()} - /> - )} - {desynced && } - + ready && + !isAllProjectsSelected && + !isMyProjectsSelected && ( + p.platform ?? 'other').reverse()} + /> + ) } > - {ready ? label : t('Loading\u2026')} + + {ready ? label : t('Loading\u2026')} + {desynced && } + {remainingCount > 0 && } ); @@ -101,16 +100,15 @@ function BaseProjectPageFilterTrigger( 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)` diff --git a/static/app/components/timeRangeSelector/index.tsx b/static/app/components/timeRangeSelector/index.tsx index db42ee6156815..b9276443c8ae3 100644 --- a/static/app/components/timeRangeSelector/index.tsx +++ b/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({ } data-test-id="page-filter-timerange-selector" {...triggerProps} {...selectProps.triggerProps} > - {selectProps.triggerLabel ?? defaultLabel} + + + {selectProps.triggerLabel ?? defaultLabel} + + {desynced && } + ); }) @@ -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; From c0a23b38944215bb3f6823643fd5f03991df4251 Mon Sep 17 00:00:00 2001 From: Vu Luong Date: Fri, 20 Sep 2024 12:56:53 -0700 Subject: [PATCH 2/2] Lint --- static/app/components/organizations/pageFilterBar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/app/components/organizations/pageFilterBar.tsx b/static/app/components/organizations/pageFilterBar.tsx index 132f5d4fa8ebd..19591a991d78e 100644 --- a/static/app/components/organizations/pageFilterBar.tsx +++ b/static/app/components/organizations/pageFilterBar.tsx @@ -40,7 +40,7 @@ const PageFilterBar = styled('div')<{condensed?: boolean}>` } /* Less inner padding between buttons */ - x & > div:not(:first-child) > button[aria-haspopup] { + & > div:not(:first-child) > button[aria-haspopup] { padding-left: ${space(1.5)}; } & > div:not(:last-child) > button[aria-haspopup] {