Replaced btn-link class with btn-tertiary

uyuni-project · Jan 14, 2025 · f137ab6 · f137ab6
1 parent ea9da81
commit f137ab6
Show file tree

Hide file tree

Showing 24 changed files with 83 additions and 88 deletions.
diff --git a/java/code/webapp/WEB-INF/pages/common/fragments/configuration/channel/properties.jspf b/java/code/webapp/WEB-INF/pages/common/fragments/configuration/channel/properties.jspf
@@ -8,15 +8,15 @@
                 <c:choose>
                 <c:when test="${channelOverviewForm.map.editing != 'true'}">
                   <a 
-                    role="button" class="btn-unstyled pull-right"
+                    role="button" class="btn-tertiary pull-right"
                     title="<bean:message key='channelOverview.jsp.choose-edit' />"
                     href="/rhn/configuration/ChannelOverview.do?ccid=${ccid}&amp;editing=true">
                     <rhn:icon type="item-edit" />
                   </a>
                 </c:when>
                 <c:otherwise>
                   <a 
-                    role="button" class="btn-unstyled pull-right"
+                    role="button" class="btn-tertiary pull-right"
                     title="Cancel"
                     href="/rhn/configuration/ChannelOverview.do?ccid=${ccid}&amp">
                     <rhn:icon type="item-close" />

diff --git a/java/code/webapp/WEB-INF/pages/common/fragments/user/edit_user_table_rows.jspf b/java/code/webapp/WEB-INF/pages/common/fragments/user/edit_user_table_rows.jspf
@@ -98,7 +98,7 @@
         <c:choose>
             <c:when test="${!empty mailableAddress}">
                 ${mailableAddress}
-                <a role="button" class="btn-unstyled" title="Edit Email" href="<c:out value="${email_link}"/>">
+                <a role="button" class="btn-tertiary" title="Edit Email" href="<c:out value="${email_link}"/>">
                     <rhn:icon type="setup-wizard-creds-edit" />
                     <%--
                     <bean:message key="${email_display}"/>

diff --git a/java/code/webapp/WEB-INF/pages/groups/detail.jsp b/java/code/webapp/WEB-INF/pages/groups/detail.jsp
@@ -106,7 +106,7 @@
     <a href="/rhn/groups/EditGroup.do?sgid=${id}"
       title="<bean:message key='systemgroup.details.editproperties' />"
       role="button"
-      class="js-spa btn-unstyled pull-right">
+      class="js-spa btn-tertiary pull-right">
         <rhn:icon type="item-edit" />
     </a>
   </rhn:require>

diff --git a/java/code/webapp/WEB-INF/pages/systems/sdc/overview.jsp b/java/code/webapp/WEB-INF/pages/systems/sdc/overview.jsp
@@ -267,7 +267,7 @@
             <a href="/rhn/systems/details/SystemChannels.do?sid=${system.id}"
               title="<bean:message key='sdc.details.overview.subscribedchannels.edit' />"
               role="button"
-              class="js-spa btn-unstyled pull-right">
+              class="js-spa btn-tertiary pull-right">
                 <rhn:icon type="item-edit" />
             </a>
           </h4>
@@ -381,7 +381,7 @@
             <a href="/rhn/systems/details/Edit.do?sid=${system.id}"
               title="<bean:message key='sdc.details.overview.sysproperties.edit' />"
               role="button"
-              class="js-spa btn-unstyled pull-right">
+              class="js-spa btn-tertiary pull-right">
                 <rhn:icon type="item-edit" />
             </a>
           </h4>

diff --git a/testsuite/features/secondary/minssh_action_chain.feature b/testsuite/features/secondary/minssh_action_chain.feature
@@ -187,7 +187,7 @@ Feature: Salt SSH action chain
   Scenario: Delete the action chain for SSH minion
     When I follow the left menu "Schedule > Action Chains"
     And I follow "new action chain"
-    And I follow "Delete" in the content area
+    And I follow "Delete Action Chains" in the content area
     Then I click on "Delete"
 
   Scenario: Cleanup: roll back action chain effects on SSH minion

diff --git a/web/html/src/branding/css/base/components/buttons.scss b/web/html/src/branding/css/base/components/buttons.scss
@@ -20,7 +20,8 @@
 .btn,
 .btn-default,
 .btn-primary,
-.btn-danger {
+.btn-danger,
+.btn-tertiary {
   // We use flex to ensure icons etc are correctly aligned in buttons
   display: inline-flex;
   align-items: center;

diff --git a/web/html/src/branding/css/base/components/buttons.suma.scss b/web/html/src/branding/css/base/components/buttons.suma.scss
@@ -69,12 +69,14 @@
   }
 }
 
-.btn-unstyled {
+.btn-tertiary {
   background: none;
   border: 0;
   padding: 4px 8px;
   color: $eos-bc-pine-500;
-  font-size: 16px;
+  font-weight: bold;
+  text-decoration: underline;
+  align-self: center;
 
   i {
     margin-right: 0;
@@ -200,12 +202,9 @@
 }
 
 .panel-heading,
-th {
-  .btn-link,
-  a:not(.btn-unstyled) {
-    border: none;
-    padding: 0;
-    font-weight: bold !important;
-    color: $eos-bc-gray-1000 !important;
-  }
+th .orderBy {
+  border: none;
+  padding: 0;
+  font-weight: bold !important;
+  color: $eos-bc-gray-1000 !important;
 }
diff --git a/web/html/src/components/FormulaForm.tsx b/web/html/src/components/FormulaForm.tsx
@@ -266,14 +266,14 @@ class FormulaForm extends React.Component<Props, State> {
         <Button
           handler={() => this.setState({ sectionsExpanded: SectionState.Expanded })}
           text={t("Expand All Sections")}
-          className="btn-link"
+          className="btn-tertiary"
         />
       );
       const hideAllButton = (
         <Button
           handler={() => this.setState({ sectionsExpanded: SectionState.Collapsed })}
           text={t("Collapse All Sections")}
-          className="btn-link"
+          className="btn-tertiary"
         />
       );
       return (

diff --git a/web/html/src/components/buttons.tsx b/web/html/src/components/buttons.tsx
@@ -5,12 +5,13 @@ import * as React from "react";
  * @module buttons
  */
 
+type ButtonVariant = "btn-primary" | "btn-default" | "btn-tertiary" | "btn-danger";
+
 type BaseProps = {
   /** Text to display on the button. */
   text?: React.ReactNode;
   /** Text to display on the button. */
   children?: React.ReactNode;
-
   /**
    * FontAwesome icon class of the button. Can also include additional FA classes
    * (sizing, animation etc.).
@@ -162,9 +163,8 @@ export type ButtonProps = BaseProps & {
 export class Button extends _ButtonBase<ButtonProps> {
   render() {
     const text = this.props.text ?? this.props.children;
-    const cssClasses = this.props.unstyled
-      ? "btn-unstyled " + (this.props.className ?? "")
-      : "btn " + (this.props.className ?? "btn-default");
+    const cssClasses = "btn " + (this.props.className ?? "btn-default");
+
     return (
       <button
         id={this.props.id}
@@ -174,9 +174,7 @@ export class Button extends _ButtonBase<ButtonProps> {
         onClick={this.props.handler}
         disabled={this.props.disabled}
       >
-        {this.props.unstyled ? (
-          <>{this.renderIcon()}</>
-        ) : (
+        {(
           <>
             {this.renderIcon()}
             {text}
@@ -205,17 +203,17 @@ export class LinkButton extends _ButtonBase<LinkProps> {
   render() {
     const text = this.props.text ?? this.props.children;
     const cssClasses = this.props.unstyled
-      ? "btn-unstyled " + (this.props.className ?? "")
+      ? "btn-tertiary " + (this.props.className ?? "")
       : "btn " + this.props.className;
     const targetProps: Partial<React.HTMLProps<HTMLAnchorElement>> =
       this.props.target === "_blank"
         ? {
-            target: "_blank",
-            rel: "noopener noreferrer",
-          }
+          target: "_blank",
+          rel: "noopener noreferrer",
+        }
         : {
-            target: this.props.target,
-          };
+          target: this.props.target,
+        };
     return (
       <a
         role="button"

diff --git a/web/html/src/components/coco-attestation/CoCoAttestationTable.tsx b/web/html/src/components/coco-attestation/CoCoAttestationTable.tsx
@@ -48,7 +48,7 @@ class CoCoAttestationTable extends React.Component<Props> {
                 header={t("Attestation")}
                 cell={(row) => (
                   <Button
-                    className="btn btn-link"
+                    className="btn-tertiary"
                     handler={() => this.props.onReportDetails(row)}
                     text={t("Attestation #{identifier} run on {date} at {time}", {
                       identifier: row.id,

diff --git a/web/html/src/components/dialog/ModalLink.tsx b/web/html/src/components/dialog/ModalLink.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 
 import { showDialog } from "./util";
-
+import { Button } from "components/buttons";
 type Props = {
   target: string;
   id?: string;
@@ -23,17 +23,16 @@ export function ModalLink(props: Props) {
   var icon = props.icon && <i className={"fa " + props.icon + margin} />;
 
   return (
-    <button
+    <Button
       id={props.id}
       title={props.title}
-      className={"btn-link " + (props.className || "")}
-      onClick={() => {
+      className={"btn-tertiary " + (props.className || "")}
+      icon={props.icon}
+      text={props.text}
+      handler={() => {
         if (props.onClick) props.onClick(props.item);
         showDialog(props.target);
       }}
-    >
-      {icon}
-      {props.text}
-    </button>
+    />
   );
 }
diff --git a/web/html/src/components/formula-selection.tsx b/web/html/src/components/formula-selection.tsx
@@ -280,14 +280,14 @@ class FormulaSelection extends React.Component<Props, State> {
                 id="clear-btn"
                 icon="fa-eraser"
                 text="Remove all"
-                className="btn btn-default"
+                className="btn-default"
                 handler={this.removeAllFormulas}
               />
               <Button
                 id="reset-btn"
                 icon="fa-undo"
                 text="Reset Changes"
-                className="btn btn-default"
+                className="btn-default"
                 handler={this.resetChanges}
               />
               <AsyncButton id="save-btn" icon="fa-floppy-o" action={this.saveRequest} text={t("Save")} />

diff --git a/web/html/src/components/table/Header.tsx b/web/html/src/components/table/Header.tsx
@@ -41,12 +41,12 @@ export function Header(props: HeaderProps) {
 
     return (
       <th style={thStyle} className={thClass}>
-        <button
-          className="btn-link orderBy"
+        <a
+          className="orderBy"
           onClick={() => props.onSortChange?.(props.columnKey || null, newDirection)}
         >
           {props.children}
-        </button>
+        </a>
       </th>
     );
   }

diff --git a/web/html/src/components/table/SearchPanel.tsx b/web/html/src/components/table/SearchPanel.tsx
@@ -3,6 +3,7 @@ import * as React from "react";
 import { cloneReactElement } from "components/utils";
 
 import styles from "./SearchPanel.module.scss";
+import { Button } from "components/buttons";
 
 type SearchPanelProps = {
   /** number representing the number of the first displayed item */
@@ -62,16 +63,12 @@ export function SearchPanel(props: SearchPanelProps) {
         {props.selectable && props.selectedCount > 0 && (
           <span>
             {t("({selectedCount} selected)", { selectedCount: props.selectedCount })}&nbsp;
-            <button className="btn-link" onClick={props.onClear}>
-              {t("Clear")}
-            </button>
+            <Button className="btn-tertiary" handler={props.onClear} text={t("Clear")} />
             &nbsp;/&nbsp;
           </span>
         )}
         {props.selectable && (
-          <button className="btn-link" onClick={props.onSelectAll}>
-            {t("Select All")}
-          </button>
+          <Button className="btn-tertiary" handler={props.onSelectAll} text={t("Select All")} />
         )}
       </div>
     </div>

diff --git a/web/html/src/core/spa/spa-engine.tsx b/web/html/src/core/spa/spa-engine.tsx
@@ -8,6 +8,7 @@ import App, { HtmlScreen } from "senna";
 import SpaRenderer from "core/spa/spa-renderer";
 
 import { showErrorToastr } from "components/toastr";
+import { Button } from "components/buttons";
 
 function isLoginPage(pathName) {
   const allLoginPossiblePaths = ["/", "/rhn/manager/login"];
@@ -101,9 +102,7 @@ window.pageRenderers.spaengine.init = function init(timeout?: number) {
           const message = (
             <>
               Request has timed out, please
-              <button className="btn-link" onClick={() => (window.location = navigation.path)}>
-                reload the page
-              </button>
+              <Button className="btn-tertiary" text="reload the page" handler={() => (window.location = navigation.path)} />
             </>
           );
           showErrorToastr(message, { autoHide: false, containerId: "global" });

diff --git a/web/html/src/manager/admin/setup/products/products.tsx b/web/html/src/manager/admin/setup/products/products.tsx
@@ -336,8 +336,8 @@ class ProductsPageWrapper extends React.Component {
       const submitButtonTitle = this.state.sccSyncRunning
         ? t("The product catalog is still refreshing, please wait.")
         : this.state.selectedItems.length === 0
-        ? t("Select some product first.")
-        : undefined;
+          ? t("Select some product first.")
+          : undefined;
       const addProductButton =
         this.state.sccSyncRunning || this.state.selectedItems.length === 0 || this.state.addingProducts ? (
           <Button
@@ -1026,7 +1026,7 @@ class CheckListItem extends React.Component<CheckListItemProps> {
             {channelSyncContent}
             {childProductChannelSyncContent}
             <button
-              className="btn-link showChannels"
+              className="btn-tertiary showChannels"
               onClick={() => this.props.bypassProps.showChannelsfor(currentItem)}
               title={t("Show product's channels")}
             >

diff --git a/web/html/src/manager/appstreams/channel-appstreams.tsx b/web/html/src/manager/appstreams/channel-appstreams.tsx
@@ -1,5 +1,6 @@
 import { AppStreamModule, Channel } from "./appstreams.type";
 import { getStreamName } from "./utils";
+import { Button } from "components/buttons";
 
 interface Props {
   channel: Channel;
@@ -42,9 +43,9 @@ export const ChannelAppStreams = ({
           <tr key={`${moduleStream.name}_${moduleStream.stream}`} className={changedStatus ? "changed" : ""}>
             {streamIdx === 0 && <td rowSpan={streams.length}>{moduleName}</td>}
             <td>
-              <button className={"btn btn-link"} onClick={() => showPackages && showPackages(stream)}>
+              <Button className={"btn-tertiary"} handler={() => showPackages && showPackages(stream)}>
                 {enabled ? <strong>{stream}</strong> : stream}
-              </button>
+              </Button>
             </td>
             <td>
               <div className="form-group">

diff --git a/web/html/src/manager/content-management/list-filters/appstreams/appstreams.tsx b/web/html/src/manager/content-management/list-filters/appstreams/appstreams.tsx
@@ -7,6 +7,7 @@ import Network from "utils/network";
 
 import SelectInput from "./select-input";
 import TextInput from "./text-input";
+import { Button } from "components/buttons";
 
 export default function AppStreams({ matcher }) {
   const [channels, setChannels] = useState<{ id: string; name: string }[]>([]);
@@ -31,10 +32,11 @@ export default function AppStreams({ matcher }) {
       <>
         <div className="form-group">
           <div className="col-md-offset-3 offset-md-3 col-md-6">
-            <button className="btn-link" onClick={enableBrowse}>
-              {isLoading ? <i className="fa fa-refresh fa-spin fa-fw" /> : <i className="fa fa-search fa-fw" />}
-              Browse available modules
-            </button>
+            <Button
+              className="btn-tertiary"
+              handler={enableBrowse}
+              icon={isLoading ? "fa-refresh fa-spin fa-fw" : "fa-search fa-fw"}
+              text="Browse available modules" />
           </div>
         </div>
         <TextInput />

diff --git a/web/html/src/manager/content-management/list-filters/filter-edit.tsx b/web/html/src/manager/content-management/list-filters/filter-edit.tsx
@@ -49,8 +49,9 @@ const FilterEditModalContent = ({
 type FilterEditProps = {
   id: string;
   initialFilterForm: Partial<FilterFormType>;
-  icon: string;
-  buttonText: string;
+  icon?: string;
+  buttonText?: string;
+  buttonTitle?: string;
   className?: string;
   onChange: Function;
   openFilterId?: number;
@@ -128,7 +129,7 @@ const FilterEdit = (props: FilterEditProps) => {
         id={`${props.id}-modal-link`}
         icon={props.icon}
         text={props.buttonText}
-        title={props.buttonText}
+        title={props.buttonTitle}
         target={modalNameId}
         className={props.className}
         onClick={() => {