fix(link): adapt icon style to icon font

ovh · Jul 29, 2024 · 49365cd · 49365cd
1 parent 6b61316
commit 49365cd
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 32 deletions.
diff --git a/packages/ods/src/components/button/src/index.html b/packages/ods/src/components/button/src/index.html
@@ -97,30 +97,30 @@
   </ods-button>
 
   <p>Icon</p>
-  <ods-button label="Icon button" icon="warning" variant="default" color="primary" size="md">
+  <ods-button label="Icon button" icon="add" variant="default" color="primary" size="md">
   </ods-button>
-  <ods-button label="Icon button" icon="warning" variant="outline" color="primary" size="md">
+  <ods-button label="Icon button" icon="add" variant="outline" color="primary" size="md">
   </ods-button>
-  <ods-button label="Icon button" icon="warning" variant="ghost" color="primary" size="md">
+  <ods-button label="Icon button" icon="add" variant="ghost" color="primary" size="md">
   </ods-button>
-  <ods-button label="Icon button" icon="warning" variant="default" color="critical" size="md">
+  <ods-button label="Icon button" icon="add" variant="default" color="critical" size="md">
   </ods-button>
-  <ods-button label="Icon button" icon="warning" variant="outline" color="critical" size="md">
+  <ods-button label="Icon button" icon="add" variant="outline" color="critical" size="md">
   </ods-button>
-  <ods-button label="Icon button" icon="warning" variant="ghost" color="critical" size="md">
+  <ods-button label="Icon button" icon="add" variant="ghost" color="critical" size="md">
   </ods-button>
   <br /><br />
-  <ods-button label="Icon button" icon="warning" variant="default" color="primary" size="sm">
+  <ods-button label="Icon button" icon="add" variant="default" color="primary" size="sm">
   </ods-button>
-  <ods-button label="Icon button" icon="warning" variant="outline" color="primary" size="sm">
+  <ods-button label="Icon button" icon="add" variant="outline" color="primary" size="sm">
   </ods-button>
-  <ods-button label="Icon button" icon="warning" variant="ghost" color="primary" size="sm">
+  <ods-button label="Icon button" icon="add" variant="ghost" color="primary" size="sm">
   </ods-button>
-  <ods-button label="Icon button" icon="warning" variant="default" color="critical" size="sm">
+  <ods-button label="Icon button" icon="add" variant="default" color="critical" size="sm">
   </ods-button>
-  <ods-button label="Icon button" icon="warning" variant="outline" color="critical" size="sm">
+  <ods-button label="Icon button" icon="add" variant="outline" color="critical" size="sm">
   </ods-button>
-  <ods-button label="Icon button" icon="warning" variant="ghost" color="critical" size="sm">
+  <ods-button label="Icon button" icon="add" variant="ghost" color="critical" size="sm">
   </ods-button>
 
   <p>Form</p>

diff --git a/packages/ods/src/components/link/src/components/ods-link/ods-link.scss b/packages/ods/src/components/link/src/components/ods-link/ods-link.scss
@@ -20,22 +20,13 @@
       }
     }
 
-    &__text {
-      display: inline-flex;
-      align-items: center;
-    }
-
-    &__icon {
-      margin-left: var(--ods-spacing-8);
-      background-color: currentcolor;
-    }
-
     &--disabled {
       opacity: .5;
       cursor: not-allowed;
       color: var(--ods-color-neutral-400);
 
-      &:focus-visible, &:hover {
+      &:focus-visible,
+      &:hover {
         transition: none;
         background-size: 0;
       }

diff --git a/packages/ods/src/components/link/src/components/ods-link/ods-link.tsx b/packages/ods/src/components/link/src/components/ods-link/ods-link.tsx
@@ -41,15 +41,13 @@ export class OdsLink {
         rel={ this.rel }
         tabindex={ this.disabled ? -1 : 0 }
         target={ this.target }>
-          <span class="ods-link__link__text">
+          <span>
             { this.label }
           </span>
 
           {
             !!this.icon &&
-            <ods-icon
-              class="ods-link__link__icon"
-              name={ this.icon }>
+            <ods-icon name={ this.icon }>
             </ods-icon>
           }
         </a>

diff --git a/packages/ods/src/components/link/src/index.html b/packages/ods/src/components/link/src/index.html
@@ -20,11 +20,11 @@
   </ods-link>
 
   <p>Icon</p>
-  <ods-link href="test" label="link icon clickable" icon="warning">
+  <ods-link href="test" label="link icon clickable" icon="arrow-right">
   </ods-link>
 
   <p>Icon Disabled</p>
-  <ods-link href="test" label="link icon disabled" icon="warning" disabled>
+  <ods-link href="test" label="link icon disabled" icon="arrow-right" disabled>
   </ods-link>
 
   <p>Custom CSS</p>

diff --git a/packages/ods/src/style/_link.scss b/packages/ods/src/style/_link.scss
@@ -2,19 +2,20 @@
 
 @mixin ods-link() {
   display: inline-flex;
+  flex-flow: row;
+  grid-gap: var(--ods-spacing-8);
   align-items: center;
   transition: background-size .2s ease-in, color ease-in-out .1s;
   background-image: linear-gradient(currentcolor, currentcolor);
   background-position: 0 100%;
   background-repeat: no-repeat;
   background-size: 0 1px;
   cursor: pointer;
-  padding-bottom: 3px;
   text-decoration: none;
-  font-family: var(--ods-font-family-default);
   font-weight: 600;
 
-  &:focus-visible, &:hover {
+  &:focus-visible,
+  &:hover {
     transition: background-size .2s ease-out;
     background-size: 100% 1px;
   }