@redocly/theme 0.18.3-patch.0 → 0.18.3-patch.2

package/src/components/Filter/FilterContent.tsx

@@ -13,6 +13,7 @@ interface FilterContentProps {
   filters: ResolvedFilter[];
   filterTerm: string;
   isMobile: boolean;
+  filterValuesCasing?: 'sentence';
 }
 
 export function FilterContent({
@@ -20,6 +21,7 @@ export function FilterContent({
   filters,
   filterTerm,
   isMobile,
+  filterValuesCasing,
 }: FilterContentProps) {
   const { translate } = useTranslate();
   const translationKeys = {
@@ -27,6 +29,14 @@ export function FilterContent({
     clearAll: 'theme.catalog.filters.clearAll',
   };
 
+  const hasActiveFilters = filters.some((filter) => {
+    if (filter.selectedOptions && filter.selectedOptions instanceof Set) {
+      return filter.selectedOptions.size;
+    } else if (filter.selectedOptions.from && filter.selectedOptions.to) {
+      return true;
+    }
+  });
+
   const handleClearAll = () => {
     filters.forEach((filter) => filter.selectOption(''));
   };
@@ -42,17 +52,24 @@ export function FilterContent({
       </FilterControls>
       <FilterItems>
         {filters.map((filter, idx) => (
-          <Filter filter={filter} key={filter.property + '-' + idx} />
+          <Filter
+            filter={filter}
+            key={filter.property + '-' + idx}
+            filterValuesCasing={filterValuesCasing}
+          />
         ))}
       </FilterItems>
-      <Button size="small" onClick={handleClearAll}>
-        {translate(translationKeys.placeholder, 'Clear all filters')}
-      </Button>
+      {hasActiveFilters && (
+        <Button size="small" onClick={handleClearAll}>
+          {translate(translationKeys.placeholder, 'Clear all filters')}
+        </Button>
+      )}
     </FilterContentWrapper>
   );
 }
 
 const FilterContentWrapper = styled.div<{ isMobile?: boolean }>`
+  width: var(--sidebar-width);
   display: none;
 
   ${Button} {

package/src/components/Filter/FilterPopover.tsx

@@ -8,17 +8,23 @@ import type { ResolvedFilter } from '@theme/types/portal/src/shared/types/catalo
 
 interface FilterPopoverProps {
   setIsAddingFilter: (value: boolean) => void;
-  setFilterTerm: (value: string) => void;
   filters: ResolvedFilter[];
-  filterTerm: string;
 }
 
-export function FilterPopover({
-  setIsAddingFilter,
-  setFilterTerm,
-  filters,
-  filterTerm,
-}: FilterPopoverProps) {
+export function FilterPopover({ setIsAddingFilter, filters }: FilterPopoverProps) {
+  const [filterTerm, setFilterTerm] = React.useState('');
+  const filteredFilters = filters
+    .map((filter) => {
+      const options = filter.options.filter((option) => option.value.includes(filterTerm));
+      return options.length
+        ? {
+            ...filter,
+            filteredOptions: options,
+          }
+        : null;
+    })
+    .filter(Boolean) as ResolvedFilter[];
+
   const translationKeys = {
     placeholder: 'theme.catalog.filters.placeholder',
     done: 'theme.catalog.filters.done',
@@ -47,7 +53,7 @@ export function FilterPopover({
         />
       </FilterControls>
       <FilterItems>
-        {filters.map((filter, idx) => (
+        {filteredFilters.map((filter, idx) => (
           <Filter filter={filter} key={filter.property + '-' + idx} />
         ))}
       </FilterItems>
@@ -89,7 +95,9 @@ const FilterPopoverHeaderLabel = styled.div`
   font-weight: var(--filter-popover-header-label-font-weight);
 `;
 
-const FilterPopoverHeaderButton = styled.div`
+const FilterPopoverHeaderButton = styled.div.attrs({
+  'data-cy': 'FilterPopover/DoneButton',
+})`
   color: var(--filter-popover-header-button-color);
   justify-self: end;
   font-size: var(--filter-popover-header-button-font-size);
@@ -98,7 +106,7 @@ const FilterPopoverHeaderButton = styled.div`
   line-height: var(--filter-popover-header-button-height);
 `;
 
-export const StyledInput = styled.input`
+export const StyledInput = styled.input.attrs({ 'data-cy': 'FilterPopover/Input' })`
   border: var(--filter-input-border);
   min-width: var(--filter-input-min-width);
   width: 100%;

package/src/components/Filter/FilterTag.tsx

@@ -17,7 +17,7 @@ export function FilterTag({ label, onClick }: FilterTagProps) {
   );
 }
 
-const TagWrapper = styled.div`
+const TagWrapper = styled.div.attrs({ 'data-cy': 'Filter/FilterTag' })`
   display: flex;
   align-items: center;
   white-space: nowrap;

package/src/components/Footer/FooterColumn.tsx

@@ -5,6 +5,7 @@ import { Link } from '@portal/Link';
 import type { ResolvedNavItem } from '@theme/types/portal';
 import { useTranslate } from '@portal/hooks';
 import { Image } from '@theme/components/Image/Image';
+import { telemetry } from '@portal/telemetry';
 
 interface FooterColumnProps {
   column: ResolvedNavItem;
@@ -38,6 +39,7 @@ export function FooterColumn({ column, className }: FooterColumnProps): JSX.Elem
               target={columnItem.target}
               data-cy={columnItem.label}
               iconsOnly={iconsOnly}
+              onClick={() => telemetry.send('footer_item_clicked', {})}
             >
               {columnItem.icon || columnItem.srcSet ? (
                 <FooterLinkIcon>

package/src/components/LastUpdated/index.ts

@@ -0,0 +1 @@
+export * from '@theme/components/LastUpdated/styledVariables';

package/src/components/LastUpdated/styledVariables.ts

@@ -0,0 +1,8 @@
+import { css } from "styled-components";
+
+export const lastUpdated = css`
+  --last-updated-text-color: var(--text-secondary);
+  --last-updated-font-size: var(--font-size-sm);
+  --last-updated-font-family: var(--font-family-base);
+  --last-updated-line-height: var(--line-height-base);
+`;

package/src/components/Menu/MenuItemLabel.tsx

@@ -14,6 +14,7 @@ export const MenuItemLabel = styled.li.attrs<{ className?: string }>(({ classNam
   font-family: var(--sidebar-item-font-family);
   font-size: var(--sidebar-item-font-size);
   font-weight: var(--sidebar-item-font-weight);
+  line-height: var(--sidebar-item-line-height);
   margin: var(--menu-item-label-margin);
   padding: var(--menu-item-label-padding);
   border-radius: var(--sidebar-item-border-radius);
@@ -35,6 +36,7 @@ export const MenuItemLabel = styled.li.attrs<{ className?: string }>(({ classNam
 
     ${({ theme }) => theme.mediaQueries.medium} {
       color: var(--sidebar-item-hover-color);
+      background: var(--sidebar-item-hover-background-color);
     }
   }
 

package/src/components/Menu/MenuLinkItem.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 
 import { MenuLink } from '@theme/components/Menu/MenuLink';
 import type { MenuItemProps } from '@theme/components/Sidebar/types';
+import { telemetry } from '@portal/telemetry';
 
 export function MenuLinkItem({
   item,
@@ -10,7 +11,11 @@ export function MenuLinkItem({
   className,
 }: React.PropsWithChildren<MenuItemProps>): JSX.Element {
   return (
-    <Wrapper data-component-name="Sidebar/MenuLinkItem" className={className}>
+    <Wrapper
+      data-component-name="Sidebar/MenuLinkItem"
+      className={className}
+      onClick={() => telemetry.send('sidebar_item_clicked', { label: item.label, type: item.type })}
+    >
       {item.link ? (
         <MenuLink to={item.link} {...item}>
           {children}

package/src/components/Menu/MobileMenu.tsx

@@ -143,9 +143,9 @@ const ControlButtonLabel = styled.span<{ paddingDirection: 'right' | 'left' }>`
 `;
 
 const ProductNameWrapper = styled.div`
-  color: var(--menu-product-name-color);
-  border-radius: var(--menu-product-name-border-radius);
-  border: 1px solid var(--menu-product-name-border-color);
-  padding: var(--menu-product-name-padding);
-  margin: var(--menu-product-name-margin);
+  color: var(--mobile-menu-product-name-color);
+  border-radius: var(--mobile-menu-product-name-border-radius);
+  border: var(--mobile-menu-product-name-border);
+  padding: var(--mobile-menu-product-name-padding);
+  margin: var(--mobile-menu-product-name-margin);
 `;

package/src/components/Menu/styledVariables.ts

@@ -5,7 +5,7 @@ export const mobileMenu = css`
       * @tokens Mobile Menu icons
       */
   --mobile-menu-icons-size: var(--spacing-md); // @presenter Spacing
-  --mobile-menu-search-icon-size: calc(var(--spacing-md) - 2px); // @presenter Spacing
+  --mobile-menu-search-icon-size: var(--spacing-md); // @presenter Spacing
 
   /**
       * @tokens Mobile Menu wrapper
@@ -58,9 +58,25 @@ export const mobileMenu = css`
   /**
       * @tokens Mobile Menu Login button
       * */
-  --mobile-menu-login-button-background: var(--color-primary-base); // @presenter Color
+  --mobile-menu-login-button-background: var(--color-primary-bg); // @presenter Color
   --mobile-menu-login-button-color: var(--color-primary-text); // @presenter Color
+  --mobile-menu-login-button-hover-color: var(--text-primary); // @presenter Color
+  --mobile-menu-login-button-border-color: var(--color-primary-border); // @presenter Color
+  --mobile-menu-login-button-border-radius: var(--border-radius-md); // @presenter Spacing
+  --mobile-menu-login-button-font-size: var(--font-size-base); // @presenter FontSize
+  --mobile-menu-login-button-font-family: inherit; // @presenter FontFamily
+  --mobile-menu-login-button-font-weight: var(--font-weight-bold); // @presenter FontWeight
+  --mobile-menu-login-button-line-height: var(--line-height-base); // @presenter LineHeight
 
+  /**
+      * @tokens Mobile Menu Product
+      * */
+  --mobile-menu-product-name-color: var(--mobile-menu-item-text-color);
+  --mobile-menu-product-name-border-radius: var(--mobile-menu-item-radius);
+  --mobile-menu-product-name-border: 1px solid var(--border-secondary);
+  --mobile-menu-product-name-padding: var(--sidebar-item-padding-vertical) var(--sidebar-item-padding-horizontal);
+  --mobile-menu-product-name-margin: var(--spacing-sm) var(--spacing-xs) 0 var(--spacing-xs);
+  
   // @tokens End
 `;
 
@@ -79,10 +95,5 @@ export const menu = css`
   --menu-item-label-margin: 0 var(--sidebar-margin-horizontal);
   --menu-item-label-padding: var(--sidebar-item-padding-vertical) var(--sidebar-item-padding-horizontal);
 
-  --menu-product-name-color: var(--mobile-menu-item-text-color);
-  --menu-product-name-border-radius: var(--mobile-menu-item-radius);
-  --menu-product-name-border-color: 1px solid rgba(0, 0, 0, 0.06);
-  --menu-product-name-padding: var(--sidebar-item-padding-vertical) var(--sidebar-item-padding-horizontal);
-  --menu-product-name-margin: var(--spacing-sm) var(--spacing-xs) 0 var(--spacing-xs);
   // @tokens End
 `;

package/src/components/Navbar/NavbarItem.tsx

@@ -11,6 +11,7 @@ import type {
 } from '@theme/types/portal';
 import { useI18nConfig, useTranslate } from '@portal/hooks';
 import { withPathPrefix } from '@theme/utils';
+import { telemetry } from '@portal/telemetry';
 import { Dropdown } from '@theme/components/Dropdown';
 
 export interface NavbarItemProps {
@@ -34,6 +35,7 @@ export function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element
         active={isActive}
         data-component-name="Navbar/NavbarItem"
         className={className}
+        onClick={() => telemetry.send('navbar_menu_item_clicked', { type: 'link' })}
       >
         <NavbarLink to={item.link} external={item.external} target={item.target} active={isActive}>
           {item.icon ? <NavbarIcon url={item.icon} /> : null}
@@ -58,6 +60,7 @@ export function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element
           active={false}
           data-component-name="Navbar/NavbarItem"
           className={className}
+          onClick={() => telemetry.send('navbar_menu_item_clicked', { type: 'group' })}
         >
           <NavbarIcon url={item.icon} />
           <NavbarLabel>{translate(item.labelTranslationKey, item.label)}</NavbarLabel>
@@ -92,19 +95,25 @@ export const NavbarMenuItem = styled.li<{ active?: boolean }>`
   padding: var(--navbar-item-padding-vertical) var(--navbar-item-padding-horizontal);
   text-align: center;
   line-height: var(--navbar-item-line-height);
-  border-radius: var(--navbar-item-border-radius);
   font-weight: var(--navbar-item-font-weight);
 
+  border-radius: var(--navbar-item-border-radius);
+  border-bottom: ${({ active }) =>
+    active ? 'var(--navbar-item-active-bottom-border)' : 'var(--navbar-item-bottom-border)'};
+
   background: ${({ active }) => active && 'var(--navbar-item-active-background-color)'};
   color: ${({ active }) =>
     active ? 'var(--navbar-item-active-text-color)' : 'var(--navbar-text-color)'};
+
   &:hover {
     color: var(--navbar-item-hover-text-color);
     text-decoration: var(--navbar-item-hover-text-decoration);
+    border-bottom: ${({ active }) => !active && 'var(--navbar-item-hover-bottom-border)'};
     background: ${({ active }) =>
       active
         ? 'var(--navbar-item-active-background-color)'
         : 'var(--navbar-item-hover-background-color)'};
+
     ${NavbarLink} {
       color: var(--navbar-item-hover-text-color);
       text-decoration: var(--navbar-item-hover-text-decoration);

package/src/components/Navbar/styledVariables.ts

@@ -20,16 +20,19 @@ export const navbar = css`
 
   --navbar-item-active-text-color: var(--text-primary);
   --navbar-item-active-text-decoration: none;
+  --navbar-item-active-bottom-border: 2px solid var(--navbar-item-active-text-color);
 
   --navbar-item-padding-vertical: var(--spacing-xxs);
   --navbar-item-padding-horizontal: var(--spacing-sm);
   --navbar-item-line-height: var(--line-height-base);
-  --navbar-item-border-radius: 32px;
-  --navbar-item-active-background-color: var(--bg-sunken);
+  --navbar-item-active-background-color: none;
+  --navbar-item-border-radius: 0;
+  --navbar-item-bottom-border: 2px solid transparent;
 
   --navbar-item-hover-text-color: var(--text-primary);
   --navbar-item-hover-text-decoration: none;
   --navbar-item-hover-background-color: none;
+  --navbar-item-hover-bottom-border: 2px solid var(--border-primary);
 
   --navbar-item-icon-width: 1.5em; // @presenter Spacing
   --navbar-item-icon-height: 1.5em; // @presenter Spacing

package/src/components/NavbarLogo/NavbarLogo.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import { Link } from '@portal/Link';
 import type { LogoConfig } from '@theme/types/portal';
 import { Image } from '@theme/components/Image/Image';
+import { telemetry } from '@portal/telemetry';
 
 export type NavbarLogoProps = {
   logo: Pick<LogoConfig, 'image' | 'link' | 'altText' | 'srcSet'>;
@@ -18,7 +19,17 @@ export function NavbarLogo({ logo, className }: NavbarLogoProps): JSX.Element |
     <Image className={className} src={logo.image} srcSet={logo.srcSet} alt={logo.altText} />
   );
 
-  return <LogoContainer>{logo.link ? <Link to={logo.link}>{img}</Link> : img}</LogoContainer>;
+  return (
+    <LogoContainer>
+      {logo.link ? (
+        <Link to={logo.link} onClick={() => telemetry.send('logo_clicked', {})}>
+          {img}
+        </Link>
+      ) : (
+        img
+      )}
+    </LogoContainer>
+  );
 }
 
 export const LogoContainer = styled.div.attrs({

package/src/components/NavbarLogo/index.ts

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

package/src/components/NavbarLogo/styledVariables.ts

@@ -0,0 +1,15 @@
+import { css } from "styled-components";
+
+export const logo = css`
+  /**
+    * @tokens Logo
+    */
+
+  --navbar-logo-height: 2rem; // @presenter Spacing
+  --navbar-logo-width: auto;
+  --navbar-logo-margin: 16px; // @presenter Spacing
+  --navbar-logo-max-width: 285px; // @presenter Spacing
+  --navbar-logo-max-height: 285px; // @presenter Spacing
+
+  // @tokens End
+`;

package/src/components/Panel/styledVariables.ts

@@ -195,7 +195,7 @@ export const apiReferencePanels = css`
   --panel-heading-font-family: var(--font-family-base); // @presenter FontFamily
   --panel-heading-font-size: 18px; // @presenter FontSize
   --panel-heading-font-weight: var(--font-weight-bold); // @presenter FontWeight
-  --panel-heading-text-color: vat(--text-primary);
+  --panel-heading-text-color: var(--text-primary);
   --panel-heading-padding: var(--spacing-base);
   --panel-heading-line-height: 1; // @presenter LineHeight
   --panel-heading-white-space: 'nowrap';
@@ -208,7 +208,7 @@ export const apiReferencePanels = css`
   --panel-body-font-family: var(--font-family-base); // @presenter FontFamily
   --panel-body-font-size: var(--font-size-base); // @presenter FontSize
   --panel-body-font-weight: var(--font-weight-regular); // @presenter FontWeight
-  --panel-body-text-color: vat(--text-secondary);
+  --panel-body-text-color: var(--text-secondary);
   --panel-body-padding: var(--spacing-base);
   --panel-body-border: 1px solid var(--border-primary);
 
@@ -431,7 +431,7 @@ export const apiReferencePanels = css`
   --panel-try-it-tabs-disabled-text-color: var(--text-placeholder); // @presenter Color
 
   --panel-try-it-tabs-background-color: none; // @presenter Color
-  --panel-try-it-tabs-hover-background-color: var(--bg-raised);; // @presenter Color
+  --panel-try-it-tabs-hover-background-color: var(--bg-raised); // @presenter Color
   --panel-try-it-tabs-active-background-color: var(--bg-base); // @presenter Color
   --panel-try-it-tabs-disabled-background-color: none; // @presenter Color
 
@@ -476,12 +476,4 @@ export const apiReferencePanels = css`
   --panel-try-it-border: 1px solid var(--border-primary); // @presenter Border
 
   // @tokens End
-
-  // TODO PUL RIGHT section - related to pull right - fix later
-
-  --samples-panel-markdown-background-color: #3c4c5a;
-  --samples-panel-markdown-border-color: #46596a;
-
-  --layout-right-rail-width: 50%;
-  --layout-right-rail-background-color: transparent;
 `;

package/src/components/Profile/LoginLink.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 
 import { useThemeConfig } from '@theme/hooks/useThemeConfig';
 import { useTranslate } from '@portal/hooks';
+import { telemetry } from '@portal/telemetry';
 
 export interface LoginLinkProps {
   href: string;
@@ -16,7 +17,13 @@ export function LoginLink({ href }: LoginLinkProps): JSX.Element {
   };
 
   return (
-    <StyledLink href={href} data-translation-key={translationKeys.login}>
+    <StyledLink
+      href={href}
+      data-translation-key={translationKeys.login}
+      onClick={() => {
+        telemetry.send('login_button_clicked', {});
+      }}
+    >
       {translate(translationKeys.login, userProfile?.loginLabel || 'Login')}
     </StyledLink>
   );

package/src/components/Profile/MobileUserProfile.tsx

@@ -6,6 +6,7 @@ import { LogoutIcon } from '@theme/icons/LogoutIcon';
 import { useThemeConfig } from '@theme/hooks/useThemeConfig';
 import { useTranslate } from '@portal/hooks';
 import { UserProfileData } from '@theme/components/Profile/UserProfileData';
+import { telemetry } from '@portal/telemetry';
 
 export function MobileUserProfile() {
   const { userProfile } = useThemeConfig();
@@ -20,13 +21,22 @@ export function MobileUserProfile() {
   return (
     <MobileProfileWrapper data-component-name="Navbar/MobileUserProfile">
       {!userData?.isAuthenticated ? (
-        <LoginButton href={loginUrl} data-cy="login-btn">
+        <LoginButton
+          href={loginUrl}
+          data-cy="login-btn"
+          onClick={() => telemetry.send('login_button_clicked', {})}
+        >
           {translate(translationKeys.login, userProfile?.loginLabel || 'Login')}
         </LoginButton>
       ) : (
         <>
           <UserProfileData userData={userData} />
-          <LogoutButton onClick={() => handleLogout()}>
+          <LogoutButton
+            onClick={() => {
+              handleLogout();
+              telemetry.send('logout_menu_item_clicked', {});
+            }}
+          >
             <LogoutIcon />
           </LogoutButton>
         </>
@@ -36,16 +46,23 @@ export function MobileUserProfile() {
 }
 const LoginButton = styled.a`
   background: var(--mobile-menu-login-button-background);
-  border-radius: 6px;
+  border-radius: var(--mobile-menu-login-button-border-radius);
   width: 100%;
   margin: 0;
   padding: 5px 0;
   color: var(--mobile-menu-login-button-color);
-  font-size: var(--font-size-base);
+  border: 1px solid var(--mobile-menu-login-button-border-color);
+  font-size: var(--mobile-menu-login-button-font-size);
+  font-family: var(--mobile-menu-login-button-font-family);
+  font-weight: var(--mobile-menu-login-button-font-weight);
   text-align: center;
-  line-height: 22px;
+  line-height: var(--mobile-menu-login-button-line-height);
   cursor: pointer;
   text-decoration: none;
+
+  &:hover {
+    color: var(--mobile-menu-login-button-hover-color);
+  }
 `;
 
 const MobileProfileWrapper = styled.div`

package/src/components/Profile/UserProfile.tsx

@@ -7,6 +7,7 @@ import { Profile } from '@theme/components/Profile/Profile';
 import { Link } from '@portal/Link';
 import { useThemeConfig } from '@theme/hooks/useThemeConfig';
 import { useTranslate } from '@portal/hooks';
+import { telemetry } from '@portal/telemetry';
 import { Dropdown, DropdownList, DropdownListItem } from '@theme/components/Dropdown';
 import { UserProfileData } from '@theme/components/Profile/UserProfileData';
 import { LogoutIcon } from '@theme/icons';
@@ -51,7 +52,10 @@ export function UserProfile({
 
   menuItems.push(
     <Logout
-      onClick={() => handleLogout()}
+      onClick={() => {
+        handleLogout();
+        telemetry.send('logout_menu_item_clicked', {});
+      }}
       data-translation-key={translationKeys.logout}
       role="link"
     >

package/src/components/Search/ProductTag.tsx

@@ -29,7 +29,7 @@ const Wrapper = styled.div`
   background: var(--bg-overlay);
   border: 1px solid var(--border-secondary);
   border-radius: var(--border-radius-xlg);
-  margin-right: 16px;
+  margin-right: var(--spacing-base);
 `;
 
 const Label = styled.span`

package/src/components/Select/Select.tsx

@@ -72,9 +72,7 @@ export const Select = ({
       onClick={triggerEvent === 'click' ? handleToggle : undefined}
     >
       <SelectInput>
-        {!onlyIcon && (
-          <SelectInputValue withIcon={withArrow || !!icon}>{_selected}</SelectInputValue>
-        )}
+        {!onlyIcon && <SelectInputValue>{_selected}</SelectInputValue>}
         {icon}
         {withArrow ? isOpen ? <ArrowIcon direction="up" /> : <ArrowIcon direction="down" /> : null}
       </SelectInput>
@@ -113,11 +111,12 @@ export const SelectInput = styled.div`
   border-radius: var(--select-input-border-radius);
   padding: var(--select-input-padding-vertical) var(--select-input-padding-horizontal);
   cursor: pointer;
+  gap: 8px;
 `;
 
-export const SelectInputValue = styled.div<{ withIcon?: boolean }>`
+export const SelectInputValue = styled.div`
   pointer-events: none;
-  ${({ withIcon }) => (withIcon ? 'margin-right: 8px;' : '')}
+  min-width: 0;
 `;
 
 export const SelectList = styled.ul<{ placement?: string; alignment?: string }>`
@@ -128,7 +127,9 @@ export const SelectList = styled.ul<{ placement?: string; alignment?: string }>`
   right: ${({ alignment }) => (alignment === 'end' ? '0' : 'auto')};
   margin: 0;
   min-width: var(--select-list-min-width);
+  width: 100%;
   max-width: var(--select-list-max-width);
+  ${({ placement }) => (!placement || placement === 'bottom' ? 'margin-top: 2px' : '')};
   padding: var(--select-list-padding);
   background-color: var(--select-list-background-color);
   border-radius: var(--select-list-border-radius);

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

@@ -15,18 +15,12 @@ export const SeparatorItem = styled(MenuItemLabel).attrs<{ className?: string }>
   text-transform: var(--sidebar-item-separator-text-transform);
   background: var(--mobile-menu-background);
   border-radius: 0;
-  border-top: var(--sidebar-item-separator-border-width) solid
-    var(--sidebar-item-separator-border-color);
-  padding-top: var(--sidebar-item-separator-padding-top);
+  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: 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);
+  }
 `;