fix(style): add link color mixin & fix misc issues

ovh · Jul 29, 2024 · af92e03 · af92e03
1 parent f323a12
commit af92e03
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 13 deletions.
diff --git a/packages/examples/react-webpack/src/app/components/gallery/Gallery.tsx b/packages/examples/react-webpack/src/app/components/gallery/Gallery.tsx
@@ -14,13 +14,13 @@ function Gallery(): ReactElement {
         </div>
       </div>
 
-      {/* Diff on height */}
+      {/* OK */}
       <div>
         <OdsButton label="ODS Button" />
 
-        <div className={ styles['gallery__my-button'] }>
+        <button className={ styles['gallery__my-button'] }>
           My Button
-        </div>
+        </button>
       </div>
 
       {/* OK */}

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
@@ -8,15 +8,7 @@
 
     &:not(&#{$current}--disabled) {
       &#{$current}--primary {
-        color: var(--ods-color-primary-500);
-
-        &:hover {
-          color: var(--ods-color-primary-700);
-        }
-
-        &:visited {
-          color: var(--ods-color-primary-800);
-        }
+        @include link.ods-link-color('primary');
       }
     }
 

diff --git a/packages/ods/src/components/text/src/components/ods-text/ods-text.scss b/packages/ods/src/components/text/src/components/ods-text/ods-text.scss
@@ -1,5 +1,10 @@
 @use '../../../../../style/text';
 
+:host(.ods-text) {
+  display: inline-block;
+  height: inherit;
+}
+
 .ods-text {
   &--heading-1 {
     @include text.ods-text-heading-1();

diff --git a/packages/ods/src/style/_link.scss b/packages/ods/src/style/_link.scss
@@ -25,3 +25,17 @@ $ods-link-font-weight: 600;
     @include focus.ods-focus();
   }
 }
+
+@mixin ods-link-color($color) {
+  @if $color == 'primary' {
+    color: var(--ods-color-primary-500);
+
+    &:hover {
+      color: var(--ods-color-primary-700);
+    }
+
+    &:visited {
+      color: var(--ods-color-primary-800);
+    }
+  }
+}
diff --git a/packages/ods/src/style/_radio.scss b/packages/ods/src/style/_radio.scss
@@ -1,4 +1,4 @@
-@use '../../../../../style/focus';
+@use './focus';
 
 @mixin ods-radio() {
   appearance: none;