feat(docs): Docusaurus multi-versioning, Developer Portal starter kit (#34271)

Co-authored-by: Claude <noreply@anthropic.com>
2026-04-26 03:24:53 +00:00 · 2025-08-22 09:53:01 -07:00
parent 2b2cc96f11
commit 0a45a89786
71 changed files with 16791 additions and 1809 deletions
--- a/docs/components/ui-components/button.mdx
+++ b/docs/components/ui-components/button.mdx
@@ -0,0 +1,146 @@
+<!--
+    Licensed to the Apache Software Foundation (ASF) under one
+    or more contributor license agreements.  See the NOTICE file
+    distributed with this work for additional information
+    regarding copyright ownership.  The ASF licenses this file
+    to you under the Apache License, Version 2.0 (the
+    "License"); you may not use this file except in compliance
+    with the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing,
+    software distributed under the License is distributed on an
+    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, either express or implied.  See the License for the
+    specific language governing permissions and limitations
+    under the License.
+-->
+---
+title: Button Component
+sidebar_position: 1
+---
+
+import { StoryExample, StoryWithControls } from '../../src/components/StorybookWrapper';
+import { Button } from '../../../superset-frontend/packages/superset-ui-core/src/components/Button';
+
+# Button Component
+
+The Button component is a fundamental UI element used throughout Superset for user interactions.
+
+## Basic Usage
+
+The default button with primary styling:
+<StoryExample
+  component={() => (
+    <Button buttonStyle="primary" onClick={() => console.log('Clicked!')}>
+      Click Me
+    </Button>
+  )}
+/>
+
+## Interactive Example
+
+<StoryWithControls
+  component={({ buttonStyle, buttonSize, label, disabled }) => (
+    <Button
+      buttonStyle={buttonStyle}
+      buttonSize={buttonSize}
+      disabled={disabled}
+      onClick={() => console.log('Clicked!')}
+    >
+      {label}
+    </Button>
+  )}
+  props={{
+    buttonStyle: 'primary',
+    buttonSize: 'default',
+    label: 'Click Me',
+    disabled: false
+  }}
+  controls={[
+    {
+      name: 'buttonStyle',
+      label: 'Button Style',
+      type: 'select',
+      options: ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'default', 'link', 'dashed']
+    },
+    {
+      name: 'buttonSize',
+      label: 'Button Size',
+      type: 'select',
+      options: ['default', 'small', 'xsmall']
+    },
+    {
+      name: 'label',
+      label: 'Button Text',
+      type: 'text'
+    },
+    {
+      name: 'disabled',
+      label: 'Disabled',
+      type: 'boolean'
+    }
+  ]}
+/>
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `buttonStyle` | `'primary' \| 'secondary' \| 'tertiary' \| 'success' \| 'warning' \| 'danger' \| 'default' \| 'link' \| 'dashed'` | `'default'` | Button style |
+| `buttonSize` | `'default' \| 'small' \| 'xsmall'` | `'default'` | Button size |
+| `disabled` | `boolean` | `false` | Whether the button is disabled |
+| `cta` | `boolean` | `false` | Whether the button is a call-to-action button |
+| `tooltip` | `ReactNode` | - | Tooltip content |
+| `placement` | `TooltipProps['placement']` | - | Tooltip placement |
+| `onClick` | `function` | - | Callback when button is clicked |
+| `href` | `string` | - | Turns button into an anchor link |
+| `target` | `string` | - | Target attribute for anchor links |
+
+## Usage
+
+```jsx
+import Button from 'src/components/Button';
+
+function MyComponent() {
+  return (
+    <Button
+      buttonStyle="primary"
+      onClick={() => console.log('Button clicked')}
+    >
+      Click Me
+    </Button>
+  );
+}
+```
+
+## Button Styles
+
+Superset provides a variety of button styles for different purposes:
+
+- **Primary**: Used for primary actions
+- **Secondary**: Used for secondary actions
+- **Tertiary**: Used for less important actions
+- **Success**: Used for successful or confirming actions
+- **Warning**: Used for actions that require caution
+- **Danger**: Used for destructive actions
+- **Link**: Used for navigation
+- **Dashed**: Used for adding new items or features
+
+## Button Sizes
+
+Buttons come in three sizes:
+
+- **Default**: Standard size for most use cases
+- **Small**: Compact size for tight spaces
+- **XSmall**: Extra small size for very limited spaces
+
+## Best Practices
+
+- Use primary buttons for the main action in a form or page
+- Use secondary buttons for alternative actions
+- Use danger buttons for destructive actions
+- Limit the number of primary buttons on a page to avoid confusion
+- Use consistent button styles throughout your application
+- Add tooltips to buttons when their purpose might not be immediately clear