feat(CNav): add enclosed variants

Author: mrholek

packages/coreui-react/src/components/nav/CNav.tsx

@@ -21,7 +21,7 @@ export interface CNavProps
   /**
    * Set the nav variant to tabs or pills.
    */
-  variant?: 'pills' | 'tabs' | 'underline' | 'underline-border'
+  variant?: 'enclosed' | 'enclosed-pills' | 'pills' | 'tabs' | 'underline' | 'underline-border'
 }
 
 export const CNav: PolymorphicRefForwardingComponent<'ul', CNavProps> = forwardRef<
@@ -32,11 +32,12 @@ export const CNav: PolymorphicRefForwardingComponent<'ul', CNavProps> = forwardR
     <Component
       className={classNames(
         'nav',
+        variant === 'enclosed-pills' && 'nav-enclosed', // Enclosed pills variant required for `.nav-enclosed` class
         {
           [`nav-${layout}`]: layout,
           [`nav-${variant}`]: variant,
         },
-        className,
+        className
       )}
       role="navigation"
       {...rest}
@@ -52,7 +53,14 @@ CNav.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   layout: PropTypes.oneOf(['fill', 'justified']),
-  variant: PropTypes.oneOf(['pills', 'tabs', 'underline', 'underline-border']),
+  variant: PropTypes.oneOf([
+    'enclosed',
+    'enclosed-pills',
+    'pills',
+    'tabs',
+    'underline',
+    'underline-border',
+  ]),
 }
 
 CNav.displayName = 'CNav'

packages/docs/content/components/navs-tabs/examples/NavEnclosedExample.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { CNav, CNavItem, CNavLink } from '@coreui/react'
+
+export const NavEnclosedExample = () => {
+  return (
+    <CNav variant="enclosed">
+      <CNavItem>
+        <CNavLink href="#" active>Active</CNavLink>
+      </CNavItem>
+      <CNavItem>
+        <CNavLink href="#">Link</CNavLink>
+      </CNavItem>
+      <CNavItem>
+        <CNavLink href="#">Link</CNavLink>
+      </CNavItem>
+      <CNavItem>
+        <CNavLink href="#" disabled>Disabled</CNavLink>
+      </CNavItem>
+    </CNav>
+  )
+}

packages/docs/content/components/navs-tabs/examples/NavEnclosedPillsExample.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { CNav, CNavItem, CNavLink } from '@coreui/react'
+
+export const NavEnclosedPillsExample = () => {
+  return (
+    <CNav variant="enclosed-pills">
+      <CNavItem>
+        <CNavLink href="#" active>Active</CNavLink>
+      </CNavItem>
+      <CNavItem>
+        <CNavLink href="#">Link</CNavLink>
+      </CNavItem>
+      <CNavItem>
+        <CNavLink href="#">Link</CNavLink>
+      </CNavItem>
+      <CNavItem>
+        <CNavLink href="#" disabled>Disabled</CNavLink>
+      </CNavItem>
+    </CNav>
+  )
+}

packages/docs/content/components/navs-tabs/index.mdx

@@ -64,6 +64,19 @@ Take that same code, but use `variant="underline-border"` instead:
 
 <ExampleSnippet component="NavUnderlineBorderExample" componentName="React Nav" />
 
+### Enclosed
+
+Use the `variant="enclosed"` class to give your navigation items a subtle border and rounded styling.
+
+<ExampleSnippet component="NavEnclosedExample" componentName="React Nav" />
+
+### Enclosed pills 
+
+Use the `variant="enclosed-pills"` to achieve a pill-style appearance for each nav item, using pill-shaped borders and smoother outlines.
+
+<ExampleSnippet component="NavEnclosedPillsExample" componentName="React Nav" />
+
+
 ### Fill and justify
 
 Force your `<CNav>`'s contents to extend the full available width one of two modifier classes. To proportionately fill all available space with your `.nav-item`s, use `layout="fill"`. Notice that all horizontal space is occupied, but not every nav item has the same width.