Skip to content

Commit

Permalink
kup-tab-bar : design and token application
Browse files Browse the repository at this point in the history
  • Loading branch information
@Leonardo-Signorelli
Leonardo-Signorelli committed Feb 26, 2024
1 parent a0ce48c commit 3efde59
Show file tree
Hide file tree
Showing 4 changed files with 166 additions and 52 deletions.
10 changes: 10 additions & 0 deletions packages/ketchup/src/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3467,6 +3467,11 @@ export namespace Components {
* @default null
*/
"data": KupTabBarNode[];
/**
* Defaults at false. When set to true, the component is dense.
* @default false
*/
"dense": boolean;
/**
* Used to retrieve component's props values.
* @param descriptions - When provided and true, the result will be the list of props with their description.
Expand Down Expand Up @@ -7989,6 +7994,11 @@ declare namespace LocalJSX {
* @default null
*/
"data"?: KupTabBarNode[];
/**
* Defaults at false. When set to true, the component is dense.
* @default false
*/
"dense"?: boolean;
/**
* Triggered when the tab loses focus.
*/
Expand Down
126 changes: 86 additions & 40 deletions packages/ketchup/src/components/kup-tab-bar/kup-tab-bar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,22 +9,34 @@
*/

:host {
--kup_tabbar_font_family: var(
--kup-tabbar-font-family,
var(--kup-font-family)
--kup_tabindicator_border_bottom_color: var(
--kup-tab-indicator-border-bottom-color,
var(--kup-gray-color-20)
);
--kup_tabindicator_border_bottom_color_active: var(
--kup-tabindicator-border-bottom-color-active,
var(--kup-primary-color-60)
);
--kup_tabbar_text_color: var(
--kup-tabbar-text-color,
var(--kup-gray-color-70)
);
--kup_tabbar_text_color_active: var(
--kup-tabbar-text-color-active,
var(--kup-gray-color-90)
);
--kup_tabbar_border_color_dense: var(
--kup-tabbar-border-color-dense,
var(--kup-gray-color-50)
);

--kup_tabbar_font_size: var(--kup-tabbar-font-size, var(--kup-font-size));
--kup_tabbar_font_weight: var(--kup-tabbar-font-weight, 500);
--kup_tabbar_height: var(--kup-tabbar-height, 36px);
--kup_tabbar_primary_color: var(
--kup-tabbar-primary-color,
var(--kup-primary-color)
);
--kup_tabbar_primary_color_rgb: var(
--kup-tabbar-primary-color-rgb,
var(--kup-primary-color-rgb)
--kup_tabbar_tab_padding: var(
--kup-tabbar-tab-padding,
0 var(--kup-space-05)
);
--kup_tabbar_tab_padding: var(--kup-tabbar-tab-padding, 0 24px);

display: block;
font-size: var(--kup_tabbar_font_size);
Expand All @@ -48,63 +60,105 @@
flex: 1 0 auto;
transform: none;
will-change: transform;
gap: 2px;
}
}

// add the disabled status on specific field
.tab {
-webkit-font-smoothing: antialiased;
padding: var(--kup_tabbar_tab_padding);
min-width: 90px;
position: relative;
display: flex;
flex: 1 0 auto;
justify-content: center;
box-sizing: border-box;
gap: 8px;
margin: 0px;
border: none;
outline: none;
outline: 2px solid transparent;
outline-offset: -2px;
background: none;
text-align: center;
text-align: left;
white-space: nowrap;
cursor: pointer;
appearance: none;
z-index: 1;
height: var(--kup_tabbar_height);
font-family: var(--kup_tabbar_font_family);
font-size: 0.875em;
font-weight: var(--kup_tabbar_font_weight);
letter-spacing: 0.0892857143em;
text-transform: uppercase;
&:focus {
outline: 2px solid var(--kup_tabindicator_border_bottom_color_active);
}

.tab__icon + .tab__text-label {
padding-left: 8px;
padding-right: 0px;
@include kup-body-compact-01;
}

.tab__icon .f-image__icon {
background: var(--kup_tabbar_text_color) !important;
}

&:hover {
background-color: rgba(var(--kup_tabbar_primary_color_rgb), 0.075);
.tab-indicator .tab-indicator__content--underline {
--kup_tabindicator_border_bottom_color: var(--kup-gray-color-50);
}
}
&.tab--active {
.tab__content {
.tab__icon {
transition-delay: 100ms;
}
.tab__text-label {
transition-delay: 100ms;
@include kup-heading-compact-01;
}
}
}
&[disabled] {
--kup_tabindicator_border_bottom_color: var(--kup-gray-color-30);
--kup_tabbar_text_color: var(--kup-gray-color-30);
pointer-events: none;
}
&.kup-dense {
background: var(--kup-gray-color-20);
border-right: 1px solid var(--kup_tabbar_border_color_dense);
&.tab--active {
background: var(--kup-gray-color-10);
}
&:hover {
background: var(--kup-gray-color-30);
}
.tab-indicator {
height: 2px;
border-color: transparent;
}
.tab-indicator--active .tab-indicator__content {
border-color: var(--kup_tabindicator_border_bottom_color_active);
}
}
}

.tab__content {
position: relative;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
justify-content: space-between;
height: inherit;
pointer-events: none;
gap: var(--kup-space-03);

.tab__icon {
transition: color 150ms linear 0s;
width: 24px;
height: 24px;
font-size: 24px;
width: 16px;
height: 16px;
font-size: 16px;
z-index: 2;
margin: 0;

&.#{$kup-icon} {
background-color: var(--kup_tabbar_primary_color);
height: 24px;
width: 24px;
height: 16px;
width: 16px;
}
}

Expand All @@ -113,7 +167,8 @@
display: inline-block;
line-height: 1;
z-index: 2;
color: var(--kup_tabbar_primary_color);
color: var(--kup_tabbar_text_color);
min-width: 150px;
}
}

Expand All @@ -131,13 +186,12 @@
&.tab-indicator--active {
.tab-indicator__content {
opacity: 1;
border-color: var(--kup_tabindicator_border_bottom_color_active);
}
}

.tab-indicator__content {
border-color: var(--kup_tabbar_primary_color);
transform-origin: left center;
opacity: 0;

&.tab-indicator__content--underline {
align-self: flex-end;
Expand All @@ -146,18 +200,10 @@
border-top-style: solid;
border-top-width: 2px;
transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
color: var(--kup_tabindicator_border_bottom_color);
}
}
}

&.tab--active {
.tab__icon {
transition-delay: 100ms;
}
.tab__text-label {
transition-delay: 100ms;
}
}
}
}

Expand Down
27 changes: 16 additions & 11 deletions packages/ketchup/src/components/kup-tab-bar/kup-tab-bar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,11 +62,16 @@ export class KupTabBar {
* @default null
*/
@Prop() data: KupTabBarNode[] = null;
/**
* Defaults at false. When set to true, the component is dense.
* @default false
*/
@Prop() dense: boolean = false;
/**
* When enabled displays Material's ripple effect on item headers.
* @default true
*/
@Prop() ripple: boolean = true;
@Prop() ripple: boolean = false;

/*-------------------------------------------------*/
/* I n t e r n a l V a r i a b l e s */
Expand Down Expand Up @@ -286,10 +291,11 @@ export class KupTabBar {
tab: true,
'tab--active': node.active ? true : false,
'mdc-ripple-surface': this.ripple ? true : false,
'kup-dense': this.dense,
};

const tabEl: VNode = (
<button
<f-button
class={tabClass}
role="tab"
aria-selected={this.data[i].active ? true : false}
Expand All @@ -300,20 +306,19 @@ export class KupTabBar {
onFocus={() => this.onKupFocus(i, node)}
>
<span class="tab__content">
{node.value ? (
<span class="tab__text-label">
{this.data[i].value}
</span>
) : null}
{node.icon ? (
<FImage
color={`var(${KupThemeColorValues.PRIMARY})`}
resource={node.icon}
sizeX="24px"
sizeY="24px"
sizeX="16px"
sizeY="16px"
wrapperClass="tab__icon"
/>
) : null}
{node.value ? (
<span class="tab__text-label">
{this.data[i].value}
</span>
) : null}
</span>
<span
class={`tab-indicator ${
Expand All @@ -322,7 +327,7 @@ export class KupTabBar {
>
<span class="tab-indicator__content tab-indicator__content--underline"></span>
</span>
</button>
</f-button>
);
tabBar.push(tabEl);
}
Expand Down
55 changes: 54 additions & 1 deletion packages/ketchup/src/tab-bar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,15 @@
</style>
</head>
<body>
<script>
document.documentElement['ketchupInit'] = {
debug: { active: true },
};
</script>
<h4>Events testing</h4>
<kup-tab-bar id="event-tabbar"></kup-tab-bar>
<kup-tab-bar></kup-tab-bar>
<kup-tab-bar></kup-tab-bar>

<script>
let tabBar = document.getElementsByTagName('kup-tab-bar')[0];
Expand All @@ -63,7 +70,53 @@ <h4>Events testing</h4>
{
id: '4',
value: 'Iconless',
icon: '',
icon: 'alarm',
active: false,
},
];
let tabBar2 = document.getElementsByTagName('kup-tab-bar')[1];
tabBar2.data = [
{
id: '1',
icon: 'favorite',
active: true,
},
{
id: '2',
icon: 'alarm_on',
active: false,
},
{
id: '3',
icon: 'build',
active: false,
},
{
id: '4',
icon: 'alarm',
active: false,
},
];
let tabBar3 = document.getElementsByTagName('kup-tab-bar')[2];
tabBar3.data = [
{
id: '1',
value: 'Favorites',
active: true,
},
{
id: '2',
value: 'Alarm clock',
active: false,
},
{
id: '3',
value: 'Superlongtext',
active: false,
},
{
id: '4',
value: 'Settings',
active: false,
},
];
Expand Down

0 comments on commit 3efde59

Please sign in to comment.