feat: add hairlines prop to where it is used

konstaui · Aug 26, 2021 · 21c5822 · 21c5822
1 parent a392310
commit 21c5822
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 14 deletions.
diff --git a/TODO.md b/TODO.md
@@ -1,10 +1,5 @@
-- Tooling
-
-  - Lint - double check rules
-
 - Components
 
-  - `hairline` prop everywhere it is used
   - navbar/toolbar
 
     - add text colors customization
@@ -20,3 +15,6 @@
 
   - add darktheme to provider (to exclude `dark:` classes from output)
   - rename themeClasses helpers to `c` `i` and `m`
+
+- React
+  - DTS
diff --git a/src/react/components/ListButton.jsx b/src/react/components/ListButton.jsx
@@ -13,6 +13,8 @@ const ListButton = (props) => {
     className,
     colors: colorsProp,
 
+    hairlines = true,
+
     // Link props
     href,
     target,
@@ -58,7 +60,8 @@ const ListButton = (props) => {
       button: {
         common: cls(
           positionClass('relative', className),
-          `flex items-center justify-center px-4 space-x-1 active:bg-opacity-15 w-full duration-300 active:duration-0 focus:outline-none hairline-b active:hairline-transparent ${colors.text} ${colors.activeBg} ${colors.touchRipple} overflow-hidden`
+          hairlines && 'hairline-b active:hairline-transparent',
+          `flex items-center justify-center px-4 space-x-1 active:bg-opacity-15 w-full duration-300 active:duration-0 focus:outline-none ${colors.text} ${colors.activeBg} ${colors.touchRipple} overflow-hidden`
         ),
         ios: 'h-11',
         material: 'h-12',

diff --git a/src/react/components/ListInput.jsx b/src/react/components/ListInput.jsx
@@ -23,6 +23,8 @@ const ListInput = (props) => {
     clearButton,
     dropdown,
 
+    hairlines = true,
+
     // input props
     inputId,
     inputStyle,
@@ -162,9 +164,11 @@ const ListInput = (props) => {
     inputWrap: {
       common: 'relative',
       ios: '-mb-2.5',
-      material: `hairline-b hairline-duration-200 ${getHairlineColor()} ${
-        isFocused || error ? 'hairline-b-scale' : ''
-      }`,
+      material: hairlines
+        ? `hairline-b hairline-duration-200 ${getHairlineColor()} ${
+            isFocused || error ? 'hairline-b-scale' : ''
+          }`
+        : '',
       inline: {
         common: `flex-shrink-10 w-full`,
         ios: '-mt-2.5',

diff --git a/src/react/components/ListItem.jsx b/src/react/components/ListItem.jsx
@@ -31,6 +31,8 @@ const ListItem = (props) => {
     menuListItem,
     menuListItemActive,
 
+    hairlines = true,
+
     // Enable divider
     divider,
     groupTitle,
@@ -99,7 +101,8 @@ const ListItem = (props) => {
           `flex items-center ${contentClassName}`
         ),
         link: cls(
-          'duration-300 active:duration-0 active:hairline-transparent cursor-pointer select-none',
+          'duration-300 active:duration-0 cursor-pointer select-none',
+          hairlines && 'active:hairline-transparent',
           needsTouchRipple &&
             'relative overflow-hidden dark:touch-ripple-white z-10',
           isMenuListItemActive
@@ -116,7 +119,7 @@ const ListItem = (props) => {
       inner: {
         common: cls(
           'pr-4 w-full relative',
-          !menuListItem && 'hairline-b',
+          !menuListItem && hairlines && 'hairline-b',
           innerClassName
         ),
         ios: 'py-2.5',
@@ -145,7 +148,7 @@ const ListItem = (props) => {
         common: `bg-list-divider-light dark:bg-list-divider-dark text-black dark:text-white text-opacity-55 dark:text-opacity-55 px-4 py-1 flex items-center z-10 ${
           divider ? 'relative' : 'sticky top-0'
         }`,
-        ios: `h-8 hairline-t -m-0.5`,
+        ios: `h-8${hairlines ? ' hairline-t' : ''} -m-0.5`,
         material: 'h-12',
       },
     },

diff --git a/src/react/components/Navbar.jsx b/src/react/components/Navbar.jsx
@@ -19,6 +19,7 @@ const Navbar = (props) => {
 
     colors: colorsProp,
     translucent = true,
+    hairlines = true,
 
     left,
     title,
@@ -57,7 +58,11 @@ const Navbar = (props) => {
       },
       bg: {
         common: cls('absolute w-full h-full left-0 top-0', bgClassName),
-        ios: cls(`hairline-b ${colors.bg}`, translucent && 'translucent'),
+        ios: cls(
+          colors.bg,
+          hairlines && 'hairline-b',
+          translucent && 'translucent'
+        ),
         material: `shadow-md ${colors.bg}`,
       },
       subnavbar: {

diff --git a/src/react/components/Toolbar.jsx b/src/react/components/Toolbar.jsx
@@ -14,6 +14,8 @@ const Toolbar = (props) => {
     bgClassName = '',
     innerClassName = '',
 
+    hairlines = true,
+
     tabbar,
     tabbarLabels,
 
@@ -59,7 +61,7 @@ const Toolbar = (props) => {
       bg: {
         common: cls('absolute w-full h-full left-0 top-0', bgClassName),
         ios: cls(
-          top ? 'hairline-b' : 'hairline-t',
+          hairlines && (top ? 'hairline-b' : 'hairline-t'),
           colors.bg,
           translucent && 'translucent'
         ),