From 86795927236b67f9a9934fcbd29bff68cc4aad0f Mon Sep 17 00:00:00 2001 From: Armaan Gupta Date: Wed, 20 May 2026 11:33:50 +0530 Subject: [PATCH 1/4] added theme for tableComponent --- src/components/table/_table.scss | 176 +++++++++++++++++++++++++++++++ src/theme.scss | 1 + 2 files changed, 177 insertions(+) create mode 100644 src/components/table/_table.scss diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss new file mode 100644 index 0000000..0cb9672 --- /dev/null +++ b/src/components/table/_table.scss @@ -0,0 +1,176 @@ +/* ===============Table================== */ +.cmp-adaptiveform-table { + color: $dark-gray; + font-size: $font-md; + margin: 1rem 0; +} + +.cmp-adaptiveform-table__title { + font-size: $font-lg; + font-weight: 600; + margin-bottom: 0.5rem; +} + +.cmp-adaptiveform-table__help-container { + display: flex; + flex-direction: row-reverse; +} + +.cmp-adaptiveform-table__questionmark { + display: inline-block; + width: 1rem; + height: 1rem; + border-radius: 9px; + background: url(./resources/images/question.svg) center center / cover no-repeat, $light-gray; + cursor: pointer; + position: absolute; + right: 20px; +} + +.cmp-adaptiveform-table__help-container .cmp-adaptiveform-table__questionmark { + position: unset; + right: unset; +} + +.cmp-adaptiveform-table__shortdescription { + font-size: $font-sm; + margin-top: $error-top-margin; +} + +.cmp-adaptiveform-table__longdescription { + color: $dark-gray; + background-color: $very-light-gray; + font-size: $font-sm; + margin-top: $error-top-margin; + margin-bottom: 5px; + padding: 10px; + + p { + margin: 0; + padding: 0; + } +} + +.cmp-adaptiveform-table__widget { + display: table; + width: 100%; + border-collapse: collapse; + border: 1px solid $silver; +} + +.cmp-adaptiveform-table__head { + display: table-header-group; +} + +.cmp-adaptiveform-table__body { + display: table-row-group; +} + +/* ===============Table Header================== */ +.cmp-adaptiveform-tableheader { + display: table-row; +} + +.cmp-adaptiveform-tablehead { + display: table-cell; + padding: 0.75rem; + border: 1px solid $silver; + text-align: left; + vertical-align: top; + background-color: $panel-bg-color; + font-weight: 600; +} + +.cmp-adaptiveform-table__head .cmp-adaptiveform-tableheader:hover > .cmp-adaptiveform-tablehead { + background-color: $very-light-gray; +} + +.cmp-adaptiveform-table__head .cmp-adaptiveform-tableheader > .cmp-adaptiveform-tablehead:hover { + filter: brightness(0.95); +} + +/* ===============Table Row & Cell================== */ +.cmp-adaptiveform-tablerow { + display: table-row; +} + +.cmp-adaptiveform-tablecell { + display: table-cell; + padding: 0.75rem; + border: 1px solid $silver; + text-align: left; + vertical-align: top; +} + +.cmp-adaptiveform-table__body .cmp-adaptiveform-tablerow:hover > .cmp-adaptiveform-tablecell { + background-color: $wizard-bg-color; +} + +.cmp-adaptiveform-table__body .cmp-adaptiveform-tablerow > .cmp-adaptiveform-tablecell:hover { + background-color: $very-light-gray; +} + +/* ===============Table Row Controls (repeatable)================== */ +.cmp-adaptiveform-tablecell.cmp-adaptiveform-tablecell--with-row-controls { + display: flex; + flex-wrap: wrap; + align-items: flex-start; + gap: 0.5rem 0.75rem; + border: 1px solid $silver; + margin: -1px; +} + +.cmp-adaptiveform-tablecell--with-row-controls > div:first-of-type { + flex: 1 1 auto; + min-width: 0; +} + +.cmp-adaptiveform-tablerow__runtime-controls { + display: inline-flex; + flex: 0 0 auto; + align-items: center; + align-self: center; + gap: 0.25rem; +} + +.cmp-adaptiveform-tablerow__add-button, +.cmp-adaptiveform-tablerow__remove-button { + width: 1.5rem; + height: 1.5rem; + padding: 0; + border: none; + background-color: transparent; + background-repeat: no-repeat; + background-position: center; + background-size: 1.25rem 1.25rem; + cursor: pointer; + + &:focus-visible { + outline: 2px solid $focus-ring-color; + outline-offset: 2px; + } + + &[data-cmp-visible="false"] { + display: none; + } +} + +.cmp-adaptiveform-tablerow__add-button { + background-image: url(./resources/images/add-button.svg); +} + +.cmp-adaptiveform-tablerow__remove-button { + background-image: url(./resources/images/remove-button.svg); +} + +/* ===============Responsive================== */ +@media (max-width: 768px) { + .cmp-adaptiveform-table__widget { + font-size: $font-sm; + } + + .cmp-adaptiveform-tablecell, + .cmp-adaptiveform-tablehead { + padding: 0.5rem; + } +} diff --git a/src/theme.scss b/src/theme.scss index 3f94c08..cde1c81 100644 --- a/src/theme.scss +++ b/src/theme.scss @@ -45,3 +45,4 @@ @import './components/scribble/_scribble.scss'; @import './components/datetime/_datetime.scss'; @import './components/imagechoice/_imagechoice.scss'; +@import './components/table/_table.scss'; From e7292a6fa6d190ee468c094c6f5fd851b4b25671 Mon Sep 17 00:00:00 2001 From: Armaan Gupta Date: Mon, 1 Jun 2026 12:57:38 +0530 Subject: [PATCH 2/4] added sorting css --- src/components/table/_table.scss | 58 ++++++++++++++++++++++++++++++++ 1 file changed, 58 insertions(+) diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss index 0cb9672..1b5f542 100644 --- a/src/components/table/_table.scss +++ b/src/components/table/_table.scss @@ -163,6 +163,64 @@ background-image: url(./resources/images/remove-button.svg); } +/* ===============Column Sorting================== */ +.cmp-adaptiveform-table__sort-header-inner { + display: flex; + align-items: center; + justify-content: space-between; + gap: 0.5rem; + width: 100%; + box-sizing: border-box; +} + +.cmp-adaptiveform-table__sort-button { + flex-shrink: 0; + min-width: 2rem; + min-height: 2rem; + padding: 0; + margin: 0; + border: 1px solid $silver; + border-radius: 2px; + background-color: $white; + cursor: pointer; + position: relative; + font-size: 0; + line-height: 0; + + &:hover, + &:focus-visible { + background-color: $very-light-gray; + outline: 2px solid $focus-ring-color; + outline-offset: 1px; + } + + &::before { + content: "\2191 \2193"; + font-size: 0.65rem; + letter-spacing: -0.15em; + color: $dark-gray; + display: block; + line-height: 1; + padding: 0.15rem 0; + } + + &.cmp-adaptiveform-table__sort-button--asc::before { + content: "\2191"; + font-size: 0.85rem; + color: #222; + } + + &.cmp-adaptiveform-table__sort-button--desc::before { + content: "\2193"; + font-size: 0.85rem; + color: #222; + } +} + +.cell-wrapper { + width: 80%; +} + /* ===============Responsive================== */ @media (max-width: 768px) { .cmp-adaptiveform-table__widget { From d34fb06e9a50cdeb7cda67c484fc76fa74727eaa Mon Sep 17 00:00:00 2001 From: Armaan Gupta Date: Tue, 16 Jun 2026 13:12:33 +0530 Subject: [PATCH 3/4] updated theme for table component --- src/components/table/_table.scss | 33 ++++++++------------------- src/resources/images/sort-asc.svg | 7 ++++++ src/resources/images/sort-desc.svg | 7 ++++++ src/resources/images/sort-neutral.svg | 7 ++++++ 4 files changed, 31 insertions(+), 23 deletions(-) create mode 100644 src/resources/images/sort-asc.svg create mode 100644 src/resources/images/sort-desc.svg create mode 100644 src/resources/images/sort-neutral.svg diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss index 1b5f542..9b8735e 100644 --- a/src/components/table/_table.scss +++ b/src/components/table/_table.scss @@ -175,17 +175,18 @@ .cmp-adaptiveform-table__sort-button { flex-shrink: 0; - min-width: 2rem; - min-height: 2rem; + width: 2rem; + height: 2rem; padding: 0; margin: 0; border: 1px solid $silver; border-radius: 2px; background-color: $white; + background-image: url(../resources/images/sort-neutral.svg); + background-repeat: no-repeat; + background-position: center center; + background-size: 18px 18px; cursor: pointer; - position: relative; - font-size: 0; - line-height: 0; &:hover, &:focus-visible { @@ -194,26 +195,12 @@ outline-offset: 1px; } - &::before { - content: "\2191 \2193"; - font-size: 0.65rem; - letter-spacing: -0.15em; - color: $dark-gray; - display: block; - line-height: 1; - padding: 0.15rem 0; - } - - &.cmp-adaptiveform-table__sort-button--asc::before { - content: "\2191"; - font-size: 0.85rem; - color: #222; + &.cmp-adaptiveform-table__sort-button--asc { + background-image: url(../resources/images/sort-asc.svg); } - &.cmp-adaptiveform-table__sort-button--desc::before { - content: "\2193"; - font-size: 0.85rem; - color: #222; + &.cmp-adaptiveform-table__sort-button--desc { + background-image: url(../resources/images/sort-desc.svg); } } diff --git a/src/resources/images/sort-asc.svg b/src/resources/images/sort-asc.svg new file mode 100644 index 0000000..7eea7bb --- /dev/null +++ b/src/resources/images/sort-asc.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/resources/images/sort-desc.svg b/src/resources/images/sort-desc.svg new file mode 100644 index 0000000..f484cc7 --- /dev/null +++ b/src/resources/images/sort-desc.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/resources/images/sort-neutral.svg b/src/resources/images/sort-neutral.svg new file mode 100644 index 0000000..ffbaae5 --- /dev/null +++ b/src/resources/images/sort-neutral.svg @@ -0,0 +1,7 @@ + + + + + + + From 00f600239822434d7288f6b98140d32a5e949110 Mon Sep 17 00:00:00 2001 From: Armaan Gupta Date: Thu, 18 Jun 2026 22:02:56 +0530 Subject: [PATCH 4/4] fix(path) : corrected resoruce paths --- src/components/table/_table.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss index 9b8735e..ba2cfd0 100644 --- a/src/components/table/_table.scss +++ b/src/components/table/_table.scss @@ -182,7 +182,7 @@ border: 1px solid $silver; border-radius: 2px; background-color: $white; - background-image: url(../resources/images/sort-neutral.svg); + background-image: url(./resources/images/sort-neutral.svg); background-repeat: no-repeat; background-position: center center; background-size: 18px 18px; @@ -196,11 +196,11 @@ } &.cmp-adaptiveform-table__sort-button--asc { - background-image: url(../resources/images/sort-asc.svg); + background-image: url(./resources/images/sort-asc.svg); } &.cmp-adaptiveform-table__sort-button--desc { - background-image: url(../resources/images/sort-desc.svg); + background-image: url(./resources/images/sort-desc.svg); } }