fix(toggle): box-sizing & display

Signed-off-by: Alexandre Esteves <[email protected]>
ovh · Nov 28, 2024 · df512ca · df512ca
1 parent 9a464d2
commit df512ca
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 5 deletions.
diff --git a/packages/ods/src/components/input/src/components/ods-input/ods-input.tsx b/packages/ods/src/components/input/src/components/ods-input/ods-input.tsx
@@ -125,7 +125,7 @@ export class OdsInput {
   }
 
   @Method()
-  async toggleMask(): Promise<void> {
+  public async toggleMask(): Promise<void> {
     this.isMasked = !this.isMasked;
     this.odsToggleMask.emit();
   }

diff --git a/packages/ods/src/components/textarea/src/components/ods-textarea/ods-textarea.tsx b/packages/ods/src/components/textarea/src/components/ods-textarea/ods-textarea.tsx
@@ -87,7 +87,7 @@ export class OdsTextarea {
   }
 
   @Method()
-  async reset(): Promise<void> {
+  public async reset(): Promise<void> {
     this.odsReset.emit();
     this.value = this.defaultValue ?? null;
 

diff --git a/packages/ods/src/components/textarea/tests/validity/ods-textarea.e2e.ts b/packages/ods/src/components/textarea/tests/validity/ods-textarea.e2e.ts
@@ -248,6 +248,7 @@ describe('ods-textarea validity', () => {
     describe('willValidate', () => {
       it('should return true if element is submittable', async() => {
         await setup('<ods-textarea></ods-textarea>');
+
         expect(await el.callMethod('willValidate')).toBe(true);
       });
 

diff --git a/packages/ods/src/components/toggle/src/components/ods-toggle/ods-toggle.scss b/packages/ods/src/components/toggle/src/components/ods-toggle/ods-toggle.scss
@@ -1,8 +1,13 @@
 @use '../../../../../style/focus';
 @use '../../../../../style/state';
 
+:host(.ods-toggle) {
+  display: inline-block;
+}
+
 .ods-toggle {
   &__container {
+    box-sizing: border-box;
     display: inline-block;
     position: relative;
     border: 1px solid transparent;
@@ -25,8 +30,8 @@
 
       &::before {
         position: absolute;
-        bottom: 2px;
-        left: 2px;
+        bottom: 1px;
+        left: 1px;
         transition: all .4s ease;
         z-index: 1;
         border-radius: 1rem;
@@ -64,7 +69,7 @@
         right: 0;
         bottom: 0;
         align-items: center;
-        padding-right: 4px;
+        padding-right: 1px;
         color: var(--ods-color-neutral-700);
         font-size: 12px;
         font-weight: 700;