Skip to content

Commit

Permalink
feature Update tabs-item.tsx (#658)
Browse files Browse the repository at this point in the history 
* feat(tabs): display hover effect by styles

Add highlight on Tabs component #653

* feat: redesign the render mode for tabs-item

* test(tabs): update snapshots for styles changes

* docs(tabs): append leftSpace attribute

Co-authored-by: nikhilgupta58 <nikhil@tartanhq.com>
Co-authored-by: unix <unix.bio@gmail.com>
  • Loading branch information
@nikhilgupta58 @unix
3 people authored Jan 11, 2022
1 parent 28e4e3f commit b463fbe
Show file tree
Hide file tree
Showing 6 changed files with 168 additions and 99 deletions.
152 changes: 101 additions & 51 deletions components/tabs/__tests__/__snapshots__/index.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,27 +3,47 @@
exports[`Tabs should render correctly 1`] = `
"<div class=\\"tabs \\"><header><div class=\\"scroll-container \\"><div class=\\"tab \\" role=\\"button\\">label1<style>
.tab {
position: relative;
box-sizing: border-box;
cursor: pointer;
outline: 0;
transition: all 200ms ease;
text-transform: capitalize;
white-space: nowrap;
color: #444;
background-color: transparent;
color: #666;
user-select: none;
display: flex;
align-items: center;
position: relative;
font-size: calc(1 * 16px);
line-height: 1.25em;
font-size: calc(0.875 * 16px);
line-height: normal;
width: auto;
height: auto;
padding: calc(0.334 * 16px) calc(0.218 * 16px) calc(0.334 * 16px)
calc(0.218 * 16px);
margin: 0 calc(0.5334 * 16px) 0
calc(0.5334 * 16px);
padding: calc(0.875 * 16px) calc(0.55 * 16px) calc(0.875 * 16px)
calc(0.55 * 16px);
margin: 0 calc(0.2 * 16px) 0 calc(0.2 * 16px);
z-index: 1;
--tabs-item-hover-left: calc(-1 * calc(0.28 * 16px));
--tabs-item-hover-right: calc(-1 * calc(0.28 * 16px));
}
.tab:before {
position: absolute;
top: calc(0.48 * 16px);
left: var(--tabs-item-hover-left);
right: var(--tabs-item-hover-right);
bottom: calc(0.48 * 16px);
content: '';
z-index: -1;
transition: opacity 150ms ease;
background-color: transparent;
border-radius: 4px;
}
.tab:hover::before {
background-color: #eaeaea;
}
.tab:hover {
color: #000;
}
.tab:after {
position: absolute;
content: '';
Expand All @@ -34,55 +54,71 @@ exports[`Tabs should render correctly 1`] = `
height: 2px;
border-radius: 4px;
transform: scaleX(0.75);
background-color: transparent;
transition: all 200ms ease;
background-color: #000;
transition: opacity, transform 200ms ease-in;
opacity: 0;
}
.tab.active:after {
background-color: #000;
opacity: 1;
transform: scaleX(1);
}
.tab :global(svg) {
max-height: 1em;
margin-right: 5px;
}
.tab:first-of-type {
margin-left: 0;
}
.tab.active {
color: #000;
}
.tab.disabled {
color: #999;
cursor: not-allowed;
}
</style></div><div class=\\"tab \\" role=\\"button\\">label2<style>
.tab {
position: relative;
box-sizing: border-box;
cursor: pointer;
outline: 0;
transition: all 200ms ease;
text-transform: capitalize;
white-space: nowrap;
color: #444;
background-color: transparent;
color: #666;
user-select: none;
display: flex;
align-items: center;
position: relative;
font-size: calc(1 * 16px);
line-height: 1.25em;
font-size: calc(0.875 * 16px);
line-height: normal;
width: auto;
height: auto;
padding: calc(0.334 * 16px) calc(0.218 * 16px) calc(0.334 * 16px)
calc(0.218 * 16px);
margin: 0 calc(0.5334 * 16px) 0
calc(0.5334 * 16px);
padding: calc(0.875 * 16px) calc(0.55 * 16px) calc(0.875 * 16px)
calc(0.55 * 16px);
margin: 0 calc(0.2 * 16px) 0 calc(0.2 * 16px);
z-index: 1;
--tabs-item-hover-left: calc(-1 * calc(0.28 * 16px));
--tabs-item-hover-right: calc(-1 * calc(0.28 * 16px));
}
.tab:before {
position: absolute;
top: calc(0.48 * 16px);
left: var(--tabs-item-hover-left);
right: var(--tabs-item-hover-right);
bottom: calc(0.48 * 16px);
content: '';
z-index: -1;
transition: opacity 150ms ease;
background-color: transparent;
border-radius: 4px;
}
.tab:hover::before {
background-color: #eaeaea;
}
.tab:hover {
color: #000;
}
.tab:after {
position: absolute;
content: '';
Expand All @@ -93,28 +129,24 @@ exports[`Tabs should render correctly 1`] = `
height: 2px;
border-radius: 4px;
transform: scaleX(0.75);
background-color: transparent;
transition: all 200ms ease;
background-color: #000;
transition: opacity, transform 200ms ease-in;
opacity: 0;
}
.tab.active:after {
background-color: #000;
opacity: 1;
transform: scaleX(1);
}
.tab :global(svg) {
max-height: 1em;
margin-right: 5px;
}
.tab:first-of-type {
margin-left: 0;
}
.tab.active {
color: #000;
}
.tab.disabled {
color: #999;
cursor: not-allowed;
Expand Down Expand Up @@ -144,6 +176,7 @@ exports[`Tabs should render correctly 1`] = `
flex-wrap: nowrap;
align-items: center;
border-bottom: 1px solid #eaeaea;
padding-left: 20px;
}
header::-webkit-scrollbar {
display: none;
Expand All @@ -160,27 +193,47 @@ exports[`Tabs should render correctly 1`] = `
exports[`Tabs should work correctly with different styles 1`] = `
"<div class=\\"tabs \\"><header><div class=\\"scroll-container hide-divider\\"><div class=\\"tab \\" role=\\"button\\">label1<style>
.tab {
position: relative;
box-sizing: border-box;
cursor: pointer;
outline: 0;
transition: all 200ms ease;
text-transform: capitalize;
white-space: nowrap;
color: #444;
background-color: transparent;
color: #666;
user-select: none;
display: flex;
align-items: center;
position: relative;
font-size: calc(1 * 16px);
line-height: 1.25em;
font-size: calc(0.875 * 16px);
line-height: normal;
width: auto;
height: auto;
padding: calc(0.334 * 16px) calc(0.218 * 16px) calc(0.334 * 16px)
calc(0.218 * 16px);
margin: 0 calc(0.5334 * 16px) 0
calc(0.5334 * 16px);
padding: calc(0.875 * 16px) calc(0.55 * 16px) calc(0.875 * 16px)
calc(0.55 * 16px);
margin: 0 calc(0.2 * 16px) 0 calc(0.2 * 16px);
z-index: 1;
--tabs-item-hover-left: calc(-1 * calc(0.28 * 16px));
--tabs-item-hover-right: calc(-1 * calc(0.28 * 16px));
}
.tab:before {
position: absolute;
top: calc(0.48 * 16px);
left: var(--tabs-item-hover-left);
right: var(--tabs-item-hover-right);
bottom: calc(0.48 * 16px);
content: '';
z-index: -1;
transition: opacity 150ms ease;
background-color: transparent;
border-radius: 4px;
}
.tab:hover::before {
background-color: #eaeaea;
}
.tab:hover {
color: #000;
}
.tab:after {
position: absolute;
content: '';
Expand All @@ -191,28 +244,24 @@ exports[`Tabs should work correctly with different styles 1`] = `
height: 2px;
border-radius: 4px;
transform: scaleX(0.75);
background-color: transparent;
transition: all 200ms ease;
background-color: #000;
transition: opacity, transform 200ms ease-in;
opacity: 0;
}
.tab.active:after {
background-color: #000;
opacity: 1;
transform: scaleX(1);
}
.tab :global(svg) {
max-height: 1em;
margin-right: 5px;
}
.tab:first-of-type {
margin-left: 0;
}
.tab.active {
color: #000;
}
.tab.disabled {
color: #999;
cursor: not-allowed;
Expand Down Expand Up @@ -242,6 +291,7 @@ exports[`Tabs should work correctly with different styles 1`] = `
flex-wrap: nowrap;
align-items: center;
border-bottom: 1px solid #eaeaea;
padding-left: 20px;
}
header::-webkit-scrollbar {
display: none;
Expand Down
4 changes: 2 additions & 2 deletions components/tabs/tabs-context.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React from 'react'
import React, { CSSProperties } from 'react'

export type TabsInternalCellProps = {
value: string | undefined
onClick: (value: string) => void
}

Expand All @@ -16,6 +15,7 @@ export interface TabsConfig {
register?: (item: TabsHeaderItem) => void
currentValue?: string
inGroup: boolean
leftSpace?: CSSProperties
}

const defaultContext = {
Expand Down
Loading

0 comments on commit b463fbe

Please sign in to comment.