frappe-ui 1.0.0-beta.2 → 1.0.0-beta.21

package/src/components/Breadcrumbs/Breadcrumbs.md

@@ -2,6 +2,10 @@
 
 A navigation aid that shows the user’s current location within a hierarchy and allows quick navigation to parent pages.
 
+## Playground
+
+<ClientOnly><BreadcrumbsBuilder /></ClientOnly>
+
 ## Example
 
 <ComponentPreview name="Breadcrumbs-Example" />

package/src/components/Breadcrumbs/Breadcrumbs.vue

@@ -19,7 +19,7 @@
           v-if="item.route"
           :to="item.route"
           @click="item.onClick ? item.onClick() : null"
-          class="flex items-center rounded px-0.5 py-1 text-lg font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-outline-gray-3"
+          class="flex items-center rounded px-0.5 py-1 text-lg-medium"
           :class="[
             i == crumbs.length - 1
               ? 'min-w-0 text-ink-gray-9'
@@ -39,7 +39,7 @@
           v-else-if="item.href"
           :href="item.href"
           @click="item.onClick ? item.onClick() : null"
-          class="flex items-center rounded px-0.5 py-1 text-lg font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-outline-gray-3"
+          class="flex items-center rounded px-0.5 py-1 text-lg-medium"
           :class="[
             i == crumbs.length - 1
               ? 'min-w-0 text-ink-gray-9'
@@ -58,7 +58,7 @@
         <button
           v-else
           @click="item.onClick ? item.onClick() : null"
-          class="flex items-center rounded px-0.5 py-1 text-lg font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-outline-gray-3"
+          class="flex items-center rounded px-0.5 py-1 text-lg-medium"
           :class="[
             i == crumbs.length - 1
               ? 'min-w-0 text-ink-gray-9'

package/src/components/Button/Button.api.md

@@ -10,27 +10,42 @@
     description: 'Visual color theme of the button',
     required: false,
     type: 'Theme',
-    default: '"gray"'
-  },
-  {
-    name: 'size',
-    description: 'Controls the button size',
-    required: false,
-    type: 'Size',
-    default: '"sm"'
+    default: '\'gray\''
   },
   {
     name: 'variant',
     description: 'Visual style of the button',
     required: false,
     type: 'Variant',
-    default: '"subtle"'
+    default: '\'subtle\''
+  },
+  {
+    name: 'type',
+    description: 'Native button type',
+    required: false,
+    type: '"button" | "submit" | "reset"',
+    default: '\'button\''
   },
   {
     name: 'label',
     description: 'Text label displayed inside the button',
     required: false,
-    type: 'string'
+    type: 'string',
+    default: 'undefined'
+  },
+  {
+    name: 'loading',
+    description: 'Shows a loading state and disables interaction',
+    required: false,
+    type: 'boolean',
+    default: 'false'
+  },
+  {
+    name: 'size',
+    description: 'Controls the button size',
+    required: false,
+    type: 'Size',
+    default: '\'sm\''
   },
   {
     name: 'icon',
@@ -54,20 +69,15 @@
     name: 'tooltip',
     description: 'Tooltip text shown on hover',
     required: false,
-    type: 'string'
-  },
-  {
-    name: 'loading',
-    description: 'Shows a loading state and disables interaction',
-    required: false,
-    type: 'boolean',
-    default: 'false'
+    type: 'string',
+    default: 'undefined'
   },
   {
     name: 'loadingText',
     description: 'Text shown while the button is loading',
     required: false,
-    type: 'string'
+    type: 'string',
+    default: 'undefined'
   },
   {
     name: 'disabled',
@@ -80,20 +90,15 @@
     name: 'route',
     description: 'Router destination when used as a link',
     required: false,
-    type: 'string | kt | Tt'
+    type: 'string | kt | Tt',
+    default: 'undefined'
   },
   {
     name: 'link',
     description: 'External link URL',
     required: false,
-    type: 'string'
-  },
-  {
-    name: 'type',
-    description: 'Native button type',
-    required: false,
-    type: '"button" | "submit" | "reset"',
-    default: '"button"'
+    type: 'string',
+    default: 'undefined'
   }
 ]
 
@@ -101,22 +106,22 @@
   {
     name: 'prefix',
     description: 'Content shown before the button label (left icon / custom content)',
-    type: 'any'
+    type: '[void]'
   },
   {
     name: 'icon',
     description: 'Icon-only content for icon buttons',
-    type: 'any'
+    type: '[void]'
   },
   {
     name: 'default',
     description: 'Main button content (overrides `label`)',
-    type: 'any'
+    type: '[void]'
   },
   {
     name: 'suffix',
     description: 'Content shown after the button label (right icon / custom content)',
-    type: 'any'
+    type: '[void]'
   }
 ]
 </script>

package/src/components/Button/Button.cy.ts

@@ -44,7 +44,23 @@ describe('<Button />', () => {
       },
     })
 
-    cy.get('button').should('have.class', 'h-10 text-lg')
+    cy.get('button').should('have.class', 'h-10')
+    cy.get('button').should('have.class', 'text-lg-medium')
+  })
+
+  it('renders xs size', () => {
+    cy.mount(Button, {
+      props: {
+        size: 'xs',
+        label: 'Extra Small Button',
+      },
+    })
+
+    cy.get('button')
+      .should('have.class', 'h-6')
+      .and('have.class', 'text-xs')
+      .and('have.class', 'px-1.5')
+      .and('have.class', 'rounded-3')
   })
 
   it('handles loading state', () => {
@@ -57,7 +73,7 @@ describe('<Button />', () => {
     })
     cy.get('button').should('be.disabled')
     cy.get('button').should('contain.text', 'Processing...')
-    cy.get('svg').should('exist') // Loading Spinner
+    cy.get('[role="status"]').should('exist') // Loading Spinner
   })
 
   it('handles prefix and suffix slots (replacing deprecated icon props)', () => {

package/src/components/Button/Button.md

@@ -2,20 +2,32 @@
 
 An interactive element used to trigger actions, submit forms, or navigate between views.
 
-## Variants
+## Playground
 
-<ComponentPreview name='Button-Variants' />
+<ClientOnly><ButtonBuilder /></ClientOnly>
 
-## Themes
+## Section controls
 
-<ComponentPreview name='Button-Themes' />
+<ComponentPreview name='Button-SectionControls' />
 
-## Sizes
+## Section action
 
-<ComponentPreview name='Button-Sizes' />
+<ComponentPreview name='Button-SectionAction' />
 
-## Icons
+## Selection toolbar
 
-<ComponentPreview name='Button-Icons' />
+<ComponentPreview name='Button-SelectionToolbar' />
+
+## Inline actions
+
+<ComponentPreview name='Button-InlineActions' />
+
+## Stacked actions
+
+<ComponentPreview name='Button-StackedActions' />
+
+## Card actions
+
+<ComponentPreview name='Button-LiveClassCard' />
 
 <!-- @include: ./Button.api.md -->