feat(radio): added prefix rdx

radix-ng · Sep 16, 2024 · e5ebbc6 · e5ebbc6
1 parent 86bbb6a
commit e5ebbc6
Show file tree

Hide file tree

Showing 6 changed files with 121 additions and 104 deletions.
diff --git a/packages/primitives/radio/src/radio-indicator.directive.ts b/packages/primitives/radio/src/radio-indicator.directive.ts
@@ -3,8 +3,8 @@ import { RdxRadioItemDirective } from './radio-item.directive';
 import { RDX_RADIO_GROUP, RadioGroupDirective } from './radio-tokens';
 
 @Directive({
-    selector: '[RadioIndicator]',
-    exportAs: 'RadioIndicator',
+    selector: '[rdxRadioIndicator]',
+    exportAs: 'rdxRadioIndicator',
     standalone: true,
     host: {
         '[attr.data-state]': 'radioItem.checked ? "checked" : "unchecked"',

diff --git a/packages/primitives/radio/src/radio-item.directive.ts b/packages/primitives/radio/src/radio-item.directive.ts
@@ -12,8 +12,8 @@ export function injectRadioItem(): RdxRadioItemDirective {
 let nextUniqueId = 0;
 
 @Directive({
-    selector: '[RadioItem]',
-    exportAs: 'RadioItem',
+    selector: '[rdxRadioItem]',
+    exportAs: 'rdxRadioItem',
     standalone: true,
     providers: [{ provide: RdxRadioItemToken, useExisting: RdxRadioItemDirective }],
     host: {

diff --git a/packages/primitives/radio/src/radio-root.directive.ts b/packages/primitives/radio/src/radio-root.directive.ts
@@ -17,8 +17,8 @@ import { RdxRadioItemDirective } from './radio-item.directive';
 import { RadioGroupDirective, RadioGroupProps, RDX_RADIO_GROUP } from './radio-tokens';
 
 @Directive({
-    selector: 'div[RadioRoot]',
-    exportAs: 'RadioRoot',
+    selector: '[rdxRadioRoot]',
+    exportAs: 'rdxRadioRoot',
     standalone: true,
     providers: [
         { provide: RDX_RADIO_GROUP, useExisting: RdxRadioGroupDirective },

diff --git a/packages/primitives/radio/stories/radio-group.component.ts b/packages/primitives/radio/stories/radio-group.component.ts
@@ -9,12 +9,12 @@ import { RdxRadioGroupDirective, RdxRadioIndicatorDirective, RdxRadioItemDirecti
     selector: 'radio-groups-forms-example',
     standalone: true,
     template: `
-        <div class="RadioGroupRoot" [(ngModel)]="hotelRoom" RadioRoot aria-label="View density">
+        <div class="RadioGroupRoot" [(ngModel)]="hotelRoom" rdxRadioRoot aria-label="View density">
             @for (room of rooms; track room) {
                 <div class="RadioGroup">
-                    <button class="RadioGroupItem" [value]="room" [id]="room" RadioItem>
-                        <div class="RadioGroupIndicator" RadioIndicator></div>
-                        <input class="Input" RadioIndicator type="radio" aria-hidden="true" tabindex="-1" />
+                    <button class="RadioGroupItem" [value]="room" [id]="room" rdxRadioItem>
+                        <div class="RadioGroupIndicator" rdxRadioIndicator></div>
+                        <input class="Input" rdxRadioIndicator type="radio" aria-hidden="true" tabindex="-1" />
                     </button>
                     <label class="Label" [htmlFor]="room" rdxLabel>
                         {{ room }}

diff --git a/packages/primitives/radio/stories/radio.docs.mdx b/packages/primitives/radio/stories/radio.docs.mdx
@@ -28,9 +28,9 @@ import { RdxRadioIndicatorDirective, RadioItemDirectiveб } from '@radix-ng/prim
 ## Anatomy
 
 ```html
-<div RadioRoot [(rdxRadioGroupValue)]="value">
-  <button RadioItem value="default">
-    <div RadioIndicator></div>
+<div rdxRadioRoot>
+  <button rdxRadioItem value="default">
+    <div rdxRadioIndicator></div>
   </button>
 </div>
 ```

diff --git a/packages/primitives/radio/stories/radio.stories.ts b/packages/primitives/radio/stories/radio.stories.ts
@@ -5,6 +5,8 @@ import { RdxRadioItemDirective } from '../src/radio-item.directive';
 import { RdxRadioGroupDirective } from '../src/radio-root.directive';
 import { RadioGroupComponent } from './radio-group.component';
 
+const html = String.raw;
+
 export default {
     title: 'Primitives/Radio Group',
     decorators: [
@@ -30,104 +32,119 @@ type Story = StoryObj;
 
 export const Default: Story = {
     render: () => ({
-        template: `
-<form>
-    <div RadioRoot class="RadioGroupRoot" aria-label="View density">
-        <div style="display: flex; align-items: center;">
-            <button RadioItem class="RadioGroupItem" value="default" id="r1">
-                <div RadioIndicator class="RadioGroupIndicator"></div>
-                <input RadioIndicator type="radio" aria-hidden="true" tabindex="-1" value="default" class="Input">
-            </button>
-            <label rdxLabel htmlFor="r1" class="Label">
-              Default
-            </label>
-        </div>
-        <div style="display: flex; align-items: center;">
-            <button RadioItem class="RadioGroupItem" value="comfortable" id="r2">
-                 <div RadioIndicator class="RadioGroupIndicator"></div>
-                 <input RadioIndicator type="radio" aria-hidden="true" tabindex="-1" value="comfortable" class="Input">
-            </button>
-            <label rdxLabel htmlFor="r2" class="Label">
-              Comfortable
-            </label>
-        </div>
-        <div style="display: flex; align-items: center;">
-            <button RadioItem class="RadioGroupItem" value="compact" id="r3">
-                 <div RadioIndicator class="RadioGroupIndicator"></div>
-                 <input RadioIndicator type="radio" aria-hidden="true" tabindex="-1" value="compact" class="Input">
-            </button>
-            <label rdxLabel htmlFor="r3" class="Label">
-              Compact
-            </label>
-        </div>
-    </div>
-</form>
+        template: html`
+            <form>
+                <div class="RadioGroupRoot" rdxRadioRoot aria-label="View density">
+                    <div style="display: flex; align-items: center;">
+                        <button class="RadioGroupItem" id="r1" rdxRadioItem value="default">
+                            <div class="RadioGroupIndicator" rdxRadioIndicator></div>
+                            <input
+                                class="Input"
+                                rdxRadioIndicator
+                                type="radio"
+                                aria-hidden="true"
+                                tabindex="-1"
+                                value="default"
+                            />
+                        </button>
+                        <label class="Label" rdxLabel htmlFor="r1">Default</label>
+                    </div>
+                    <div style="display: flex; align-items: center;">
+                        <button class="RadioGroupItem" id="r2" rdxRadioItem value="comfortable">
+                            <div class="RadioGroupIndicator" rdxRadioIndicator></div>
+                            <input
+                                class="Input"
+                                rdxRadioIndicator
+                                type="radio"
+                                aria-hidden="true"
+                                tabindex="-1"
+                                value="comfortable"
+                            />
+                        </button>
+                        <label class="Label" rdxLabel htmlFor="r2">Comfortable</label>
+                    </div>
+                    <div style="display: flex; align-items: center;">
+                        <button class="RadioGroupItem" id="r3" rdxRadioItem value="compact">
+                            <div class="RadioGroupIndicator" rdxRadioIndicator></div>
+                            <input
+                                class="Input"
+                                rdxRadioIndicator
+                                type="radio"
+                                aria-hidden="true"
+                                tabindex="-1"
+                                value="compact"
+                            />
+                        </button>
+                        <label class="Label" rdxLabel htmlFor="r3">Compact</label>
+                    </div>
+                </div>
+            </form>
 
-<style>
-/* reset */
-button {
-  all: unset;
-}
+            <style>
+                /* reset */
+                button {
+                    all: unset;
+                }
 
-.RadioGroupRoot {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
+                .RadioGroupRoot {
+                    display: flex;
+                    flex-direction: column;
+                    gap: 10px;
+                }
 
-.RadioGroupItem {
-  background-color: white;
-  width: 25px;
-  height: 25px;
-  border-radius: 100%;
-  box-shadow: 0 2px 10px var(--black-a7);
-}
-.RadioGroupItem:hover {
-  background-color: var(--violet-3);
-}
-.RadioGroupItem:focus {
-  box-shadow: 0 0 0 2px black;
-}
+                .RadioGroupItem {
+                    background-color: white;
+                    width: 25px;
+                    height: 25px;
+                    border-radius: 100%;
+                    box-shadow: 0 2px 10px var(--black-a7);
+                }
+                .RadioGroupItem:hover {
+                    background-color: var(--violet-3);
+                }
+                .RadioGroupItem:focus {
+                    box-shadow: 0 0 0 2px black;
+                }
 
-.RadioGroupIndicator {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
-.RadioGroupIndicator::after {
-  content: '';
-  display: block;
-  width: 11px;
-  height: 11px;
-  border-radius: 50%;
-  background-color: var(--violet-11);
-}
+                .RadioGroupIndicator {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    width: 100%;
+                    height: 100%;
+                    position: relative;
+                }
+                .RadioGroupIndicator::after {
+                    content: '';
+                    display: block;
+                    width: 11px;
+                    height: 11px;
+                    border-radius: 50%;
+                    background-color: var(--violet-11);
+                }
 
-.RadioGroupIndicator[data-state="unchecked"] {
- display: none;
-}
+                .RadioGroupIndicator[data-state='unchecked'] {
+                    display: none;
+                }
 
-.Input {
-    transform: translateX(-100%);
-    position: absolute;
-    pointer-events: none;
-    opacity: 0;
-    margin: 0;
-    width: 25px;
-    height: 25px;
-}
+                .Input {
+                    transform: translateX(-100%);
+                    position: absolute;
+                    pointer-events: none;
+                    opacity: 0;
+                    margin: 0;
+                    width: 25px;
+                    height: 25px;
+                }
 
-.Label {
-  color: white;
-  font-size: 15px;
-  line-height: 1;
-  padding-left: 15px;
-}
-</style>
-`
+                .Label {
+                    color: white;
+                    font-size: 15px;
+                    line-height: 1;
+                    padding-left: 15px;
+                }
+            </style>
+        `
     })
 };