From 8f03d80a999516b2e709a166844dedd567b6f713 Mon Sep 17 00:00:00 2001
From: Gabriel Duete <gabrielmonteiroduete@gmail.com>
Date: Thu, 30 Jan 2025 15:45:49 -0300
Subject: [PATCH] feat(divider): use class

---
 packages/core/src/components/divider/divider.scss    | 2 +-
 packages/core/src/components/divider/divider.spec.ts | 4 ++--
 packages/core/src/components/divider/divider.tsx     | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/core/src/components/divider/divider.scss b/packages/core/src/components/divider/divider.scss
index d515f1d34..bc9d96191 100644
--- a/packages/core/src/components/divider/divider.scss
+++ b/packages/core/src/components/divider/divider.scss
@@ -3,7 +3,7 @@
   height: 1px;
   width: 100%;
 
-  &[data-type='vertical'] {
+  &.vertical {
     height: 100%;
     width: 1px;
   }
diff --git a/packages/core/src/components/divider/divider.spec.ts b/packages/core/src/components/divider/divider.spec.ts
index b94aaf54f..aa0cd62ff 100644
--- a/packages/core/src/components/divider/divider.spec.ts
+++ b/packages/core/src/components/divider/divider.spec.ts
@@ -14,7 +14,7 @@ describe('atom-divider', () => {
     expect(page.root).toEqualHtml(`
       <atom-divider type='horizontal'>
         <mock:shadow-root>
-          <div class="atom-divider" data-type="horizontal"></div>
+          <div aria-hidden="" class="atom-divider horizontal"></div>
         </mock:shadow-root>
       </atom-divider>
     `)
@@ -32,7 +32,7 @@ it('should render with prop vertical', async () => {
   expect(page.root).toEqualHtml(`
       <atom-divider type='vertical'>
         <mock:shadow-root>
-          <div class="atom-divider" data-type="vertical"></div>
+          <div aria-hidden="" class="atom-divider vertical"></div>
         </mock:shadow-root>
       </atom-divider>
   `)
diff --git a/packages/core/src/components/divider/divider.tsx b/packages/core/src/components/divider/divider.tsx
index 9341fe3a5..c41104fb1 100644
--- a/packages/core/src/components/divider/divider.tsx
+++ b/packages/core/src/components/divider/divider.tsx
@@ -9,6 +9,6 @@ export class AtomDivider {
   @Prop() type: 'horizontal' | 'vertical' = 'horizontal'
 
   render() {
-    return <div data-type={this.type} class='atom-divider' aria-hidden={true} />
+    return <div class={`atom-divider ${this.type}`} aria-hidden={true} />
   }
 }