feat(components): implementa help adicional ao p-help

Implementa help adicional ao `p-help`, permitindo exibir um tooltip ou disparar um evento. fixes DTHFUI-10443
po-ui · Jan 31, 2025 · 36ef6ca · 36ef6ca
1 parent aee5b7d
commit 36ef6ca
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 22 deletions.
diff --git a/src/css/components/po-field/po-checkbox-group/po-checkbox-group.css b/src/css/components/po-field/po-checkbox-group/po-checkbox-group.css
@@ -25,7 +25,7 @@ po-checkbox-group.ng-invalid.ng-dirty .po-checkbox:not([aria-disabled='true']) {
 }
 
 .po-checkbox-group-content ul {
-  padding: var(--spacing-xs) 0;
-  row-gap: var(--spacing-md);
+  padding-top: var(--spacing-xs);
+  row-gap: var(--spacing-xs);
   width: 100%;
 }
diff --git a/...nents/po-field/po-field-container/po-field-container-bottom/po-field-container-bottom.css b/...nents/po-field/po-field-container/po-field-container-bottom/po-field-container-bottom.css
@@ -13,66 +13,73 @@
 }
 
 .po-field-container-bottom {
-  display: block;
   line-height: var(--line-height);
   font-family: var(--font-family);
   font-size: var(--font-size);
 
   font-weight: var(--font-weight-normal);
-  text-align: left;
 }
 
-.po-field-container-bottom po-icon {
-  line-height: 0px;
+.po-icon-container {
+  position: relative;
+  line-height: inherit;
+  padding-right: var(--spacing-xs);
 }
 
+.po-field-container-bottom-text-error .po-icon,
+.po-field-container-bottom po-icon,
 .po-field-container-bottom i.an {
   font-size: var(--font-size-default);
 }
 
-.po-field-container-bottom-disabled .po-field-container-help {
+.po-field-container-bottom-disabled .po-field-container-bottom-help-text,
+.po-field-container-bottom-disabled .po-icon-additional-help {
   color: var(--text-color-help-disabled);
 }
 
 po-field-container-bottom .po-field-container-bottom {
   padding-bottom: var(--padding-bottom);
 }
 
-.po-field-container-bottom-text-error {
+.po-field-container-bottom-text-error,
+.po-field-container-bottom-help-text {
   display: flex;
-  align-items: center;
-  gap: var(--spacing-xs);
-  color: var(--text-color-error);
 }
 
-.po-field-container-bottom-text-error .po-icon {
-  color: var(--color-icon-error);
-  display: inline-flex;
-  font-size: 1rem;
+.po-field-container-bottom-text-error {
+  color: var(--text-color-error);
 }
 
-.po-field-container-bottom-help-text {
+.po-field-container-bottom-help-text,
+.po-icon-additional-help {
   color: var(--text-color-help);
 }
 
+.po-field-container-bottom-help-text .po-icon-additional-help {
+  order: 2;
+}
+
+.po-field-container-bottom-help-text span {
+  order: 1;
+}
+
+.po-field-container-bottom-text-error po-icon {
+  color: var(--color-icon-error);
+  padding-right: var(--spacing-xs);
+}
+
 .po-field-container-error-item {
   display: block;
   margin-bottom: 12px;
   position: relative;
 }
 
 .po-field-container-error-item i {
-  font-size: 16px;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
 }
 
-.po-field-container-icon-error {
-  line-height: 24px;
-  vertical-align: top;
-}
-
 .po-field-container-error-container {
   display: block;
   margin-top: 4px;