From 7b6015ad79d040c62364f35aa269195adbcfe3db Mon Sep 17 00:00:00 2001 From: Swathi-eGov <137176788+Swathi-eGov@users.noreply.github.com> Date: Mon, 6 May 2024 18:38:30 +0530 Subject: [PATCH] updated info toast css and dropdown category option css (#56) --- react/css/README.md | 1 + react/css/package.json | 2 +- .../components/multiSelectDropdownV2.scss | 73 +-------------- .../digitv2/components/selectdropdownV2.scss | 91 +------------------ react/css/src/digitv2/components/toastV2.scss | 6 +- .../src/digitv2/components/treeSelectV2.scss | 33 +------ react/example/package.json | 2 +- react/example/public/index.html | 2 +- react/modules/Project/package.json | 2 +- react/modules/core/package.json | 2 +- react/modules/sample/package.json | 2 +- react/package.json | 2 +- react/ui-components/README.md | 1 + react/ui-components/package.json | 4 +- react/ui-components/src/atoms/Toast.js | 4 +- react/ui-components/yarn-error.log | 2 +- 16 files changed, 20 insertions(+), 209 deletions(-) diff --git a/react/css/README.md b/react/css/README.md index d7baef2943..983e23b471 100644 --- a/react/css/README.md +++ b/react/css/README.md @@ -42,6 +42,7 @@ frontend/micro-ui/web/public/index.html # Changelog ```bash +1.8.2-coreui.12 updated css for toast info and category option css 1.8.2-coreui.11 added info varinat for toast 1.8.2-coreui.10 dropdown options card height updated 1.8.2-coreui.9 enhancements of components diff --git a/react/css/package.json b/react/css/package.json index 52b5e69b90..2d09674551 100644 --- a/react/css/package.json +++ b/react/css/package.json @@ -1,6 +1,6 @@ { "name": "@egovernments/digit-ui-css", - "version": "1.8.2-coreui.11", + "version": "1.8.2-coreui.12", "license": "MIT", "main": "dist/index.css", "author": "Jagankumar ", diff --git a/react/css/src/digitv2/components/multiSelectDropdownV2.scss b/react/css/src/digitv2/components/multiSelectDropdownV2.scss index b5aa1c4c3d..0e56ed7a0c 100644 --- a/react/css/src/digitv2/components/multiSelectDropdownV2.scss +++ b/react/css/src/digitv2/components/multiSelectDropdownV2.scss @@ -1,5 +1,4 @@ @import url("../index.scss"); - .digit-multiselectdropdown-wrap { margin-bottom: 0.625rem; @@ -19,47 +18,36 @@ max-width: 37.5rem; } - @apply relative text-form-field text-text-primary w-full; - .digit-multiselectdropdown-master, .digit-multiselectdropdown-master-active { @apply relative h-10 w-full bg-white; border: 0.063rem solid theme(digitv2.lightTheme.generic-inputborder); - input[type="text"] { @extend .typography.body-l; @apply absolute top-0 left-0 p-sm min-h-full min-w-full opacity-0; letter-spacing: 0rem; - &:focus { @apply outline-none; } } - .digit-multiselectdropdown-label { @apply flex justify-between p-sm w-full h-full; - svg { @apply h-6 w-6; } } } - .digit-multiselectdropdown-master { - &.disabled { pointer-events: none !important; border: 0.063rem solid theme(digitv2.lightTheme.generic-divider) !important; color: theme(digitv2.lightTheme.generic-divider) !important; } } - .digit-multiselectdropdown-master-active { border: 0.063rem solid theme(digitv2.lightTheme.primary-1); - } - .digit-multiselectdropdown-server { top: 2.5rem; @apply absolute z-20 bg-white overflow-x-hidden overflow-y-auto; @@ -67,77 +55,63 @@ box-shadow: 0rem 0.063rem 0.275rem 0rem #00000026; width: 100% !important; } - .digit-multiselectdropdown-server::-webkit-scrollbar { width: 0.5rem; background-color: theme(digitv2.lightTheme.generic-background); } - .digit-multiselectdropdown-server::-webkit-scrollbar-track { background-color: theme(digitv2.lightTheme.generic-background); border-radius: 0.563rem; } - .digit-multiselectdropdown-server::-webkit-scrollbar-thumb { background-color: theme(digitv2.lightTheme.generic-divider); border-radius: 0.563rem; } - .digit-nested-category { @apply flex items-center flex-shrink-0; - background: theme(digitv2.lightTheme.paper-secondary); + background: theme(digitv2.lightTheme.background); height: 2.4375rem; padding: 1rem 0.625rem; gap: 0.625rem; margin-top: 1rem; - &.selectAll { justify-content: space-between; } } - .digit-nested-category:nth-child(-n+2) { margin-top: 0rem; } - .digit-category-name { @extend .typography.heading-s; - color: theme(digitv2.lightTheme.text-secondary); + color: theme(digitv2.lightTheme.text-primary); } - .digit-category-selectAll { @apply flex relative; gap: 0.625rem; cursor: pointer !important; align-items: center; - .category-selectAll-label { @extend .typography.body-s; text-align: left; color: theme(digitv2.lightTheme.primary-1); } - input { @apply absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer; margin: 0rem; } - .digit-multiselectdropodwn-custom-checkbox-selectAll { height: 1.25rem; width: 1.25rem; border: 0.063rem solid theme(digitv2.lightTheme.text-secondary); - svg { @apply opacity-0 z-10; } } - input:active~.digit-multiselectdropodwn-custom-checkbox-selectAll, input:checked~.digit-multiselectdropodwn-custom-checkbox-selectAll { border: 0.125rem solid theme(digitv2.lightTheme.primary-1); background-color: theme(digitv2.lightTheme.paper-secondary); } - input:active~.digit-multiselectdropodwn-custom-checkbox-selectAll svg, input:checked~.digit-multiselectdropodwn-custom-checkbox-selectAll svg { @apply opacity-100; @@ -145,30 +119,23 @@ height: 1rem; } } - .digit-multiselectdropodwn-menuitem { - @apply flex w-full bg-white justify-start items-center; min-height: 2.438rem; - .option-des-container { @apply w-full max-w-full overflow-hidden box-border; margin: 0.594rem 0rem 0.594rem 0rem; - .multiselectdropdown-icon-option { @apply w-full items-center; display: flex !important; gap: 0.25rem; - svg { flex-shrink: 0; } } } - &.nestedmultiselect { position: relative; - &:not(.selectAll)::before { content: ""; position: absolute; @@ -177,7 +144,6 @@ right: 0.625rem; border-bottom: 0.063rem solid theme(digitv2.lightTheme.generic-divider); } - &:not(.selectAll):hover, &:not(.selectAll):active { &::before { @@ -185,28 +151,22 @@ } } } - &:not(.nestedmultiselect, .keyChange, .checked):not(:active):not(:hover):nth-of-type(even) { background: theme(digitv2.lightTheme.paper-secondary); } - &:hover, &.keyChange { background: theme(digitv2.lightTheme.primary-bg); border: 0.031rem solid theme(digitv2.lightTheme.primary-1); } - &:active, &:active:hover { background: theme(digitv2.lightTheme.primary-1); border: 0.031rem solid theme(digitv2.lightTheme.primary-1); - - p { @extend .typography.heading-s; color: theme(digitv2.lightTheme.paper-primary); } - .digit-label { &.selectAll { @extend .typography.body-l; @@ -214,12 +174,10 @@ } } } - input { min-height: 2.438rem; @apply absolute min-w-full opacity-0 z-20 cursor-pointer; } - p { @extend .typography.body-s; @apply w-full overflow-hidden whitespace-no-wrap max-w-full; @@ -227,15 +185,12 @@ margin: 0rem; text-overflow: ellipsis; } - &.checked { background: theme(digitv2.lightTheme.primary-1); - p { @extend .typography.heading-s; color: theme(digitv2.lightTheme.paper-primary); } - .digit-label { &.selectAll { @extend .typography.body-l; @@ -243,32 +198,26 @@ } } } - .digit-multiselectdropodwn-custom-checkbox, .digit-multiselectdropodwn-custom-checkbox-selectAll { height: 1.25rem; width: 1.25rem; border: 0.063rem solid theme(digitv2.lightTheme.text-secondary); margin: 0.594rem 0.75rem 0.594rem 0.625rem; - svg { @apply opacity-0 z-10; } } - - input:active~.digit-multiselectdropodwn-custom-checkbox, input:checked~.digit-multiselectdropodwn-custom-checkbox { border: 0.125rem solid theme(digitv2.lightTheme.paper-primary); background-color: theme(digitv2.lightTheme.primary-1); } - input:active~.digit-multiselectdropodwn-custom-checkbox-selectAll, input:checked~.digit-multiselectdropodwn-custom-checkbox-selectAll { border: 0.125rem solid theme(digitv2.lightTheme.primary-1); background-color: theme(digitv2.lightTheme.paper-secondary); } - input:active~.digit-multiselectdropodwn-custom-checkbox svg, input:checked~.digit-multiselectdropodwn-custom-checkbox svg, input:active~.digit-multiselectdropodwn-custom-checkbox-selectAll svg, @@ -277,25 +226,20 @@ width: 1rem; height: 1rem; } - &.nestedtextmultiselect { padding: 0.5rem 1rem; gap: 0.75rem; align-items: flex-start !important; - &:not(.selectAll) { min-height: 4.75rem; - .input { min-height: 3.75rem; } } - .option-des-container { @apply flex flex-col justify-center items-start; width: 100% !important; margin: 0rem; - p { @extend .typography.body-l; color: theme(digitv2.lightTheme.text-secondary); @@ -303,7 +247,6 @@ margin-bottom: 0rem; margin-top: 0rem; } - .option-description { color: theme(digitv2.lightTheme.text-secondary); font-family: theme(digitv2.fontFamily.sans); @@ -312,51 +255,41 @@ font-weight: theme(digitv2.fontWeight.regular); line-height: 1.125rem; } - .svg { flex-shrink: 0; } } - .digit-multiselectdropodwn-custom-checkbox { margin: 0rem; margin-top: 0.125rem; } - &:active, &.checked { - .option-description, p { color: theme(digitv2.lightTheme.paper-primary); } - .option-des-container { p { @extend .typography.heading-s; } } - .digit-multiselectdropodwn-custom-checkbox { margin-top: 0rem; } } - &:active { background: theme(digitv2.lightTheme.primary-1); } - .digit-multiselectdropodwn-custom-checkbox-selectAll { margin: 0rem; margin-top: 0.125rem; } } - &.selectAll { background-color: theme(digitv2.lightTheme.paper-secondary) !important; border: 0.063rem solid theme(digitv2.lightTheme.generic-divider) !important; } - .digit-label { &.selectAll { @extend .typography.body-l; @@ -364,11 +297,9 @@ } } } - .digit-cursorPointer { @apply cursor-pointer; } - .digit-multiselectdropdown-master, .digit-multiselectdropdown-master-active { .digit-multiselectdropdown-label { diff --git a/react/css/src/digitv2/components/selectdropdownV2.scss b/react/css/src/digitv2/components/selectdropdownV2.scss index 826181d41c..487d99dfbf 100644 --- a/react/css/src/digitv2/components/selectdropdownV2.scss +++ b/react/css/src/digitv2/components/selectdropdownV2.scss @@ -1,39 +1,31 @@ .digit-dropdown-employee-select-wrap { @apply w-full relative; - @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) { /* Media query for tablets */ max-width: 27.5rem; } - @media (max-aspect-ratio: 9/16) { /* Media query for mobile */ max-width: 20.5rem; width: 100%; } - @media (min-aspect-ratio: 3/4) { /* Media query for desktop */ max-width: 37.5rem; } - .digit-dropdown-select { @extend .light-input-border; @apply relative block w-full h-10 bg-white; border: 0.063rem solid theme(digitv2.lightTheme.text-secondary); - &.digit-field-error { border: 0.063rem solid; border-color: theme(digitv2.lightTheme.alert-error); } - &.disabled { pointer-events: none !important; border: 0.063rem solid theme(digitv2.lightTheme.generic-divider) !important; color: theme(digitv2.lightTheme.generic-divider) !important; } - - input[type="text"] { @extend .typography.body-l; @apply absolute z-10 h-full outline-none; @@ -44,27 +36,21 @@ padding-left: 0.75rem; color: theme(digitv2.lightTheme.text-primary); } - p { @extend .light-text-color-primary; padding-top: 0.563rem; @apply text-form-field text-text-primary float-left ml-sm; } - img { @apply float-right h-6 w-6 mt-sm mr-sm; } - svg { @apply absolute right-0 float-right h-6 w-6 mt-sm mr-sm mb-sm; } } - .digit-dropdown-select-active { @apply relative block w-full h-10; border: 0.063rem solid theme(digitv2.lightTheme.primary-1); - - input[type="text"] { @extend .typography.body-l; @apply absolute z-10 h-full outline-none; @@ -76,150 +62,117 @@ padding-left: 0.75rem; color: theme(digitv2.lightTheme.text-primary); } - p { @extend .light-text-color-primary; @apply text-form-field text-text-primary float-left ml-sm; } - p { padding-top: 0.563rem; } - img { @apply float-right h-6 w-6 mt-sm mr-sm; } - svg { @apply absolute right-0 float-right h-6 w-6 mt-sm mr-sm mb-sm; } } - .digit-dropdown-options-card { width: 100% !important; box-shadow: 0rem 0.063rem 0.275rem 0rem #00000026; max-height: 20vmax; @apply absolute z-20 bg-white max-w-full overflow-y-auto overflow-x-hidden; - p { @extend .light-text-color-primary; padding-top: 0.875rem; @apply w-full h-12 pl-sm text-text-primary text-form-field; - &:hover { @extend .light-background; @apply bg-grey-mid; } } } - .digit-dropdown-select, .digit-dropdown-select-active { - &.treedropdown, &.notSearchable { @apply cursor-pointer; } } } - .digit-dropdown-options-card::-webkit-scrollbar { width: 0.5rem; background-color: theme(digitv2.lightTheme.generic-background); } - .digit-dropdown-options-card::-webkit-scrollbar-track { background-color: theme(digitv2.lightTheme.generic-background); border-radius: 0.563rem; } - .digit-dropdown-options-card::-webkit-scrollbar-thumb { background-color: theme(digitv2.lightTheme.generic-divider); border-radius: 0.563rem; } - - .digit-nested-category { @apply flex items-center flex-shrink-0; - background: theme(digitv2.lightTheme.paper-secondary); + background: theme(digitv2.lightTheme.background); height: 2.4375rem; padding: 1rem 0.625rem; gap: 0.625rem; } - .digit-nested-category:not(:first-child) { margin-top: 1rem; } - .digit-category-name { @extend .typography.heading-s; @apply flex items-center overflow-hidden whitespace-no-wrap; - color: theme(digitv2.lightTheme.text-secondary); + color: theme(digitv2.lightTheme.text-primary); gap: 0.25rem; } - .digit-dropdown-item { - @apply flex flex-row; padding: 0.625rem; gap: 0.625rem; min-height: 2.438rem; color: theme(digitv2.lightTheme.text-primary) !important; - .profile-icon-container { flex-shrink: 0; border-radius: 4.5rem; background-size: cover; background-position: center; } - .option-des-container { @apply flex-col justify-center w-full max-w-full overflow-hidden box-border; display: flex !important; align-items: center; min-height: 1.125rem; - .icon-option{ @apply w-full items-center; display: flex !important; gap:0.25rem; - svg{ flex-shrink: 0; } } - - .main-option { @extend .typography.body-s; @apply whitespace-no-wrap w-full max-w-full overflow-hidden; text-overflow: ellipsis; - - &.nestedtextdropdown, &.profilenestedtext { @extend .typography.body-l; color: theme(digitv2.lightTheme.text-secondary); } } - - .option-description { @extend .typography.body-xs; color: theme(digitv2.lightTheme.text-secondary); } } - &:not(.nesteddropdown, .treedropdown):not(:active):nth-of-type(even) { background: theme(digitv2.lightTheme.paper-secondary); } - - &.nesteddropdown { position: relative; height: 2.4375rem; - - &::before { content: ""; position: absolute; @@ -228,7 +181,6 @@ right: 0.635rem; border-bottom: 0.063rem solid theme(digitv2.lightTheme.generic-divider); } - &:hover, &:active { &::before { @@ -236,46 +188,36 @@ } } } - &:hover, &.keyChange{ background: theme(digitv2.lightTheme.primary-bg) !important; border: 0.031rem solid theme(digitv2.lightTheme.primary-1); } - &:active { background: theme(digitv2.lightTheme.primary-1) !important; - - span, .option-description { color: theme(digitv2.lightTheme.paper-primary); } - .svg { width: 6.25rem; } - .option-des-container { .main-option { @extend .typography.heading-s; } } } - &.nestedtextdropdown { min-height: 4.75rem; padding: 0.5rem 0.635rem 0.5rem 0.635rem; color: theme(digitv2.lightTheme.text-secondary) !important; - &:hover { border: 0.063rem solid theme(digitv2.lightTheme.primary-1); } - .option-des-container { padding-right: 0.125rem !important; } - &:active { .option-des-container { .main-option { @@ -285,19 +227,16 @@ } } } - &.profiledropdown { min-height: 3rem; padding: 0.5rem 0.625rem; } - &.profilenestedtext { min-height: 4.75rem; padding: 0.5rem 1rem; gap: 1rem; align-items: center; color: theme(digitv2.lightTheme.text-secondary) !important; - &:active { .option-des-container { .main-option { @@ -307,53 +246,43 @@ } } } - &.unsuccessfulresults { background-color: theme(digitv2.lightTheme.paper-secondary); pointer-events: none; - span { @extend .typography.body-s; color: theme(digitv2.lightTheme.text-disabled); } } } - .digit-dropdown-employee-select-wrap--elipses { @apply overflow-hidden whitespace-no-wrap; width:calc(100%-1.75rem); text-overflow: ellipsis; - &.treedropdown, &.notSearchable { @apply pointer-events-none; } } - .digit-dropdown-select-wrap { @apply mb-lg relative bg-white; - @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) { /* Media query for tablets */ max-width: 27.5rem; } - @media (max-aspect-ratio: 9/16) { /* Media query for mobile */ max-width: 20.5rem; width: 100%; } - @media (min-aspect-ratio: 3/4) { /* Media query for desktop */ max-width: 37.5rem; } - .digit-dropdown-select { @extend .light-input-border; @apply relative block w-full h-10 bg-white; border: 0.063rem solid theme(digitv2.lightTheme.text-secondary); - input[type="text"] { @extend .typography.body-l; @apply absolute z-10 h-full outline-none; @@ -364,33 +293,26 @@ padding-left: 0.75rem; color: theme(digitv2.lightTheme.text-primary); } - - &.disabled { pointer-events: none !important; border: 0.063rem solid theme(digitv2.lightTheme.generic-divider) !important; color: theme(digitv2.lightTheme.generic-divider) !important; } - p { @extend .light-text-color-primary; padding-top: 0.563rem; @apply text-form-field text-text-primary float-left ml-sm; } - img { @apply float-right h-6 w-6 mt-sm mr-sm; } - svg { @apply absolute right-0 float-right h-6 w-6 mt-sm mr-sm mb-sm; } } - .digit-dropdown-select-active { @apply relative block w-full h-10; border: 0.063rem solid theme(digitv2.lightTheme.primary-1); - input[type="text"] { @extend .typography.body-l; @apply absolute z-10 h-full outline-none; @@ -401,45 +323,36 @@ padding-left: 0.75rem; color: theme(digitv2.lightTheme.text-primary); } - p { @extend .light-text-color-primary; @apply text-form-field text-text-primary float-left ml-sm; } - p { padding-top: 0.563rem; } - img { @apply float-right h-6 w-6 mt-sm mr-sm; } - svg { @apply absolute right-0 float-right h-6 w-6 mt-sm mr-sm mb-sm; } } - .digit-dropdown-select, .digit-dropdown-select-active { - &.treedropdown, &.notSearchable { @apply cursor-pointer; } } - .digit-dropdown-options-card { width: 100% !important; box-shadow: 0rem 0.063rem 0.275rem 0rem #00000026; @apply z-20 bg-white overflow-y-auto overflow-x-hidden; max-height: 20vmax; - p { @extend .light-text-color-primary; padding-top: 0.875rem; @apply w-full h-12 pl-sm text-text-primary text-form-field; - &:hover { @apply bg-grey-mid; } diff --git a/react/css/src/digitv2/components/toastV2.scss b/react/css/src/digitv2/components/toastV2.scss index 28c793b2a1..edc3b029bb 100644 --- a/react/css/src/digitv2/components/toastV2.scss +++ b/react/css/src/digitv2/components/toastV2.scss @@ -47,11 +47,7 @@ } &.digit-info { - background-color: theme(digitv2.alert.info-bg); - - .toast-label{ - color: theme(digitv2.lightTheme.text-primary); - } + background-color: theme(digitv2.lightTheme.alert-info); } .digit-warning-button-container { diff --git a/react/css/src/digitv2/components/treeSelectV2.scss b/react/css/src/digitv2/components/treeSelectV2.scss index 1b5e8d574b..9ee2926763 100644 --- a/react/css/src/digitv2/components/treeSelectV2.scss +++ b/react/css/src/digitv2/components/treeSelectV2.scss @@ -4,74 +4,60 @@ background-color: theme(digitv2.lightTheme.paper-secondary); } } - .digit-tree-select-options-container.first-level:nth-of-type(odd) { .digit-tree-select-option.level-0, .digit-tree-multiselect-option.level-0:not(.checked){ background-color: theme(digitv2.lightTheme.paper-primary); } } - - .container.innerlevel { border-left: 0.063rem solid #D6D5D4; } - .digit-tree-select-option, .digit-tree-multiselect-option { @apply relative cursor-pointer flex items-center; height: 2.4375rem; gap: 0.25rem; padding: 1rem 0.625rem; - &:hover { background: theme(digitv2.lightTheme.primary-bg); border: 0.063rem solid theme(digitv2.lightTheme.primary-1); } - &.expanded { .digit-option-label { @extend .typography.heading-s; - color: theme(digitv2.lightTheme.text-secondary); + color: theme(digitv2.lightTheme.text-primary); /*font-size: 1rem; font-weight: theme(digitv2.fontWeight.bold); line-height: 1.188rem;*/ } } - input { @apply absolute opacity-0 cursor-pointer; margin: 0; } - .digit-toggle-dropdown { width: 1.5rem; height: 1.5rem; } - .digit-custom-checkbox { height: 1.25rem; width: 1.25rem; @apply flex items-center justify-center; border: 0.063rem solid theme(digitv2.lightTheme.text-secondary); - svg { @apply opacity-0 z-10; } - &.checked { border: 0.125rem solid theme(digitv2.lightTheme.primary-1); - svg { @apply opacity-100; width: 1rem; height: 1rem; } } - &.intermediate { border: 0.125rem solid theme(digitv2.lightTheme.primary-1); - .intermediate-state { width: 0.75rem; height: 0.75rem; @@ -81,34 +67,26 @@ } } } - .container .digit-tree-multiselect-option.parent.checked.all-child-selected+.child-options-container, .container .digit-tree-multiselect-option.parent.checked.all-child-selected .child-options-container { background-color: theme(digitv2.lightTheme.primary-bg); - .digit-tree-multiselect-option.checked { background: theme(digitv2.lightTheme.primary-bg) !important; - .digit-toggle-dropdown.svg { fill: #0B0C0C; } - .digit-custom-checkbox { border: 0.125rem solid theme(digitv2.lightTheme.primary-1); } - .digit-option-label { color: theme(digitv2.lightTheme.text-primary); } } - .container { border: none; } } - .digit-tree-select-option { - &.expanded{ &.level-0{ background-color: theme(digitv2.lightTheme.paper-secondary) !important; @@ -120,45 +98,36 @@ } } } - .digit-tree-multiselect-option { - &.expanded{ &.level-0:not(.checked){ background-color: theme(digitv2.lightTheme.paper-secondary) !important; } } - &.checked { background-color: theme(digitv2.lightTheme.primary-1); - .digit-custom-checkbox { border: 0.125rem solid theme(digitv2.lightTheme.paper-primary); } - .digit-option-label { @extend .typography.heading-s; color: theme(digitv2.lightTheme.paper-primary); } } - &.child { .digit-custom-checkbox { margin-left: 2.25rem; } } - .digit-option-checkbox { display: none; } } - .digit-option-label { @extend .typography.body-s; @apply overflow-hidden w-full; flex: 1; color: theme(digitv2.lightTheme.text-primary);} - .digit-toggle-dropdown { @apply cursor-pointer; } \ No newline at end of file diff --git a/react/example/package.json b/react/example/package.json index 376b4e4704..2562c2dfcc 100644 --- a/react/example/package.json +++ b/react/example/package.json @@ -10,7 +10,7 @@ "build": "webpack --mode production" }, "dependencies": { - "@egovernments/digit-ui-components": "0.0.1-beta.16", + "@egovernments/digit-ui-components": "0.0.1-beta.17", "@egovernments/digit-ui-libraries": "1.8.2-beta.1", "@egovernments/digit-ui-module-common": "1.7.10", "@egovernments/digit-ui-module-core": "1.8.1-beta.6", diff --git a/react/example/public/index.html b/react/example/public/index.html index 6095daf830..e980de9ca4 100644 --- a/react/example/public/index.html +++ b/react/example/public/index.html @@ -9,7 +9,7 @@ rel='stylesheet' type='text/css'> diff --git a/react/modules/Project/package.json b/react/modules/Project/package.json index fd77257ea2..bd62a08d34 100644 --- a/react/modules/Project/package.json +++ b/react/modules/Project/package.json @@ -19,7 +19,7 @@ }, "dependencies": { "@egovernments/digit-ui-react-components": "1.8.1-beta.4", - "@egovernments/digit-ui-components": "0.0.1-beta.16", + "@egovernments/digit-ui-components": "0.0.1-beta.17", "lodash": "^4.17.21", "react": "17.0.2", "react-date-range": "^1.4.0", diff --git a/react/modules/core/package.json b/react/modules/core/package.json index 9838ec7c3f..56f32e05fc 100644 --- a/react/modules/core/package.json +++ b/react/modules/core/package.json @@ -14,7 +14,7 @@ "prepublish": "yarn build" }, "dependencies": { - "@egovernments/digit-ui-components": "0.0.1-beta.16", + "@egovernments/digit-ui-components": "0.0.1-beta.17", "@egovernments/digit-ui-react-components": "1.8.1-beta.4", "react": "17.0.2", "react-dom": "17.0.2", diff --git a/react/modules/sample/package.json b/react/modules/sample/package.json index 94cc745be4..16e4429aea 100644 --- a/react/modules/sample/package.json +++ b/react/modules/sample/package.json @@ -19,7 +19,7 @@ }, "dependencies": { "@egovernments/digit-ui-react-components": "1.8.1-beta.4", - "@egovernments/digit-ui-components": "0.0.1-beta.16", + "@egovernments/digit-ui-components": "0.0.1-beta.17", "react": "17.0.2", "react-date-range": "^1.4.0", "react-dom": "17.0.2", diff --git a/react/package.json b/react/package.json index 860914fbbb..e88f94bdb3 100644 --- a/react/package.json +++ b/react/package.json @@ -77,7 +77,7 @@ "@egovernments/digit-ui-module-sample": "0.0.1", "@egovernments/digit-ui-react-components": "1.7.10", "@egovernments/digit-ui-svg-components": "1.0.4", - "@egovernments/digit-ui-components": "0.0.1-beta.16", + "@egovernments/digit-ui-components": "0.0.1-beta.17", "babel-loader": "8.1.0", "clean-webpack-plugin": "4.0.0", "css-loader": "5.2.6", diff --git a/react/ui-components/README.md b/react/ui-components/README.md index 4a70bf4a7e..18b82d5f35 100644 --- a/react/ui-components/README.md +++ b/react/ui-components/README.md @@ -58,6 +58,7 @@ yarn storybook # Changelog ```bash +0.0.1-beta.17 updated toast info varinat css and category option css 0.0.1-beta.16 added erroe boundary atom 0.0.1-beta.15 added info varinat for toast 0.0.1-beta.14 updated dropdown options label to use optionsKey diff --git a/react/ui-components/package.json b/react/ui-components/package.json index 42beff411c..8745cd0981 100644 --- a/react/ui-components/package.json +++ b/react/ui-components/package.json @@ -1,6 +1,6 @@ { "name": "@egovernments/digit-ui-components", - "version": "0.0.1-beta.16", + "version": "0.0.1-beta.17", "license": "MIT", "main": "dist/index.js", "module": "dist/index.modern.js", @@ -51,7 +51,7 @@ "dist" ], "dependencies": { - "@egovernments/digit-ui-css": "1.8.2-coreui.11", + "@egovernments/digit-ui-css": "1.8.2-coreui.12", "@egovernments/digit-ui-libraries": "1.8.1-beta.1", "@egovernments/digit-ui-svg-components": "1.0.4", "@googlemaps/js-api-loader": "1.13.10", diff --git a/react/ui-components/src/atoms/Toast.js b/react/ui-components/src/atoms/Toast.js index 81768e2e75..e1cb4880af 100644 --- a/react/ui-components/src/atoms/Toast.js +++ b/react/ui-components/src/atoms/Toast.js @@ -77,12 +77,12 @@ const Toast = (props) => { className={`digit-toast-success ${isVisible && isAnimating ? "animate" : ""} ${variant}`} style={{ ...props.style }} > - +
{sentenceCaseLabel}