feat(navbar): rename prop hairlines to outline

konstaui · Sep 8, 2022 · b18b1ea · b18b1ea
1 parent 9862c93
commit b18b1ea
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 14 deletions.
diff --git a/src/react/components/Navbar.jsx b/src/react/components/Navbar.jsx
@@ -27,7 +27,7 @@ const Navbar = forwardRef((props, ref) => {
 
     colors: colorsProp,
     translucent = true,
-    hairlines = true,
+    outline,
     medium,
     large,
     transparent,
@@ -159,14 +159,16 @@ const Navbar = forwardRef((props, ref) => {
     return destroyScroll;
   });
 
+  const isOutline = typeof outline === 'undefined' ? theme === 'ios' : outline;
+
   const c = themeClasses(
     NavbarClasses(
       {
         ...props,
         centerTitle:
           typeof centerTitle === 'undefined' ? theme === 'ios' : centerTitle,
         translucent,
-        hairlines,
+        outline: isOutline,
         fontSizeIos,
         fontSizeMaterial,
         titleFontSizeIos,

diff --git a/src/shared/classes/NavbarClasses.js b/src/shared/classes/NavbarClasses.js
@@ -3,7 +3,7 @@ import { positionClass } from '../position-class.js';
 
 export const NavbarClasses = (props, colors, classes) => {
   const {
-    hairlines,
+    outline,
     translucent,
     large,
     medium,
@@ -46,13 +46,10 @@ export const NavbarClasses = (props, colors, classes) => {
     bg: {
       common: cls(
         'absolute w-full h-full left-0 top-0',
+        outline && 'hairline-b',
         bgClassName || bgClass
       ),
-      ios: cls(
-        colors.bgIos,
-        hairlines && 'hairline-b',
-        translucent && 'translucent'
-      ),
+      ios: cls(colors.bgIos, translucent && 'translucent'),
       material: `${colors.bgMaterial}`,
     },
     subnavbar: {

diff --git a/src/svelte/components/Navbar.svelte b/src/svelte/components/Navbar.svelte
@@ -20,7 +20,7 @@
   let colorsProp = undefined;
   export { colorsProp as colors };
   export let translucent = true;
-  export let hairlines = true;
+  export let outline = undefined;
   export let centerTitle = undefined;
 
   export let medium = false;
@@ -60,6 +60,8 @@
 
   $: colors = NavbarColors(colorsProp, dark);
 
+  $: isOutline = typeof outline === 'undefined' ? theme === 'ios' : outline;
+
   let theme;
   theme = useTheme((v) => (theme = v));
 
@@ -76,7 +78,7 @@
         subnavbarClass,
         translucent,
         transparent,
-        hairlines,
+        outline: isOutline,
         fontSizeIos,
         fontSizeMaterial,
         titleFontSizeIos,

diff --git a/src/types/Navbar.d.ts b/src/types/Navbar.d.ts
@@ -122,11 +122,11 @@ interface Props {
    */
   translucent?: boolean;
   /**
-   * Renders outer hairlines (borders) on iOS theme
+   * Renders outer hairlines (borders). If not specified, will be enabled for iOS theme
    *
-   * @default true
+   * @default undefined
    */
-  hairlines?: boolean;
+  outline?: boolean;
 
   /**
    * Renders medium-sized navbar with extra row for medium-sized title which becomes usual size on scroll

diff --git a/src/vue/components/Navbar.vue b/src/vue/components/Navbar.vue
@@ -69,7 +69,7 @@
       centerTitle: { type: Boolean, default: undefined },
 
       translucent: { type: Boolean, default: true },
-      hairlines: { type: Boolean, default: true },
+      outline: { type: Boolean, default: undefined },
       medium: { type: Boolean, default: false },
       large: { type: Boolean, default: false },
       transparent: { type: Boolean, default: false },
@@ -109,10 +109,17 @@
         NavbarColors(props.colors || {}, useDarkClasses)
       );
 
+      const isOutline = computed(() =>
+        typeof props.outline === 'undefined'
+          ? theme.value === 'ios'
+          : props.outline
+      );
+
       const c = useThemeClasses(props, () =>
         NavbarClasses(
           {
             ...props,
+            outline: isOutline.value,
             left: ctx.slots.left,
             right: ctx.slots.right,
             centerTitle: