Update docs december 2023 (#5327)

* chore(docs): fix ButtonDock typeo

* chore(docs): skeleton - document autoSizeRows

* chore(docs): add chevron small icons

* chore(docs): document alwaysShowDescription and horizontal variant of progress-steps

documentation-site/components/yard/config/progress-steps.ts

@@ -5,7 +5,7 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 
-import { ProgressSteps, Step } from "baseui/progress-steps";
+import { ProgressSteps, Step, ORIENTATION } from "baseui/progress-steps";
 import { Button } from "baseui/button";
 import { PropTypes } from "react-view";
 import type { TConfig } from "../types";
@@ -18,6 +18,7 @@ const ProgressStepsConfig: TConfig = {
   scope: {
     ProgressSteps,
     Step,
+    ORIENTATION,
     Button,
   },
   theme: [""],
@@ -28,6 +29,22 @@ const ProgressStepsConfig: TConfig = {
       description: "Defines the current active step index.",
       stateful: true,
     },
+    orientation: {
+      value: "ORIENTATION.vertical",
+      defaultValue: "ORIENTATION.vertical",
+      type: PropTypes.Enum,
+      options: ORIENTATION,
+      description: "The orientation of the progress steps component.",
+      imports: {
+        "baseui/progress-steps": { named: ["ORIENTATION"] },
+      },
+    },
+    alwaysShowDescription: {
+      value: false,
+      type: PropTypes.Boolean,
+      description:
+        "When true, each step's description will always be displayed regardless of whether it is the currently active step",
+    },
     children: {
       value: `<Step title="Verify Address">
   <p>Address on file: 1455 Market Street</p>

documentation-site/components/yard/config/skeleton.ts

@@ -42,7 +42,11 @@ const SkeletonConfig: TConfig = {
       type: PropTypes.Boolean,
       description: "Lets you choose whether the skeleton has an animation",
     },
-
+    autoSizeRows: {
+      value: false,
+      type: PropTypes.Boolean,
+      description: "Dynamically sizes the skeleton rows to fit the container",
+    },
     overrides: {
       value: undefined,
       type: PropTypes.Custom,

documentation-site/examples/progress-steps/horizontal.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import {
+  ProgressSteps,
+  NumberedStep,
+  ORIENTATION,
+} from 'baseui/progress-steps';
+import {
+  Button,
+  SHAPE,
+  ButtonProps,
+  KIND,
+  SIZE,
+} from 'baseui/button';
+
+function SpacedButton(props: ButtonProps) {
+  return (
+    <Button
+      {...props}
+      shape={SHAPE.pill}
+      kind={KIND.secondary}
+      size={SIZE.compact}
+      overrides={{
+        BaseButton: {
+          style: ({$theme}) => ({
+            marginLeft: $theme.sizing.scale200,
+            marginRight: $theme.sizing.scale200,
+            marginTop: $theme.sizing.scale800,
+          }),
+        },
+      }}
+    />
+  );
+}
+
+function ProgressStepsContainer() {
+  const [current, setCurrent] = React.useState(0);
+  return (
+    <ProgressSteps
+      current={current}
+      orientation={ORIENTATION.horizontal}
+    >
+      <NumberedStep title="Create Account">
+        <SpacedButton disabled>Previous</SpacedButton>
+        <SpacedButton onClick={() => setCurrent(1)}>
+          Next
+        </SpacedButton>
+      </NumberedStep>
+      <NumberedStep title="Verify Payment">
+        <SpacedButton onClick={() => setCurrent(0)}>
+          Previous
+        </SpacedButton>
+        <SpacedButton onClick={() => setCurrent(2)}>
+          Next
+        </SpacedButton>
+      </NumberedStep>
+      <NumberedStep title="Add Payment Method">
+        <SpacedButton onClick={() => setCurrent(1)}>
+          Previous
+        </SpacedButton>
+        <SpacedButton disabled>Next</SpacedButton>
+      </NumberedStep>
+    </ProgressSteps>
+  );
+}
+
+export default ProgressStepsContainer;

documentation-site/examples/skeleton/auto-size-rows.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import {Skeleton} from 'baseui/skeleton';
+
+export default function Example() {
+  return (
+    <Skeleton autoSizeRows rows={3} height="100px" width="200px" />
+  );
+}

documentation-site/pages/components/progress-steps.mdx

@@ -4,6 +4,7 @@ import Exports from "../../components/exports";
 
 import ProgressStepsDotted from "examples/progress-steps/dotted";
 import ProgressStepsNumbered from "examples/progress-steps/numbered";
+import ProgressStepsHorizontal from "examples/progress-steps/horizontal";
 
 import { ProgressSteps, Step, NumberedStep } from "baseui/progress-steps";
 import * as ProgressStepsExports from "baseui/progress-steps";
@@ -43,6 +44,13 @@ list type provides the user with a sense of awareness around progress and the st
   <ProgressStepsNumbered />
 </Example>
 
+<Example
+  title="Progress Steps Horizontal Usage"
+  path="progress-steps/horizontal.tsx"
+>
+  <ProgressStepsHorizontal />
+</Example>
+
 <Exports
   component={ProgressStepsExports}
   title="Progress Steps exports"

documentation-site/pages/components/skeleton.mdx

@@ -6,6 +6,7 @@ import { Skeleton } from "baseui/skeleton";
 import * as SkeletonExports from "baseui/skeleton";
 
 import SkeletonBasic from "examples/skeleton/basic.tsx";
+import SkeletonAutoSizeRows from "examples/skeleton/auto-size-rows.tsx";
 import SkeletonCircle from "examples/skeleton/circle.tsx";
 import SkeletonAnimation from "examples/skeleton/animation.tsx";
 import SkeletonSubElements from "examples/skeleton/subElements.tsx";
@@ -29,6 +30,12 @@ The `Skeleton` component is optimized for rendering shapes with or without anima
 
 Set `height` and `width` to generate a single rectangular `Skeleton`.
 
+<Example title="AutoSize Rows" path="skeleton/auto-size-rows.tsx">
+  <SkeletonAutoSizeRows />
+</Example>
+
+When `autoSizeRows` is supplied, the skeleton's rows will dynamically size to fill the container.
+
 <Example title="Other Shapes" path="skeleton/circle.tsx">
   <SkeletonCircle />
 </Example>

documentation-site/routes.jsx

@@ -68,7 +68,7 @@ const routes = [
             itemId: "/components/button",
           },
           {
-            title: "ButtonDock",
+            title: "Button Dock",
             itemId: "/components/button-dock",
           },
           {

src/icon/icon-exports.ts

@@ -14,9 +14,13 @@ export { default as Calendar } from './calendar';
 export { default as CheckIndeterminate } from './check-indeterminate';
 export { default as Check } from './check';
 export { default as ChevronDown } from './chevron-down';
+export { default as ChevronDownSmall } from './chevron-down-small';
 export { default as ChevronLeft } from './chevron-left';
+export { default as ChevronLeftSmall } from './chevron-left-small';
 export { default as ChevronRight } from './chevron-right';
+export { default as ChevronRightSmall } from './chevron-right-small';
 export { default as ChevronUp } from './chevron-up';
+export { default as ChevronUpSmall } from './chevron-up-small';
 export { default as DeleteAlt } from './delete-alt';
 export { default as Delete } from './delete';
 export { default as Filter } from './filter';