@redocly/theme 0.18.2 → 0.18.3-patch.1

package/src/components/Select/Select.tsx

@@ -12,6 +12,10 @@ export interface SelectProps {
   withArrow?: boolean;
   triggerEvent?: 'click' | 'hover';
   onChange?: (value: React.ReactNode | string) => void;
+  placement?: 'top' | 'bottom';
+  alignment?: 'start' | 'end';
+  icon?: React.ReactNode;
+  onlyIcon?: boolean;
 }
 
 export const Select = ({
@@ -22,6 +26,10 @@ export const Select = ({
   withArrow,
   triggerEvent = 'click',
   onChange,
+  placement,
+  alignment,
+  icon,
+  onlyIcon,
 }: SelectProps) => {
   const selectRef = useRef<HTMLDivElement | null>(null);
 
@@ -64,11 +72,14 @@ export const Select = ({
       onClick={triggerEvent === 'click' ? handleToggle : undefined}
     >
       <SelectInput>
-        <SelectInputValue withArrow={withArrow}>{_selected}</SelectInputValue>
+        {!onlyIcon && (
+          <SelectInputValue withIcon={withArrow || !!icon}>{_selected}</SelectInputValue>
+        )}
+        {icon}
         {withArrow ? isOpen ? <ArrowIcon direction="up" /> : <ArrowIcon direction="down" /> : null}
       </SelectInput>
       {isOpen && (
-        <SelectList>
+        <SelectList placement={placement} alignment={alignment}>
           {options.map((option, index) => (
             <SelectListItem key={index} onClick={() => handleSelect(option)}>
               {option}
@@ -104,15 +115,17 @@ export const SelectInput = styled.div`
   cursor: pointer;
 `;
 
-export const SelectInputValue = styled.div<{ withArrow?: boolean }>`
+export const SelectInputValue = styled.div<{ withIcon?: boolean }>`
   pointer-events: none;
-  ${({ withArrow }) => (withArrow ? 'margin-right: 8px;' : '')}
+  ${({ withIcon }) => (withIcon ? 'margin-right: 8px;' : '')}
 `;
 
-export const SelectList = styled.ul`
+export const SelectList = styled.ul<{ placement?: string; alignment?: string }>`
   position: absolute;
-  top: 100%;
-  left: 0;
+  top: ${({ placement }) => (placement === 'top' ? 'auto' : '100%')};
+  bottom: ${({ placement }) => (placement === 'top' ? '100%' : 'auto')};
+  left: ${({ alignment }) => (alignment === 'start' ? '0' : 'auto')};
+  right: ${({ alignment }) => (alignment === 'end' ? '0' : 'auto')};
   margin: 0;
   min-width: var(--select-list-min-width);
   max-width: var(--select-list-max-width);

package/src/components/Select/index.ts

@@ -1 +1,2 @@
 export * from '@theme/components/Select/Select';
+export * from '@theme/components/Select/styledVariables';

package/src/components/Select/styledVariables.ts

@@ -0,0 +1,30 @@
+import { css } from "styled-components";
+
+export const select = css`
+  /**
+    * @tokens Select
+    * */
+  --select-font-size: var(--font-size-base); // @presenter FontSize
+  --select-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --select-line-height: var(--line-height-base); // @presenter LineHeight
+  --select-text-color: var(--text-secondary); // @presenter Color
+  --select-border-radius: var(--border-radius); // @presenter BorderRadius
+
+  --select-input-padding-horizontal: 16px;  // @presenter Spacing
+  --select-input-padding-vertical: 6px;  // @presenter Spacing
+  --select-input-border-radius: var(--border-radius); // @presenter BorderRadius
+
+  --select-list-min-width: 100px;
+  --select-list-max-width: 300px;
+  --select-list-padding: var(--spacing-xxs); // @presenter Spacing
+  --select-list-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+  --select-list-background-color: var(--background-color); // @presenter Color
+  --select-list-box-shadow: var(--bg-raised-shadow); // @presenter Shadow
+
+  --select-list-item-horizontal-padding: var(--spacing-base); // @presenter Spacing
+  --select-list-item-vertical-padding: var(--spacing-xs); // @presenter Spacing
+  --select-list-item-border-radius: var(--border-radius); // @presenter BorderRadius
+  --select-list-item-active-background-color: var(--bg-raised); // @presenter Color
+
+  // @tokens End
+`;

package/src/components/Separator/Separator.tsx

@@ -5,16 +5,30 @@ import { SeparatorLine } from '@theme/components/Separator/SeparatorLine';
 import { SeparatorItem } from '@theme/components/Separator/SeparatorItem';
 import type { MenuItemProps } from '@theme/components/Sidebar/types';
 import { useTranslate } from '@portal/hooks';
+import { useThemeConfig } from '@theme/hooks';
 
 export function Separator({ item, className }: MenuItemProps): JSX.Element {
   const { translate } = useTranslate();
+  const { sidebar } = useThemeConfig();
+
+  const separatorLine = item.separatorLine || sidebar?.separatorLine;
+  const linePosition = item.linePosition || sidebar?.linePosition || 'bottom';
 
   return (
-    <Wrapper data-component-name="Sidebar/Separator" className={className}>
+    <Wrapper
+      data-component-name="Sidebar/Separator"
+      className={className}
+      linePosition={linePosition}
+      withLabel={!!item.label}
+    >
       <SeparatorItem>{translate(item.labelTranslationKey, item.label)}</SeparatorItem>
-      {item.separatorLine ? <SeparatorLine /> : null}
+      {separatorLine ? <SeparatorLine /> : null}
     </Wrapper>
   );
 }
 
-const Wrapper = styled.div``;
+const Wrapper = styled.div<{ linePosition: 'top' | 'bottom'; withLabel?: boolean }>`
+  display: flex;
+  flex-direction: ${({ linePosition }) => (linePosition === 'top' ? 'column-reverse' : 'column')};
+  margin-top: ${({ withLabel }) => (withLabel ? 'var(--sidebar-item-separator-offset)' : '0')};
+`;

package/src/components/Separator/SeparatorItem.tsx

@@ -9,23 +9,19 @@ export const SeparatorItem = styled(MenuItemLabel).attrs<{ className?: string }>
   }),
 )`
   cursor: default;
-  font-weight: var(--font-weight-bold);
-  color: var(--sidebar-separator-item-color);
-  font-family: var(--sidebar-item-separator-font-family);
+  font-weight: var(--sidebar-item-separator-font-weight);
+  color: var(--sidebar-item-separator-text-color);
   font-size: var(--sidebar-item-separator-font-size);
   text-transform: var(--sidebar-item-separator-text-transform);
   background: var(--mobile-menu-background);
+  border-radius: 0;
+  padding: var(--sidebar-item-separator-padding);
 
   ${({ theme }) => theme.mediaQueries.medium} {
     background: var(--sidebar-item-separator-background-color);
   }
 
-  *:not(:first-child) > & {
-    margin-top: var(--sidebar-item-separator-offset);
-  }
-
   :hover {
-    color: inherit;
-    background-color: inherit;
+    color: var(--sidebar-item-separator-text-color);
   }
 `;

package/src/components/Separator/SeparatorLine.tsx

@@ -4,7 +4,11 @@ export const SeparatorLine = styled.div.attrs<{ className?: string }>(({ classNa
   'data-component-name': 'Sidebar/SeparatorLine',
   className,
 }))`
-  height: 1px;
-  background-color: var(--sidebar-item-separator-line-color);
-  margin: var(--sidebar-item-separator-offset) 0 var(--sidebar-item-padding-vertical) 0;
+  height: var(--sidebar-item-separator-border-width);
+  background-color: var(--sidebar-item-separator-border-color);
+  margin: var(--mobile-sidebar-item-separator-line-offset);
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    margin: var(--sidebar-item-separator-line-offset);
+  }
 `;

package/src/components/Sidebar/ApiCallItem.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { OperationBadge } from '@theme/components/OperationBadge';
+import { Tag } from '@theme/components/Tag';
 import { MenuLinkItem } from '@theme/components/Menu/MenuLinkItem';
 import { SeparatorLine } from '@theme/components/Separator/SeparatorLine';
 import { MenuItemLabel } from '@theme/components/Menu/MenuItemLabel';
@@ -12,10 +12,10 @@ export function ApiCallItem({ item, className }: MenuItemProps): JSX.Element {
     <Wrapper data-component-name="Sidebar/ApiCallItem" className={className}>
       <MenuLinkItem item={item}>
         <Label active={item.active}>
-          <Badge type={item.httpVerb || ''}>
-            {item.httpVerb === 'hook' ? 'event' : item.httpVerb}
-          </Badge>
           {item.label}
+          <HttpTag color={item.httpVerb || ''}>
+            {item.httpVerb === 'hook' ? 'event' : item.httpVerb}
+          </HttpTag>
         </Label>
       </MenuLinkItem>
 
@@ -25,6 +25,8 @@ export function ApiCallItem({ item, className }: MenuItemProps): JSX.Element {
 }
 
 const Label = styled(MenuItemLabel)`
+  display: flex;
+  justify-content: space-between;
   color: var(--mobile-menu-item-text-color);
 
   ${({ theme }) => theme.mediaQueries.medium} {
@@ -34,14 +36,16 @@ const Label = styled(MenuItemLabel)`
 
 const Wrapper = styled.div``;
 
-export const Badge = styled(OperationBadge)`
+export const HttpTag = styled(Tag)`
   flex-shrink: 0;
-  margin-top: 0;
-  width: 36px;
-  height: 14px;
-  font-size: var(--sidebar-item-badge-http-font-size);
-  font-family: var(--sidebar-item-badge-http-font-family);
-  font-weight: var(--sidebar-item-badge-http-font-weight);
-  border-radius: var(--sidebar-item-badge-http-border-radius);
-  color: var(--sidebar-item-badge-http-text-color);
+  margin: var(--sidebar-item-http-tag-margin);
+  text-transform: uppercase;
+
+  width: var(--sidebar-item-http-tag-width);
+  height: var(--sidebar-item-http-tag-height);
+
+  font-size: var(--sidebar-item-http-tag-font-size);
+  font-family: var(--sidebar-item-http-tag-font-family);
+  font-weight: var(--sidebar-item-http-tag-font-weight);
+  border-radius: var(--sidebar-item-http-tag-border-radius);
 `;

package/src/components/Sidebar/FooterWrapper.tsx

@@ -1,15 +1,14 @@
 import styled from 'styled-components';
 export const FooterWrapper = styled.div<{ collapsed?: boolean }>`
+  padding: var(--sidebar-footer-padding-vertical) var(--sidebar-footer-padding-horizontal);
+
   ${({ collapsed }) =>
     collapsed &&
     `
         position: sticky;
         bottom: 0;
+        padding: 0;
     `}
-  margin: var(--sidebar-offset-top) 0 var(--sidebar-spacing-unit) var(--sidebar-offset-left);
-  padding-top: var(--sidebar-spacing-unit);
-  padding-right: var(--sidebar-spacing-unit);
-  border-top: solid 1px var(--border-color);
 
   button {
     margin: 0;

package/src/components/Sidebar/HeaderWrapper.tsx

@@ -5,6 +5,6 @@ export const HeaderWrapper = styled.div.attrs<{ className?: string }>(({ classNa
   className,
 }))`
   margin: var(--sidebar-offset-top) 0 0 var(--sidebar-offset-left);
-  padding-bottom: var(--sidebar-spacing-unit);
-  border-bottom: solid 1px var(--border-color);
+  padding-bottom: var(--sidebar-header-padding-bottom);
+  border-bottom: solid 1px var(--border-secondary);
 `;

package/src/components/Sidebar/SidebarLayout.tsx

@@ -9,6 +9,7 @@ import { MobileSidebarButton } from '@theme/components/Sidebar/MobileSidebarButt
 import { MenuContainer } from '@theme/components/Menu/MenuContainer';
 import { SidebarSearch } from '@theme/components/Search/SidebarSearch';
 import { useThemeConfig } from '@theme/hooks/useThemeConfig';
+import { telemetry } from '@portal/telemetry';
 
 import { MobileSidebarIcon } from './MobileSidebarIcon';
 
@@ -81,7 +82,11 @@ export function SidebarLayout({
         <Wrapper data-component-name="Sidebar/SidebarLayout" className={className}>
           {!search?.hide && search?.placement === 'sidebar' ? <SidebarSearch /> : null}
           <Sidebar animate={true} opened={isOpen}>
-            {header ? <HeaderWrapper>{header}</HeaderWrapper> : null}
+            {header ? (
+              <HeaderWrapper onClick={() => telemetry.send('back_to_catalog_button_clicked', {})}>
+                {header}
+              </HeaderWrapper>
+            ) : null}
             {versions ? <>{versions}</> : null}
             <MenuContainer growContent={growContent}>{menu}</MenuContainer>
             {footer && !isOpen ? (

package/src/components/Sidebar/index.ts

@@ -11,3 +11,4 @@ export * from '@theme/components/Sidebar/FooterWrapper';
 export * from '@theme/components/Sidebar/HeaderWrapper';
 export * from '@theme/components/Sidebar/SidebarItemIcon';
 export * from '@theme/components/Sidebar/VersionPicker';
+export * from '@theme/components/Sidebar/styledVariables';

package/src/components/Sidebar/styledVariables.ts

@@ -0,0 +1,213 @@
+import { css } from 'styled-components';
+
+export const sidebar = css`
+  /* === Sidebar === */
+
+  /**
+    * @tokens Sidebar logo
+    */
+
+  --sidebar-logo-max-height: 285px; // @presenter Spacing
+  --sidebar-logo-max-width: 285px; // @presenter Spacing
+  --sidebar-logo-padding: 2px; // @presenter Spacing
+
+  /**
+    * @tokens Sidebar typography
+    */
+  --sidebar-word-break: inherit; // @presenter WordBreak
+
+  /**
+    * @tokens Sidebar colors
+    * @presenter Color
+    */
+  --sidebar-background-color: var(--bg-base); // @presenter Color
+  --sidebar-border-color: var(--border-secondary); // @presenter Color
+
+  /**
+    * @tokens Sidebar spacing
+    * @presenter Spacing
+    */
+  --sidebar-spacing-unit: var(--spacing-base); // @presenter Spacing
+  --sidebar-width: 285px; // @presenter Spacing
+
+  --sidebar-offset-top: var(--sidebar-spacing-unit); // @presenter Spacing
+  --sidebar-offset-left: var(--sidebar-spacing-unit); // @presenter Spacing
+
+  --sidebar-header-padding-bottom: var(--sidebar-spacing-unit); // @presenter Spacing
+
+  --sidebar-chevron-size: var(--spacing-xs); // @presenter Spacing
+
+  /* === Sidebar Item === */
+
+  /**
+    * @tokens Sidebar item typography
+    */
+  --sidebar-item-font-family: var(--font-family-base); // @presenter FontFamily
+  --sidebar-item-font-size: var(--font-size-base); // @presenter FontSize
+  --sidebar-item-font-weight: var(--font-weight-regular); // @presenter FontSize
+  --sidebar-item-line-height: var(--line-height-base); // @presenter LineHeight
+
+  /**
+    * @tokens Sidebar item colors
+    *  @presenter Color
+    */
+  --sidebar-item-text-color: var(--text-secondary); // @presenter Color
+  --sidebar-item-background-color: transparent; // @presenter Color
+
+  --sidebar-item-active-color: var(--text-primary); // @presenter Color
+  --sidebar-item-active-background-color: var(--bg-overlay); // @presenter Color
+
+  --sidebar-item-hover-background-color: var(--bg-raised); // @presenter Color
+  --sidebar-item-hover-color: var(--text-primary); // @presenter Color
+
+  /**
+    * @tokens Sidebar item spacing
+    * @presenter Spacing
+    */
+
+  --sidebar-item-nested-offset: var(--spacing-xs); // @presenter Spacing
+  --sidebar-margin-horizontal: var(--spacing-base); // @presenter Spacing
+  --sidebar-item-padding-vertical: var(--spacing-xs); // @presenter Spacing
+  --sidebar-item-padding-horizontal: var(--spacing-xs); // @presenter Spacing
+
+  /**
+    * @tokens Sidebar item border
+    */
+  --sidebar-item-border-radius: 6px; // @presenter BorderRadius
+
+  /** 
+    * @tokens Sidebar item icon
+    */
+  --sidebar-item-icon-size: var(--spacing-xl);
+  --sidebar-item-icon-border-radius: 100%;
+
+  /**
+    * @tokens Sidebar item sublabel
+    */
+  --sidebar-item-sublabel-font-family: inherit; // sublabel is for drilldown only but I would like to support it in general
+  --sidebar-item-sublabel-font-size: var(--font-size-base); // @presenter FontSize
+  --sidebar-item-sublabel-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --sidebar-item-sublabel-text-color: var(--sidebar-item-text-color); // @presenter Color
+
+  /**
+    * @tokens Sidebar item drilldown
+    */
+
+  --sidebar-item-drilldown-font-family: var(--sidebar-item-font-family);
+  --sidebar-item-drilldown-font-size: var(--sidebar-item-font-size); // @presenter FontSize
+  --sidebar-text-drilldown-transform: inherit; // @presenter TextTransform
+  --sidebar-item-drilldown-text-color: var(--sidebar-item-text-color); // @presenter Color
+  --sidebar-item-drilldown-background-color: var(--sidebar-background-color); // @presenter Color
+
+  /**
+    * @tokens Sidebar item group
+    */
+  --sidebar-item-group-font-family: var(--sidebar-item-font-family);
+  --sidebar-item-group-font-size: var(--sidebar-item-font-size); // @presenter FontSize
+  --sidebar-text-group-transform: inherit;
+  --sidebar-item-group-text-color: var(--sidebar-item-text-color); // @presenter Color
+  --sidebar-item-group-background-color: var(--sidebar-background-color); // @presenter Color
+  --sidebar-item-group-active-text-color: var(--sidebar-item-active-color); // @presenter Color
+  --sidebar-item-group-active-background-color: var(--sidebar-item-active-background-color);
+
+  // we need a theme config for chevron-location: left (default), right-compact, right, none
+  // we need another theme config for chevron-style: up-down, down-up, right-down, down-right
+
+  --sidebar-group-item-chevron-size: var(--spacing-xs); // @presenter Spacing
+  --sidebar-group-item-chevron-color: var(--sidebar-item-text-color); // @presenter Color
+
+  /**
+    * @tokens Sidebar item separator
+    */
+  --sidebar-item-separator-font-family: var(--sidebar-item-font-family);
+  --sidebar-item-separator-font-size: var(--sidebar-item-font-size); // @presenter FontSize
+  --sidebar-item-separator-font-weight: var(--sidebar-item-font-weight); // @presenter FontWeight
+  --sidebar-item-separator-text-transform: inherit; // @presenter TextTransform
+  --sidebar-item-separator-text-color: var(--text-placeholder); // @presenter Color
+
+  --sidebar-item-separator-background-color: var(--sidebar-background-color); // @presenter Color
+  --sidebar-item-separator-line-color: var(--border-primary); // @presenter Color
+  --sidebar-item-separator-offset: var(--spacing-sm); // @presenter Spacing
+  --sidebar-item-separator-line-offset: var(--spacing-xxs) var(--sidebar-margin-horizontal); // @presenter Spacing
+  --mobile-sidebar-item-separator-line-offset: var(--spacing-xxs) var(--spacing-xs); // @presenter Spacing
+  --sidebar-item-separator-border-width: 1px; // @presenter Spacing
+  --sidebar-item-separator-border-color: var(--border-primary); // @presenter Color
+  --sidebar-item-separator-padding: var(--spacing-xxs) var(--sidebar-item-padding-horizontal); // @presenter Spacing
+
+  /**
+   * @tokens Sidebar item http tag
+   */
+
+  --sidebar-item-http-tag-width: auto;
+  --sidebar-item-http-tag-height: 20px;
+  --sidebar-item-http-tag-font-family: var(--code-font-family); // @presenter FontFamily
+  --sidebar-item-http-tag-font-size: var(--font-size-sm); // @presenter FontSize
+  --sidebar-item-http-tag-font-weight: normal; //@presenter FontWeight
+  --sidebar-item-http-tag-border-radius: var(--border-radius-xlg); // @presenter BorderRadius
+  --sidebar-item-http-tag-margin: 0 0 0 5px;
+
+  /**
+    * @tokens Sidebar back button
+    */
+  --sidebar-back-button-font-family: var(--sidebar-item-font-family);
+  --sidebar-back-button-font-size: var(--sidebar-item-font-size); // @presenter FontSize
+  --sidebar-back-button-transform: inherit; // @presenter TextTransform
+  --sidebar-back-button-text-color: var(--sidebar-item-text-color); // @presenter Color
+  --sidebar-back-button-background-color: transparent; // @presenter Color
+  --sidebar-back-button-hover-text-color: var(--sidebar-item-active-color); // @presenter Color
+  --sidebar-back-button-hover-background-color: transparent; // @presenter Color
+  --sidebar-back-button-icon-color: var(--sidebar-item-text-color); // @presenter Color
+  --sidebar-back-button-margin: 0 0 var(--spacing-lg) 0; // @presenter Spacing
+  --sidebar-back-padding-left: var(--spacing-xs); // @presenter Spacing
+  --sidebar-back-button-icon: none;
+
+  /** 
+  * @tokens Sidebar footer
+  */
+  --sidebar-footer-padding-vertical: var(--spacing-sm); // @presenter Spacing
+  --sidebar-footer-padding-horizontal: var(--spacing-lg); // @presenter Spacing
+  --sidebar-collapse-button-background-color: var(--bg-overlay); // @presenter Color
+  --sidebar-collapse-button-icon-color: var(--text-primary); // @presenter Color
+  --sidebar-collapse-button-border-color: var(--border-primary); // @presenter Color
+  --sidebar-collapse-button-active-background-color: unset; // @presenter Color
+  --sidebar-collapse-button-active-border-color: 0; // @presenter Color
+
+  --sidebar-controls-collapsed-gap: var(--spacing-xs); // @presenter Spacing
+  --sidebar-controls-collapsed-padding-vertical: var(--spacing-xs); // @presenter Spacing
+  --sidebar-controls-collapsed-padding-horizontal: var(--spacing-xxs); // @presenter Spacing
+ 
+  // @tokens End
+`;
+
+export const versionPicker = css`
+  /**
+    * @tokens Version picker
+    * */
+
+  --version-picker-font-size: var(--font-size-base); // @presenter FontSize
+  --version-picker-font-weight: var(--select-font-weight); // @presenter FontWeight
+  --version-picker-line-height: var(--select-line-height); // @presenter LineHeight
+  --version-picker-text-color: var(--select-text-color); // @presenter Color
+  --version-picker-border-radius: var(--select-border-radius); // @presenter BorderRadius
+  --version-picker-margin-vertical: 10px; // @presenter Spacing
+  --version-picker-margin-horizontal: 15px; // @presenter Spacing
+
+  --version-picker-input-padding-horizontal: var(--select-input-padding-horizontal); // @presenter Spacing
+  --version-picker-input-padding-vertical: var(--select-input-padding-vertical); // @presenter Spacing
+  --version-picker-input-border: 1px solid var(--border-primary); // @presenter Border
+  --version-picker-input-border-radius: var(--select-input-border-radius); // @presenter BorderRadius
+
+  --version-picker-list-min-width: var(--select-list-min-width);
+  --version-picker-list-max-width: var(--select-list-max-width);
+  --version-picker-list-padding: var(--select-list-padding); // @presenter Spacing
+  --version-picker-list-border-radius: var(--select-list-border-radius); // @presenter BorderRadius
+  --version-picker-list-background-color: var(--select-list-background-color); // @presenter Color
+  --version-picker-list-box-shadow: var(--select-list-box-shadow); // @presenter Shadow
+
+  --version-picker-list-item-horizontal-padding: var(--select-list-item-horizontal-padding); // @presenter Spacing
+  --version-picker-list-item-vertical-padding: var(--select-list-item-vertical-padding); // @presenter Spacing
+  --version-picker-list-item-border-radius: var(--select-list-item-border-radius); // @presenter BorderRadius
+  --version-picker-list-item-active-background-color: var(--select-list-item-active-background-color); // @presenter Color
+  
+  // @tokens End
+`;

package/src/components/Sidebar/types.ts

@@ -47,6 +47,7 @@ export interface NavItem {
   requiredPermission?: string;
   menuStyle?: MenuStyle;
   separatorLine?: boolean;
+  linePosition?: 'top' | 'bottom';
   version?: string;
   default?: boolean;
 }

package/src/components/SidebarActions/CollapseSidebarButton.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import styled, { css } from 'styled-components';
 
 import {
   StyledToggleRightPanelButton,
@@ -15,11 +16,30 @@ export const CollapseSidebarButton = ({
   onClick,
 }: CollapseSidebarButtonProps): JSX.Element => {
   return (
-    <StyledToggleRightPanelButton
+    <ToggleButton
       title={initialValue ? 'Show sidebar' : 'Hide sidebar'}
       onClick={onClick}
+      collapsed={initialValue}
     >
       {initialValue ? <HideLeftPanelSVG /> : <ShowLeftPanelSVG />}
-    </StyledToggleRightPanelButton>
+    </ToggleButton>
   );
 };
+
+const ToggleButton = styled(StyledToggleRightPanelButton)<{ collapsed?: boolean }>`
+  background: var(--sidebar-collapse-button-background-color);
+  fill: var(--sidebar-collapse-button-icon-color);
+  margin-right: ${({ collapsed }) => (collapsed ? 0 : 'calc(var(--spacing-unit) * -9)')};
+  border: 1px solid var(--sidebar-collapse-button-border-color);
+  border-radius: var(--border-radius-md);
+  padding: var(--spacing-xxs);
+  height: var(--control-height-sm);
+  width: var(--control-height-sm);
+
+  ${({ collapsed }) =>
+    collapsed &&
+    css`
+      background: var(--sidebar-collapse-button-active-background-color);
+      border: var(--sidebar-collapse-button-active-border-color);
+    `}
+`;

package/src/components/SidebarActions/SidebarActions.tsx

@@ -7,6 +7,7 @@ import {
   ControlsWrap,
   ControlsWrapChangeLayoutButtons,
 } from '@theme/components/SidebarActions/styled';
+import { telemetry } from '@portal/telemetry';
 
 export enum LayoutVariant {
   STACKED = 'stacked',
@@ -54,11 +55,20 @@ export const SidebarActions = ({
           {initialShowRightPanelToggle && (
             <ToggleRightPanelButton
               showRightPanelToggle={showRightPanelToggle}
-              onClick={onChangeRightPanelViewClick}
+              onClick={() => {
+                onChangeRightPanelViewClick();
+                telemetry.send('sidebar_samples_button_clicked', {});
+              }}
             />
           )}
           {showChangeLayoutButton && showRightPanelToggle && (
-            <ChangeViewButton layout={layout} onClick={onChangeViewClick} />
+            <ChangeViewButton
+              layout={layout}
+              onClick={() => {
+                onChangeViewClick();
+                telemetry.send('change_layout_button_clicked', {});
+              }}
+            />
           )}
         </ControlsWrapChangeLayoutButtons>
       )}
@@ -66,7 +76,12 @@ export const SidebarActions = ({
       {!hideCollapseSidebarButton && (
         <CollapseSidebarButton
           initialValue={collapsedSidebar}
-          onClick={onChangeCollapseSidebarClick}
+          onClick={() => {
+            onChangeCollapseSidebarClick();
+            collapsedSidebar
+              ? telemetry.send('sidebar_item_expanded', {})
+              : telemetry.send('sidebar_item_collapsed', {});
+          }}
         />
       )}
     </ControlsWrap>