Added scale knob to storybook. Added scale prop to readme. (#759)

Esri · Jan 29, 2020 · a29a9d9 · a29a9d9
1 parent 3ea8f7a
commit a29a9d9
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/src/components/calcite-action/calcite-action.stories.ts b/src/components/calcite-action/calcite-action.stories.ts
@@ -8,7 +8,7 @@ import {
 } from "../../../.storybook/utils";
 import readme from "./readme.md";
 import { ATTRIBUTES } from "../../../.storybook/resources";
-const { appearance, dir, theme } = ATTRIBUTES;
+const { appearance, dir, scale, theme } = ATTRIBUTES;
 
 export default {
   title: "components|calcite-action",
@@ -55,6 +55,10 @@ const createAttributes: () => Attributes = () => [
     name: "loading",
     value: boolean("loading", false)
   },
+  {
+    name: "scale",
+    value: select("scale", scale.values, scale.defaultValue)
+  },
   {
     name: "text",
     value: text("text", "Text")

diff --git a/src/components/calcite-action/readme.md b/src/components/calcite-action/readme.md
@@ -49,6 +49,7 @@ Renders a `calcite-action` that has a clear background.
 | `indicator`         | `indicator`    | Indicates unread changes.                                                                                               | `boolean`            | `false`     |
 | `label`             | `label`        | Label of the action, exposed on hover. If no label is provided, the label inherits what's provided for the `text` prop. | `string`             | `undefined` |
 | `loading`           | `loading`      | When true, content is waiting to be loaded. This state shows a busy indicator.                                          | `boolean`            | `false`     |
+| `scale`             | `scale`        | Indicates the scale of the action.                                                                                      | `CalciteScale`       | `"m"`       |
 | `text` _(required)_ | `text`         | Text that accompanies the action icon.                                                                                  | `string`             | `undefined` |
 | `textEnabled`       | `text-enabled` | Indicates whether the text is displayed.                                                                                | `boolean`            | `false`     |
 | `theme`             | `theme`        | Used to set the component's color scheme.                                                                               | `"dark" or "light"`  | `undefined` |