Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Chip test #1792

Merged
merged 3 commits into from
Mar 5, 2024
Merged

Chip test #1792

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5c13d1e
kup-tree, kup-box
Leonardo-Signorelli Mar 1, 2024
533c623
kup-planner : functional redesign and token
Leonardo-Signorelli Mar 4, 2024
877c640
Kup-card-box fixes
Leonardo-Signorelli Mar 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions packages/ketchup/src/components/kup-badge/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,7 @@ Type: `Promise<void>`
- [kup-numeric-picker](../kup-numeric-picker)
- [kup-planner](../kup-planner)
- [kup-snackbar](../kup-snackbar)
- [kup-switcher](../kup-planner/utils/kup-switcher)
- [kup-tab-bar](../kup-tab-bar)
- [kup-text-field](../kup-text-field)
- [kup-time-picker](../kup-time-picker)
Expand Down Expand Up @@ -170,6 +171,7 @@ graph TD;
kup-numeric-picker --> kup-badge
kup-planner --> kup-badge
kup-snackbar --> kup-badge
kup-switcher --> kup-badge
style kup-badge fill:#f9f,stroke:#333,stroke-width:4px
```

Expand Down
10 changes: 5 additions & 5 deletions packages/ketchup/src/components/kup-box/styles/kup-box-classes.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,11 +65,11 @@
}
}

:host(:not(.#{$kup-class-borderless})) {
.box {
border: 1px solid var(--kup-border-color);
}
}
// :host(:not(.#{$kup-class-borderless})) {
// .box {
// border: 1px solid var(--kup-border-color);
// }
// }

:host(.#{$kup-class-flat-on-hover}) {
#box-container .box-wrapper .box:hover {
Expand Down
2 changes: 1 addition & 1 deletion packages/ketchup/src/components/kup-box/styles/kup-box-main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
--kup_box_color: var(--kup-box-color, var(--kup-text-color));
--kup_box_font_family: var(--kup-box-font-family, var(--kup-font-family));
--kup_box_font_size: var(--kup-box-font-size, var(--kup-font-size));
--kup_box_grid_gap: var(--kup-box-grid-gap, 1em);
--kup_box_grid_gap: var(--kup-box-grid-gap, var(--kup-space-05));
--kup_box_hover_box_shadow: var(
--kup-box-hover-box-shadow,
0px 0px 7.5px 0px rgba(128, 128, 128, 0.5)
Expand Down
8 changes: 4 additions & 4 deletions packages/ketchup/src/components/kup-card/box/kup-card-box-1.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
.box-layout-1 {
background-color: var(--kup-background-color);
color: var(--kup-text-color);
font-size: var(--kup-font-size);
padding: 0.5em;
background-color: var(--kup-gray-color-10);
color: var(--kup-gray-color-70);
padding: var(--kup-space-05);
@include kup-body-compact-01;

table {
width: 100%;
Expand Down
20 changes: 11 additions & 9 deletions packages/ketchup/src/components/kup-card/box/kup-card-box-2.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,25 @@
.box-layout-2 {
background-color: var(--kup-background-color);
color: var(--kup-text-color);
font-size: var(--kup-font-size);
padding: 0.5em;
background-color: var(--kup-gray-color-10);
color: var(--kup-gray-color-70);
padding: var(--kup-space-05);
@include kup-body-compact-01;

table {
width: 100%;
display: grid;
gap: var(--kup-space-05);
tr {
display: flex;
justify-content: space-between;
}
}

.label {
max-width: 50%;
overflow: hidden;
padding: 0.5em;
text-overflow: ellipsis;
white-space: nowrap;
}

.value {
padding: 0.5em;
font-weight: bold;
@include kup-heading-compact-01;
}
}
8 changes: 4 additions & 4 deletions packages/ketchup/src/components/kup-card/box/kup-card-box-3.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
.box-layout-3 {
background-color: var(--kup-background-color);
color: var(--kup-text-color);
font-size: var(--kup-font-size);
padding: 0.5em;
background-color: var(--kup-gray-color-10);
color: var(--kup-gray-color-70);
padding: var(--kup-space-05);
@include kup-body-compact-01;

.container {
display: flex;
Expand Down
8 changes: 4 additions & 4 deletions packages/ketchup/src/components/kup-card/box/kup-card-box-4.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
.box-layout-4 {
background-color: var(--kup-background-color);
color: var(--kup-text-color);
display: flex;
font-size: var(--kup-font-size);
height: 100%;
padding: 0.5em;
background-color: var(--kup-gray-color-10);
color: var(--kup-gray-color-70);
padding: var(--kup-space-05);
@include kup-body-compact-01;

.container {
margin: auto;
Expand Down
8 changes: 4 additions & 4 deletions packages/ketchup/src/components/kup-card/box/kup-card-box-5.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
.box-layout-5 {
background-color: var(--kup-background-color);
color: var(--kup-text-color);
display: flex;
font-size: var(--kup-font-size);
height: 100%;
padding: 1em 0.5em;
background-color: var(--kup-gray-color-10);
color: var(--kup-gray-color-70);
padding: var(--kup-space-05);
@include kup-body-compact-01;

.container {
display: flex;
Expand Down
8 changes: 4 additions & 4 deletions packages/ketchup/src/components/kup-card/box/kup-card-box-6.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
.box-layout-6 {
background-color: var(--kup-background-color);
color: var(--kup-text-color);
display: flex;
font-size: var(--kup-font-size);
height: 100%;
padding: 1em 0.5em;
background-color: var(--kup-gray-color-10);
color: var(--kup-gray-color-70);
padding: var(--kup-space-05);
@include kup-body-compact-01;

.container {
display: flex;
Expand Down
8 changes: 4 additions & 4 deletions packages/ketchup/src/components/kup-card/box/kup-card-box-7.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
.box-layout-7 {
background-color: var(--kup-background-color);
color: var(--kup-text-color);
display: flex;
font-size: var(--kup-font-size);
height: 100%;
padding: 1em 0.5em;
background-color: var(--kup-gray-color-10);
color: var(--kup-gray-color-70);
padding: var(--kup-space-05);
@include kup-body-compact-01;

.container {
height: 100%;
Expand Down
13 changes: 6 additions & 7 deletions packages/ketchup/src/components/kup-card/box/kup-card-box-8.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
.box-layout-8 {
background-color: var(--kup-background-color);
color: var(--kup-text-color);
display: flex;
font-size: var(--kup-font-size);
height: 100%;
padding: 1em 0.5em;
background-color: var(--kup-gray-color-10);
color: var(--kup-gray-color-70);
padding: var(--kup-space-05);
@include kup-body-compact-01;

.container {
height: 100%;
Expand All @@ -24,8 +24,7 @@
}

.value {
font-weight: bold;
padding-bottom: 1.25em;
@include kup-heading-compact-01;
}

tr:last-child {
Expand All @@ -36,7 +35,7 @@

.table {
box-sizing: border-box;
padding: 1.25em;
padding-top: var(--kup-space-05);
padding-bottom: 0;
}

Expand Down
6 changes: 5 additions & 1 deletion packages/ketchup/src/components/kup-data-table/styles/kup-data-table-main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,10 @@
--kup-datatable-background-color,
var(--kup-gray-color-10)
);
--kup_datatable_background_color_active: var(
--kup-datatable-background-color-active,
var(--kup-gray-color-20)
);
--kup_datatable_border: var(
--kup-datatable-border-color,
1px solid var(--kup-gray-color-20)
Expand Down Expand Up @@ -360,7 +364,7 @@ tbody {

&.selected {
td {
background-color: rgba(var(--kup-primary-color-rgb), 0.175);
background-color: var(--kup_datatable_background_color_active);
}
}

Expand Down
31 changes: 19 additions & 12 deletions packages/ketchup/src/components/kup-list/styles/kup-list-main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,21 @@
*/

:host {
--kup_list_background: var(--kup-list-background, var(--kup-gray-color-10));
--kup_list_background_hover: var(
--kup-list-background-hover,
--kup_list_background_color: var(
--kup-list-background-color,
var(--kup-gray-color-10)
);
--kup_list_background_color_hover: var(
--kup-list-background-color-hover,
var(--kup-gray-color-20)
);

--kup_list_focus_color: var(--kup-list-focus-color, var(--kup-primary-color));
--kup_list_color: var(--kup-list-color, var(--kup-gray-color-70));
--kup_list_text_color: var(--kup-list-text-color, var(--kup-gray-color-70));
--kup_list_text_color_hover: var(
--kup-list-text-color-hover,
var(--kup-gray-color-90)
);
--kup_list_font_family: var(--kup-list-font-family, var(--kup-font-family));
--kup_list_font_size: var(--kup-list-font-size, var(--kup-font-size));
--kup_list_font_weight: var(--kup-list-font-weight, 400);
Expand Down Expand Up @@ -63,8 +70,8 @@
}

.list {
background: var(--kup_list_background);
color: var(--kup_list_color);
background: var(--kup_list_background_color);
color: var(--kup_list_text_color);
font-weight: var(--kup_list_font_weight);
letter-spacing: 0.009375em;
line-height: 1.5em;
Expand Down Expand Up @@ -106,8 +113,8 @@
&.list-item--activated .list-item__graphic,
&.list-item--selected,
&.list-item--selected .list-item__graphic {
background-color: var(--kup_list_background_hover);
color: var(--kup-hover-color);
background-color: var(--kup_list_background_color_hover);
color: var(--kup_list_text_color_hover);
}

.list-item__text {
Expand Down Expand Up @@ -160,7 +167,7 @@
overflow: hidden;
margin-top: 0;
line-height: normal;
color: var(--kup_list_color);
color: var(--kup_list_text_color);
opacity: 0.75;
}

Expand Down Expand Up @@ -205,8 +212,8 @@
&:not(.list-item--selected) {
&:hover,
&.list-item--focused {
background-color: var(--kup_list_background_hover);
color: var(--kup-hover-color);
background-color: var(--kup_list_background_color_hover);
color: var(--kup_list_text_color_hover);
}
}
}
Expand All @@ -221,7 +228,7 @@

.kup-menu {
animation: fade-in 0.25s ease-out;
background-color: var(--kup_list_background);
background-color: var(--kup_list_background_color);
box-shadow: var(--kup_list_box_shadow);
border: 1px solid var(--kup_list_focus_color);
color: var(--kup-text-color);
Expand Down
8 changes: 4 additions & 4 deletions packages/ketchup/src/components/kup-planner/kup-planner-declarations.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,10 +133,10 @@ export const defaultStylingOptions = {
listCellWidth: '300px',
rowHeight: 40,
barFill: 90,
projectProgressColor: '#CBCBCB',
projectProgressSelectedColor: '#CBCBCB',
projectBackgroundColor: '#CBCBCB',
projectBackgroundSelectedColor: '#CBCBCB',
projectProgressColor: '#C6C6C6',
projectProgressSelectedColor: '#C6C6C6',
projectBackgroundColor: '#C6C6C6',
projectBackgroundSelectedColor: '#C6C6C6',
barProgressColor: '#A2A415',
barProgressSelectedColor: '#A2A415',
barBackgroundColor: '#A2A415',
Expand Down
3 changes: 1 addition & 2 deletions packages/ketchup/src/components/kup-planner/kup-planner.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,7 @@
}

.filter {
margin: 12px 10px 12px 0;
padding: 0 10px;
margin-bottom: var(--kup-space-04);
}

.planner-render {
Expand Down
31 changes: 16 additions & 15 deletions packages/ketchup/src/components/kup-planner/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,18 +143,10 @@ graph TD;
kup-planner --> kup-badge
kup-planner-renderer --> kup-switcher
kup-planner-renderer --> kup-gantt
kup-gantt --> kup-standard-tooltip
kup-gantt --> kup-task-list-header
kup-gantt --> kup-task-list-table
kup-gantt --> kup-task-list
kup-gantt --> kup-task-gantt
kup-gantt --> kup-tooltip
kup-gantt --> kup-vertical-scroll
kup-gantt --> kup-horizontal-scroll
kup-task-list --> kup-custom-task-list-header
kup-task-list --> kup-custom-task-list-table
kup-task-gantt --> kup-gantt-calendar
kup-task-gantt --> kup-grid-renderer
kup-switcher --> kup-badge
kup-badge --> kup-badge
kup-badge --> kup-card
kup-badge --> kup-dialog
kup-card --> kup-autocomplete
kup-card --> kup-chip
kup-card --> kup-text-field
Expand Down Expand Up @@ -194,9 +186,6 @@ graph TD;
kup-dialog --> kup-badge
kup-dialog --> kup-card
kup-dialog --> kup-dialog
kup-badge --> kup-badge
kup-badge --> kup-card
kup-badge --> kup-dialog
kup-chip --> kup-card
kup-chip --> kup-dialog
kup-chip --> kup-badge
Expand Down Expand Up @@ -305,6 +294,18 @@ graph TD;
kup-tree --> kup-gauge
kup-tree --> kup-progress-bar
kup-tree --> kup-badge
kup-gantt --> kup-standard-tooltip
kup-gantt --> kup-task-list-header
kup-gantt --> kup-task-list-table
kup-gantt --> kup-task-list
kup-gantt --> kup-task-gantt
kup-gantt --> kup-tooltip
kup-gantt --> kup-vertical-scroll
kup-gantt --> kup-horizontal-scroll
kup-task-list --> kup-custom-task-list-header
kup-task-list --> kup-custom-task-list-table
kup-task-gantt --> kup-gantt-calendar
kup-task-gantt --> kup-grid-renderer
style kup-planner fill:#f9f,stroke:#333,stroke-width:4px
```

Expand Down
2 changes: 1 addition & 1 deletion packages/ketchup/src/components/kup-planner/utils/custom-task-list-header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export class KupCustomTaskListHeader {
<div
class="custom-task-list-wrapper"
style={{
height: '50px',
height: '25px',
fontFamily: this.fontFamily,
fontSize: this.fontSize,
}}
Expand Down
Loading