Merge branch 'master' into 6236/date-time-picker-default

keystonejs · Aug 2, 2021 · cca1315 · cca1315
2 parents e16ced0 + bfd3909
commit cca1315
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 6 deletions.
diff --git a/.changeset/proud-impalas-flash.md b/.changeset/proud-impalas-flash.md
@@ -0,0 +1,5 @@
+---
+'@keystone-ui/segmented-control': patch
+---
+
+Fixed segmented-control focus style.
diff --git a/design-system/packages/segmented-control/src/SegmentedControl.tsx b/design-system/packages/segmented-control/src/SegmentedControl.tsx
@@ -124,10 +124,6 @@ export const SegmentedControl = ({
       <Root
         css={css`
           border: 1px solid #e1e5e9;
-          &:focus-within {
-            box-shadow: 0 0 0 2px #bfdbfe;
-            border: 1px solid #166bff;
-          }
         `}
         fill={fill}
         size={size}

diff --git a/docs/pages/docs/guides/custom-admin-ui-navigation.mdx b/docs/pages/docs/guides/custom-admin-ui-navigation.mdx
@@ -219,6 +219,12 @@ Keystone exposes a variety of helper components to make building out your custom
 
 This component renders containing markup around your navigation links, as well as as the different states of the `authenticatedItem` prop.
 
+```typescript
+type NavigationContainerProps = {
+  authenticatedItem?: AuthenticatedItem;
+}
+```
+
 !> For the shape of the `authenticatedItem` prop, please see the [Navigation Props](#navigation-props) section above.
 
 ```tsx

diff --git a/packages/keystone/src/admin-ui/components/Navigation.tsx b/packages/keystone/src/admin-ui/components/Navigation.tsx
@@ -125,7 +125,7 @@ const PopoverLink = ({ children, ...props }: AllHTMLAttributes<HTMLAnchorElement
   );
 };
 
-export type NavigationContainerProps = Pick<NavigationProps, 'authenticatedItem'> & {
+export type NavigationContainerProps = Partial<Pick<NavigationProps, 'authenticatedItem'>> & {
   children: ReactNode;
 };
 
@@ -139,7 +139,7 @@ export const NavigationContainer = ({ authenticatedItem, children }: NavigationC
         justifyContent: 'center',
       }}
     >
-      {authenticatedItem.state === 'authenticated' && (
+      {authenticatedItem?.state === 'authenticated' && (
         <AuthenticatedItem item={authenticatedItem} />
       )}
       <nav role="navigation" aria-label="Side Navigation" css={{ marginTop: spacing.xlarge }}>