style(sidebar): update sidebar css for v2 design

getsentry · Sep 3, 2024 · a7dc774 · a7dc774
1 parent 73047e4
commit a7dc774
Show file tree

Hide file tree

Showing 12 changed files with 109 additions and 157 deletions.
diff --git a/static/app/components/demo/demoHeader.tsx b/static/app/components/demo/demoHeader.tsx
@@ -95,9 +95,7 @@ const Wrapper = styled('div')<{collapsed: boolean}>`
  white-space: nowrap;
  gap: ${space(4)};
 
- margin-left: calc(
- -1 * ${p => (p.collapsed ? p.theme.sidebar.collapsedWidth : p.theme.sidebar.expandedWidth)}
- );
+ margin-left: calc(-1 * ${p => p.theme.sidebar.width});
 
  position: fixed;
  width: 100%;

diff --git a/static/app/components/sidebar/broadcasts.tsx b/static/app/components/sidebar/broadcasts.tsx
@@ -115,7 +115,7 @@ class Broadcasts extends Component<Props, State> {
  }
 
  render() {
- const {orientation, collapsed, currentPanel, hidePanel} = this.props;
+ const {orientation, collapsed, currentPanel, hidePanel, hasNewNav} = this.props;
  const {broadcasts, loading} = this.state;
 
  const unseenPosts = this.unseenIds;
@@ -130,7 +130,8 @@ class Broadcasts extends Component<Props, State> {
  active={currentPanel === SidebarPanelKey.BROADCASTS}
  badge={unseenPosts.length}
  icon={<IconBroadcast size="md" />}
- label={t("What's new")}
+ hasNewNav={hasNewNav}
+ label={hasNewNav ? t('New') : t("What's new")}
  onClick={this.handleShowPanel}
  id="broadcasts"
  />

diff --git a/static/app/components/sidebar/help.tsx b/static/app/components/sidebar/help.tsx
@@ -20,7 +20,13 @@ type Props = Pick<
  organization: Organization;
 };
 
-function SidebarHelp({orientation, collapsed, hidePanel, organization}: Props) {
+function SidebarHelp({
+ orientation,
+ collapsed,
+ hidePanel,
+ organization,
+ hasNewNav,
+}: Props) {
  return (
  <DeprecatedDropdownMenu>
  {({isOpen, getActorProps, getMenuProps}) => (
@@ -31,6 +37,7 @@ function SidebarHelp({orientation, collapsed, hidePanel, organization}: Props) {
  orientation={orientation}
  collapsed={collapsed}
  hasPanel={false}
+ hasNewNav={hasNewNav}
  icon={<IconQuestion size="md" />}
  label={t('Help')}
  id="help"

diff --git a/static/app/components/sidebar/index.tsx b/static/app/components/sidebar/index.tsx
@@ -2,7 +2,6 @@ import {Fragment, useCallback, useContext, useEffect} from 'react';
 import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
-import {hideSidebar, showSidebar} from 'sentry/actionCreators/preferences';
 import Feature from 'sentry/components/acl/feature';
 import GuideAnchor from 'sentry/components/assistant/guideAnchor';
 import {Chevron} from 'sentry/components/chevron';
@@ -36,7 +35,6 @@ import {t} from 'sentry/locale';
 import ConfigStore from 'sentry/stores/configStore';
 import DemoWalkthroughStore from 'sentry/stores/demoWalkthroughStore';
 import HookStore from 'sentry/stores/hookStore';
-import PreferencesStore from 'sentry/stores/preferencesStore';
 import SidebarPanelStore from 'sentry/stores/sidebarPanelStore';
 import {useLegacyStore} from 'sentry/stores/useLegacyStore';
 import {space} from 'sentry/styles/space';
@@ -115,26 +113,24 @@ function useOpenOnboardingSidebar(organization?: Organization) {
 
 function Sidebar() {
  const location = useLocation();
- const preferences = useLegacyStore(PreferencesStore);
  const activePanel = useLegacyStore(SidebarPanelStore);
  const organization = useOrganization({allowNull: true});
  const {shouldAccordionFloat} = useContext(ExpandedContext);
- const hasNewNav = organization?.features.includes('navigation-sidebar-v2');
+ const hasNewNav = true;
  const hasOrganization = !!organization;
  const isSelfHostedErrorsOnly = ConfigStore.get('isSelfHostedErrorsOnly');
 
- const collapsed = hasNewNav ? true : !!preferences.collapsed;
  const horizontal = useMedia(`(max-width: ${theme.breakpoints.medium})`);
  // Panel determines whether to highlight
  const hasPanel = !!activePanel;
  const orientation: SidebarOrientation = horizontal ? 'top' : 'left';
 
  const sidebarItemProps = {
  orientation,
- collapsed,
  hasPanel,
  organization,
  hasNewNav,
+ collapsed: true,
  };
  // Avoid showing superuser UI on self-hosted instances
  const showSuperuserWarning = () => {
@@ -148,13 +144,7 @@ function Sidebar() {
 
  useOpenOnboardingSidebar();
 
- const toggleCollapse = useCallback(() => {
- if (collapsed) {
- showSidebar();
- } else {
- hideSidebar();
- }
- }, [collapsed]);
+ const toggleCollapse = useCallback(() => {}, []);
 
  // Close panel on any navigation
  useEffect(() => void hidePanel(), [location?.pathname]);
@@ -175,19 +165,6 @@ function Sidebar() {
  });
  }, [location?.hash]);
 
- // Add sidebar collapse classname to body
- useEffect(() => {
- const bcl = document.body.classList;
-
- if (collapsed) {
- bcl.add('collapsed');
- } else {
- bcl.remove('collapsed');
- }
-
- return () => bcl.remove('collapsed');
- }, [collapsed]);
-
  // Add sidebar hasNewNav classname to body
  useEffect(() => {
  const bcl = document.body.classList;
@@ -540,7 +517,7 @@ function Sidebar() {
  {...sidebarItemProps}
  index
  icon={<IconDashboard />}
- label={hasNewNav ? 'Dash.' : t('Dashboards')}
+ label={hasNewNav ? 'Boards' : t('Dashboards')}
  to={`/organizations/${organization.slug}/dashboards/`}
  id="customizable-dashboards"
  />
@@ -628,22 +605,17 @@ function Sidebar() {
  </SidebarAccordion>
  );
 
+ const collapsed = true;
+
  return (
- <SidebarWrapper
- aria-label={t('Primary Navigation')}
- collapsed={collapsed}
- hasNewNav={hasNewNav}
- >
+ <SidebarWrapper aria-label={t('Primary Navigation')} collapsed hasNewNav={hasNewNav}>
  <ExpandedContextProvider>
  <SidebarSectionGroupPrimary>
  <DropdownSidebarSection
  isSuperuser={showSuperuserWarning() && !isExcludedOrg()}
  hasNewNav={hasNewNav}
  >
- <SidebarDropdown
- orientation={orientation}
- collapsed={hasNewNav || collapsed}
- />
+ <SidebarDropdown orientation={orientation} collapsed />
 
  {showSuperuserWarning() && !isExcludedOrg() && (
  <Hook name="component:superuser-warning" organization={organization} />
@@ -659,39 +631,34 @@ function Sidebar() {
  </SidebarSection>
 
  {!isSelfHostedErrorsOnly && (
- <Fragment>
- <SidebarSection hasNewNav={hasNewNav}>
- {explore}
- {insights}
- </SidebarSection>
-
- <SidebarSection hasNewNav={hasNewNav}>
- {performance}
- {feedback}
- {monitors}
- {alerts}
- {dashboards}
- {releases}
- </SidebarSection>
- </Fragment>
+ <SidebarSection hasNewNav={hasNewNav}>
+ {explore}
+ {insights}
+ {performance}
+ {feedback}
+ {monitors}
+ {alerts}
+ {dashboards}
+ {releases}
+ </SidebarSection>
  )}
 
  {isSelfHostedErrorsOnly && (
- <Fragment>
- <SidebarSection hasNewNav={hasNewNav}>
- {alerts}
- {discover2}
- {dashboards}
- {releases}
- {userFeedback}
- </SidebarSection>
- </Fragment>
+ <SidebarSection hasNewNav={hasNewNav}>
+ {alerts}
+ {discover2}
+ {dashboards}
+ {releases}
+ {userFeedback}
+ </SidebarSection>
  )}
 
- <SidebarSection hasNewNav={hasNewNav}>
- {stats}
- {settings}
- </SidebarSection>
+ {!hasNewNav && (
+ <SidebarSection>
+ {stats}
+ {settings}
+ </SidebarSection>
+ )}
  </Fragment>
  )}
  </PrimaryItems>
@@ -749,12 +716,14 @@ function Sidebar() {
  organization,
  })}
  <SidebarHelp
+ hasNewNav={hasNewNav}
  orientation={orientation}
  collapsed={collapsed}
  hidePanel={hidePanel}
  organization={organization}
  />
  <Broadcasts
+ hasNewNav={hasNewNav}
  orientation={orientation}
  collapsed={collapsed}
  currentPanel={activePanel}
@@ -763,12 +732,19 @@ function Sidebar() {
  organization={organization}
  />
  <ServiceIncidents
+ hasNewNav={hasNewNav}
  orientation={orientation}
  collapsed={collapsed}
  currentPanel={activePanel}
  onShowPanel={() => togglePanel(SidebarPanelKey.SERVICE_INCIDENTS)}
  hidePanel={hidePanel}
  />
+ {hasNewNav && (
+ <Fragment>
+ {stats}
+ {settings}
+ </Fragment>
+ )}
  </SidebarSection>
 
  {!horizontal && !hasNewNav && (
@@ -805,15 +781,8 @@ export const SidebarWrapper = styled('nav')<{collapsed: boolean; hasNewNav?: boo
  background: ${p => p.theme.sidebarGradient};
  color: ${p => p.theme.sidebar.color};
  line-height: 1;
- padding: 12px 0 2px; /* Allows for 32px avatars */
- width: ${p =>
- p.theme.sidebar[
- p.hasNewNav
- ? 'semiCollapsedWidth'
- : p.collapsed
- ? 'collapsedWidth'
- : 'expandedWidth'
- ]};
+ padding: 16px 8px;
+ width: ${p => p.theme.sidebar.width};
  position: fixed;
  top: ${p => (ConfigStore.get('demoMode') ? p.theme.demo.headerSize : 0)};
  left: 0;
@@ -840,8 +809,8 @@ export const SidebarWrapper = styled('nav')<{collapsed: boolean; hasNewNav?: boo
 const SidebarSectionGroup = styled('div')<{hasNewNav?: boolean}>`
  ${responsiveFlex};
  flex-shrink: 0; /* prevents shrinking on Safari */
- gap: 1px;
- ${p => p.hasNewNav && `align-items: center;`}
+ gap: 8px;
+ ${p => p.hasNewNav && `flex-direction: column; align-items: stretch;`}
 `;
 
 const SidebarSectionGroupPrimary = styled('div')`
@@ -863,7 +832,7 @@ const PrimaryItems = styled('div')`
  flex: 1;
  display: flex;
  flex-direction: column;
- gap: 1px;
+ gap: ${space(1)};
  -ms-overflow-style: -ms-autohiding-scrollbar;
  @media (max-height: 675px) and (min-width: ${p => p.theme.breakpoints.medium}) {
  border-bottom: 1px solid ${p => p.theme.sidebarBorder};
@@ -905,6 +874,8 @@ const SidebarSection = styled(SidebarSectionGroup)<{
 }>`
  ${p => !p.noMargin && !p.hasNewNav && `margin: ${space(1)} 0`};
  ${p => !p.noPadding && !p.hasNewNav && `padding: 0 ${space(2)}`};
+ align-items: stretch;
+ gap: ${space(1)};
 
  @media (max-width: ${p => p.theme.breakpoints.small}) {
  margin: 0;

diff --git a/static/app/components/sidebar/serviceIncidents.tsx b/static/app/components/sidebar/serviceIncidents.tsx
@@ -21,6 +21,7 @@ function ServiceIncidents({
  hidePanel,
  collapsed,
  orientation,
+ hasNewNav,
 }: Props) {
  const {data: incidents} = useServiceIncidents({statusFilter: 'unresolved'});
 
@@ -43,6 +44,7 @@ function ServiceIncidents({
  collapsed={collapsed}
  active={active}
  icon={<IconWarning size="md" />}
+ hasNewNav={hasNewNav}
  label={t('Service status')}
  onClick={onShowPanel}
  />

diff --git a/static/app/components/sidebar/sidebarDropdown/index.tsx b/static/app/components/sidebar/sidebarDropdown/index.tsx
@@ -66,7 +66,7 @@ export default function SidebarDropdown({orientation, collapsed, hideOrgLinks}:
  collapsed={collapsed}
  organization={org ?? undefined}
  user={!org ? user : undefined}
- size={32}
+ size={38}
  round={false}
  />
  ) : (
@@ -201,7 +201,7 @@ const UserBadgeNoOverflow = styled(IdBadge)`
 
 const SidebarDropdownRoot = styled('div')`
  position: relative;
- padding: 0 3px; /* align org icon with sidebar item icons */
+ padding: 0; /* align org icon with sidebar item icons */
 `;
 
 // So that long org names and user names do not overflow
@@ -244,8 +244,9 @@ const SidebarDropdownActor = styled('button')`
 `;
 
 const StyledAvatar = styled(Avatar)<{collapsed: boolean}>`
- margin: ${space(0.25)} 0;
+ margin: 0;
  margin-right: ${p => (p.collapsed ? '0' : space(1.5))};
+ margin-bottom: ${space(1)};
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.08);
  border-radius: 6px; /* Fixes background bleeding on corners */