feat(divider): use class

juntossomosmais · Jan 30, 2025 · 8f03d80 · 8f03d80
1 parent 249785f
commit 8f03d80
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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} />
   }
 }