dashboard-shell-shell 3.0.5-test.5 → 3.0.5-test.6

package/rancher-components/BadgeState/BadgeState.vue

@@ -1,6 +1,5 @@
 <script lang="ts">
 import { PropType, defineComponent } from 'vue';
-import { mapGetters } from 'vuex';
 
 interface Badge {
   stateBackground: string;
@@ -48,56 +47,74 @@ export default defineComponent({
   },
 
   computed: {
-    ...mapGetters({ t: 'i18n/t' }),
     bg(): string | null {
       return this.value?.stateBackground || this.color;
     },
 
     msg(): string | null {
-      let text = this.value?.stateDisplay || this.label;
-      let zhText = this.t(`stateLabel.${ text }`)
-      return zhText ? zhText : text
+      return this.value?.stateDisplay || this.label;
     }
   }
 });
 </script>
 
 <template>
-  <div style="display: flex;flex-direction: row;align-items: center;font-size: 12px;">
-    <div :class="{ [bg]: true }"></div>
-    <span style="margin-left: 5px;">{{ msg }}</span>
-    
-  </div>
+  <span :class="['badge-state', bg]">
+    <i
+      v-if="icon"
+      class="icon"
+      :class="{[icon]: true, 'mr-5': !!msg}"
+    />
+    <span class="msg">{{ msg }}</span>
+    <slot name="content-right" />
+  </span>
 </template>
+
 <style lang="scss" scoped>
-  .bg-error {
-    width: 10px; /* 圆点的宽度 */
-    height: 10px; /* 圆点的高度 */
-    background-color: #DD0C17; /* 圆点的颜色 */
-    border-radius: 50%; /* 设置为圆形 */
-  }
-  .bg-darker {
-    width: 10px; /* 圆点的宽度 */
-    height: 10px; /* 圆点的高度 */
-    background-color: #DD0C17; /* 圆点的颜色 */
-    border-radius: 50%; /* 设置为圆形 */
-  }
-  .bg-success {
-    width: 10px; /* 圆点的宽度 */
-    height: 10px; /* 圆点的高度 */
-    background-color: #95F204 !important; /* 圆点的颜色 */
-    border-radius: 50%; /* 设置为圆形 */
-  }
-  .bg-warning {
-    width: 10px; /* 圆点的宽度 */
-    height: 10px; /* 圆点的高度 */
-    background-color: #DAC342; /* 圆点的颜色 */
-    border-radius: 50%; /* 设置为圆形 */
+  .badge-state {
+    align-items: center;
+    display: inline-flex;
+    padding: 2px 10px;
+    border: 1px solid transparent;
+    border-radius: 20px;
+
+    &.bg-info {
+      border-color: var(--info);
+    }
+
+    &.bg-error {
+      border-color: var(--error);
+    }
+
+    &.bg-warning {
+      border-color: var(--warning);
+    }
+
+    // Successful states are de-emphasized by using [text-]color instead of background-color
+    &.bg-success {
+      color: var(--success);
+      background: transparent;
+      border-color: var(--success);
+    }
+
+    // Added badge-disabled instead of bg-disabled since bg-disabled is used in other places with !important styling, an investigation is needed to make the naming consistent
+    &.badge-disabled {
+      color: var(--badge-state-disabled-text);
+      background-color: var( --badge-state-disabled-bg);
+      border: 1px solid var(--badge-state-disabled-border);
+    }
   }
-  .bg-info {
-    width: 10px; /* 圆点的宽度 */
-    height: 10px; /* 圆点的高度 */
-    background-color: #1890FF; /* 圆点的颜色 */
-    border-radius: 50%; /* 设置为圆形 */
+</style>
+<style lang="scss">
+  // TODO: #6005
+  // Investigate why this is here.. I don't think that styles for sortable table should belong here
+  .sortable-table TD .badge-state {
+    @include clip;
+    display: inline-block;
+    max-width: 100%;
+    position: relative;
+    max-width: 110px;
+    font-size: .85em;
+    vertical-align: middle;
   }
 </style>

package/rancher-components/Banner/Banner.vue

@@ -154,14 +154,9 @@ export default defineComponent({
 $left-border-size: 4px;
 $icon-size: 24px;
 
-.banner__content {
-  line-height: 18px !important;
-}
-
 .banner {
   display: flex;
-  /* margin: 15px 0; */
-  margin: 0px 0px 20px 0px;
+  margin: 15px 0;
   position: relative;
   width: 100%;
   color: var(--body-text);
@@ -200,16 +195,18 @@ $icon-size: 24px;
     }
   }
 
+  &.banner-disabled {
+    filter: grayscale(1);
+  }
+
   &__content {
-    padding: 9px 10px; 
+    padding: 10px;
     transition: all 0.2s ease;
-    line-height: 12px;
+    line-height: 20px;
     width: 100%;
     border-left: solid $left-border-size transparent;
     display: flex;
     gap: 3px;
-    word-wrap:break-word; 
-    word-break:break-all; 
 
     .primary & {
       background: var(--primary);
@@ -227,8 +224,7 @@ $icon-size: 24px;
     }
 
     .info & {
-      // background: var(--info-banner-bg);
-      background: #f2f2f2;
+      background: var(--info-banner-bg);
       border-color: var(--info);
     }
 

package/rancher-components/Card/Card.vue

@@ -76,7 +76,7 @@ export default defineComponent({
 <template>
   <div
     id="focus-trap-card-container-element"
-    class="card-containers"
+    class="card-container"
     :class="{'highlight-border': showHighlightBorder, 'card-sticky': sticky}"
     data-testid="card"
   >
@@ -89,7 +89,7 @@ export default defineComponent({
           {{ title }}
         </slot>
       </div>
-      <!-- <hr role="none"> -->
+      <hr role="none">
       <div
         class="card-body"
         data-testid="card-body-slot"
@@ -117,15 +117,17 @@ export default defineComponent({
 </template>
 
 <style lang='scss'>
- .card-containers {
+ .card-container {
   &.highlight-border {
     border-left: 5px solid var(--primary);
   }
+  border-radius: var(--border-radius);
   display: flex;
   flex-basis: 40%;
+  margin: 10px;
   min-height: 100px;
-  padding: 24px;
-  border: 1px solid var(--border);
+  padding: 10px;
+  box-shadow: 0 0 20px var(--shadow);
   &:not(.top) {
     align-items: top;
     flex-direction: row;
@@ -141,15 +143,14 @@ export default defineComponent({
     justify-content: center;
    }
    & .card-actions {
+     align-self: end;
      display: flex;
-     justify-content: flex-end;
      padding-top: 20px;
    }
    & .card-title {
     align-items: center;
     display: flex;
     width: 100%;
-    margin-bottom: 15px;
      h5 {
        margin: 0;
      }

package/rancher-components/Form/Checkbox/Checkbox.vue

@@ -317,7 +317,6 @@ export default defineComponent({
           <span
             v-else-if="label"
             :id="idForLabel"
-            :style="label == '记住用户名' ? { color: '#fff' } : ''"
           >{{ label }}</span>
           <i
             v-if="tooltipKey"
@@ -498,9 +497,6 @@ $fontColor: var(--input-label);
 
   // Disabled styles
   &.disabled {
-    span {
-      color: var(--muted);
-    }
     .checkbox-custom {
       background-color: var(--checkbox-disabled-bg);
       border-color: var(--checkbox-disabled-bg);

package/rancher-components/Form/LabeledInput/LabeledInput.vue

@@ -4,7 +4,6 @@ import TextAreaAutoGrow from '@components/Form/TextArea/TextAreaAutoGrow.vue';
 import LabeledTooltip from '@components/LabeledTooltip/LabeledTooltip.vue';
 import { escapeHtml, generateRandomAlphaString } from '@shell/utils/string';
 import cronstrue from 'cronstrue';
-import 'cronstrue/locales/zh_CN';
 import { isValidCron } from 'cron-validator';
 import { debounce } from 'lodash';
 import { useLabeledFormElement, labeledFormElementProps } from '@shell/composables/useLabeledFormElement';
@@ -227,8 +226,7 @@ export default defineComponent({
       }
 
       try {
-        // const hint = cronstrue.toString(this.value as string || '', { verbose: true });
-        const hint = cronstrue.toString(this.value as string || '', { locale: 'zh_CN' });
+        const hint = cronstrue.toString(this.value as string || '', { verbose: true });
 
         return hint;
       } catch (e) {
@@ -349,24 +347,6 @@ export default defineComponent({
 </script>
 
 <template>
-   <div class="label-input-all">
-    <slot name="label">
-      <label
-        v-if="hasLabel"
-        :for="inputId"
-      >
-        <t
-          v-if="labelKey"
-          :k="labelKey"
-        />
-        <template v-else-if="label">{{ label }}</template>
-
-        <span
-          v-if="requiredField"
-          class="required"
-        >*</span>
-      </label>
-    </slot>
   <div
     :class="{
       'labeled-input': true,
@@ -381,7 +361,7 @@ export default defineComponent({
       [className]: true
     }"
   >
-    <!-- <slot name="label">
+    <slot name="label">
       <label
         v-if="hasLabel"
         :for="inputId"
@@ -398,7 +378,7 @@ export default defineComponent({
           :aria-hidden="true"
         >*</span>
       </label>
-    </slot> -->
+    </slot>
 
     <slot name="prefix" />
 
@@ -482,8 +462,6 @@ export default defineComponent({
       />
     </div>
   </div>
-  <slot name="suffixNew" />
-</div>
 </template>
 <style scoped lang="scss">
 .labeled-input.view {
@@ -506,23 +484,6 @@ export default defineComponent({
     -moz-appearance: textfield;
   }
 }
-.label-input-all{
-  display: flex;
-  label{
-    width: 160px !important;
-    line-height: 32px;
-    .required{
-      color: red;
-    }
-  }
-}
-.span-4 {
-  width: none;
-}
-.v-popper--has-tooltip INPUT, .v-popper--has-tooltip INPUT:hover, .v-popper--has-tooltip INPUT:focus{
-  padding: 0px 0px 0px 11px;
-}
-
 </style>
 <style>
 .validation-message {

package/rancher-components/Form/Radio/RadioButton.vue

@@ -198,7 +198,7 @@ export default defineComponent({
         >
           <!-- slot content -->
         </slot>
-        <div
+        <span
           v-else-if="label"
           v-clean-html="label"
         />
@@ -264,25 +264,18 @@ $fontColor: var(--input-label);
   &.disabled,
   &.disabled .radio-label,
   &.disabled .radio-button-outer-container-description {
-    cursor: not-allowed;
-    color: var(--muted);
+    cursor: not-allowed
   }
 
-  .radio-custom {
-    height: 12px;
-    width: 12px;
-    min-height: 13px;
-    min-width: 13px;
+ .radio-custom {
+    height: 14px;
+    width: 14px;
+    min-height: 14px;
+    min-width: 14px;
     background-color: var(--input-bg);
     border-radius: 50%;
-    transition: all 0.3s ease-out;
     border: 1.5px solid var(--border);
-    margin-top: 3px !important;
-
-    &:focus {
-      outline: none;
-      border-radius: 50%;
-    }
+    margin-top: 5px;
   }
 
   input {
@@ -291,37 +284,20 @@ $fontColor: var(--input-label);
 
   .radio-custom {
     &[aria-checked="true"] {
-      background-color: #fff;
+      background-color: var(--primary);
       -webkit-transform: rotate(0deg) scale(1);
       -ms-transform: rotate(0deg) scale(1);
       transform: rotate(0deg) scale(1);
       opacity:1;
       border: 1.5px solid var(--primary);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      
 
-     &::after {
-      background-color: var(--primary);
-      width: 7px;
-      height: 7px;
-      display: inline;
-      content: "";
-      /* position: absolute; */
-      /* top: 17%;
-      left: 19%;
-      margin-left: 0.4px; */
-      /* top: 1.5px;
-      left: 1.5px; */
-      border-radius: 50%;
-      }
       // Ensure that checked radio buttons are muted but still visibly selected when muted
       &.text-muted {
         opacity: .25;
       }
     }
   }
+
   input:disabled ~ .radio-custom:not([aria-checked="true"]) {
     background-color: var(--disabled-bg);
     opacity: .25;
@@ -337,7 +313,7 @@ $fontColor: var(--input-label);
     display: inline-flex;
     flex-direction: column;
 
-    margin: 3px 16px 0px 5px;
+    margin: 3px 10px 0px 5px;
   }
 }
 

package/rancher-components/Form/Radio/RadioGroup.vue

@@ -237,14 +237,14 @@ export default defineComponent({
 </script>
 
 <template>
-  <div style="display: flex;">
+  <div>
     <!-- Label -->
     <div
       v-if="label || labelKey || tooltip || tooltipKey || $slots.label"
-      class="radio-group label radio-group-labelBox"
+      class="radio-group label"
     >
       <slot name="label">
-        <span class="radio-group-title">
+        <h3>
           <t
             v-if="labelKey"
             :k="labelKey"
@@ -262,7 +262,7 @@ export default defineComponent({
             v-clean-tooltip="tooltip"
             class="icon icon-info icon-lg"
           />
-        </span>
+        </h3>
       </slot>
     </div>
 
@@ -334,15 +334,7 @@ export default defineComponent({
   }
 
   .label{
-    font-size: 12px !important;
+    font-size: 14px !important;
   }
 }
-.radio-group-title{
-  font-size: 12px !important;
-  margin-bottom: 0px !important;
-  display: inline-block;
-}
-.radio-group-labelBox {
-  width: 160px;
-}
 </style>

package/rancher-components/Form/TextArea/TextAreaAutoGrow.vue

@@ -108,7 +108,7 @@ export default defineComponent({
      * (unless the input is long)
      */
     style(): string {
-      return `height: ${ this.curHeight }px; overflow: ${ this.overflow };min-height:${ this.curHeight }px;`;
+      return `height: ${ this.curHeight }px; overflow: ${ this.overflow };`;
     },
 
     className(): string | unknown[] | Record<string, boolean> {
@@ -165,13 +165,13 @@ export default defineComponent({
         return;
       }
 
-      // el.style.height = '1px';
+      el.style.height = '1px';
 
       const border = parseInt(getComputedStyle(el).getPropertyValue('borderTopWidth'), 10) || 0 + parseInt(getComputedStyle(el).getPropertyValue('borderBottomWidth'), 10) || 0;
       const neu = Math.max(this.minHeight, Math.min(el.scrollHeight + border, this.maxHeight));
 
       el.style.overflowY = el.scrollHeight > neu ? 'auto' : 'hidden';
-      // el.style.height = `${ neu }px`;
+      el.style.height = `${ neu }px`;
 
       this.curHeight = neu;
     }

package/rancher-components/Form/ToggleSwitch/ToggleSwitch.vue

@@ -94,7 +94,6 @@ export default defineComponent({
     :class="{'toggle-disabled': disabled}"
   >
     <span
-      style="width: 160px;"
       class="label no-select hand"
       :class="{ active: !state}"
       @click="toggle(false)"

package/rancher-components/LabeledTooltip/LabeledTooltip.vue

@@ -109,9 +109,9 @@ export default defineComponent({
 
      .status-icon {
         position:  absolute;
-        right: 5px;
-        top: 10px;
-        z-index: 3;
+        right: 30px;
+        top: $input-padding-lg;
+        z-index: z-index(hoverOverContent);
      }
 
     @mixin tooltipColors($color) {
@@ -120,19 +120,11 @@ export default defineComponent({
         }
     }
 
-    &.null {
-
-        .status-icon {
-          top: 5px;
-          right: -20px;
-        }
-    }
-
     &.error {
         @include tooltipColors(var(--error));
 
         .status-icon {
-          top: 9px !important;
+          top: 7px;
           right: 5px;
         }
     }

package/rancher-components/RcDropdown/RcDropdown.vue

@@ -52,7 +52,7 @@ const {
 
 provideDropdownContext();
 
-// const popperContainer = ref(null);
+const popperContainer = ref(null);
 const dropdownTarget = ref(null);
 
 useClickOutside(dropdownTarget, () => showMenu(false));
@@ -71,30 +71,16 @@ const applyShow = () => {
     :triggers="[]"
     :shown="isMenuOpen"
     :auto-hide="false"
-    append-to-body
+    :container="popperContainer"
     :placement="placement"
     :distance="distance"
     @apply-show="applyShow"
-    popper-class="custom-dropdown" 
   >
     <slot name="default">
       <!--Empty slot content Trigger-->
     </slot>
 
     <template #popper>
-      <!-- <div
-        ref="dropdownTarget"
-        class="dropdownTarget"
-        tabindex="-1"
-        role="menu"
-        aria-orientation="vertical"
-        dropdown-menu-collection
-        :aria-label="ariaLabel || 'Dropdown Menu'"
-        @keydown="handleKeydown"
-        @keydown.down.prevent="setFocus('down')"
-        @keydown.up.prevent="setFocus('up')"
-        
-      > -->
       <div
         ref="dropdownTarget"
         class="dropdownTarget"
@@ -106,8 +92,6 @@ const applyShow = () => {
         @keydown="handleKeydown"
         @keydown.down.prevent="setFocus('down')"
         @keydown.up.prevent="setFocus('up')"
-        @keydown.tab="showMenu(false)"
-        @keydown.escape="returnFocus"
       >
         <slot name="dropdownCollection">
           <!--Empty slot content-->
@@ -115,13 +99,14 @@ const applyShow = () => {
       </div>
     </template>
   </v-dropdown>
-  <!-- <div
+  <div
     ref="popperContainer"
     class="popperContainer"
     @keydown.tab="showMenu(false)"
     @keydown.escape="returnFocus"
   >
-  </div> -->
+    <!--Empty container for mounting popper content-->
+  </div>
 </template>
 
 <style lang="scss" scoped>
@@ -130,8 +115,7 @@ const applyShow = () => {
     &:deep(.v-popper__popper) {
 
       .v-popper__wrapper {
-        box-shadow: 0 5px 20px var(--shadow);
-        /* box-shadow: 0px 6px 18px 0px rgba(0, 0, 0, 0.25), 0px 4px 10px 0px rgba(0, 0, 0, 0.15); */
+        box-shadow: 0px 6px 18px 0px rgba(0, 0, 0, 0.25), 0px 4px 10px 0px rgba(0, 0, 0, 0.15);
         border-radius: var(--border-radius-lg);
 
         .v-popper__arrow-container {
@@ -140,9 +124,7 @@ const applyShow = () => {
 
         .v-popper__inner {
           overflow: unset;
-          /* padding: 10px 0 10px 0; */
-          padding: 0px;
-          /* min-width: 145px; */
+          padding: 10px 0 10px 0;
         }
       }
     }
@@ -156,14 +138,4 @@ const applyShow = () => {
       outline: none;
     }
   }
-
-  .custom-dropdown{
-    .v-popper__wrapper{
-      .v-popper__inner {
-        padding: 0px;
-      }
-    }
-  }
-
 </style>
-

package/rancher-components/RcDropdown/RcDropdownItem.vue

@@ -52,8 +52,8 @@ const handleClick = (e: MouseEvent) => {
     display: flex;
     gap: 8px;
     align-items: center;
-    padding: 8px 10px;
-    min-width: 145px;
+    padding: 9px 8px;
+    margin: 0 9px;
     border-radius: 4px;
 
     &:hover {