@hubspot/ui-extensions 0.3.1 → 0.4.0

package/README.md

@@ -6,12 +6,14 @@ React components and utilities for extending HubSpot's UI.
 
 - [Accordion](#accordion)
 - [Alert](#alert)
+- [Box](#box)
 - [Button](#button)
 - [ButtonRow](#buttonrow)
 - [Card](#card)
 - [DescriptionList](#descriptionlist)
   - [DescriptionListItem](#descriptionlistitem)
 - [Divider](#divider)
+- [Flex](#flex)
 - [Form](#form)
 - [EmptyState](#emptystate)
 - [ErrorState](#errorstate)
@@ -154,6 +156,51 @@ const Extension = () => {
 };
 ```
 
+### Box
+
+##### Import
+
+```javascript
+import { Box } from '@hubspot/ui-extensions';
+```
+
+##### Props
+
+```typescript
+export interface BoxProps {
+  children: ReactNode;
+  alignSelf?: 'start' | 'center' | 'baseline' | 'end' | 'stretch' | 'auto';
+  flex?: 'initial' | 'auto' | 'none' | number;
+}
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `children` | `ReactNode` | `N/A` | Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components. |
+| `alignSelf` | `'start' \| 'center' \| 'baseline' \| 'end' \| 'stretch' \| 'auto'` `(optional)` | `'auto'` | Overrides flex's align item value for this element. |
+| `flex` | `'initial' \| 'auto' \| 'none' \| number` `(optional)` | `'initial'` | Sets how the item will grow or shrink when it's a direct ancestor of the Flex component. |
+
+
+#### flex prop Options
+
+- `initial`: The item is sized according to its width and height properties. It shrinks to its minimum size to fit the container, but does not grow to absorb any extra free space in the flex container.
+- `auto`: The item is sized according to its width and height properties, but grows to absorb any extra free space in the flex container, and shrinks to its minimum size to fit the container.
+- `none`: The item is sized according to its width and height properties. It is fully inflexible: it neither shrinks nor grows in relation to the flex container.
+- `number`:  Tells a component to fill all available space, shared evenly amongst other components with the same parent. The larger the flex given, the higher the ratio of space a component will take compared to its siblings.
+
+##### Usage
+
+```javascript
+const Extension = () => {
+  return (
+    <Box>
+      <Text>Hello</Text>
+    </Box>
+  );
+};
+```
+
+
 ### Button
 
 ##### Import
@@ -411,6 +458,63 @@ const Extension = () => {
 };
 ```
 
+### Flex
+
+##### Import
+
+```javascript
+import { Flex } from '@hubspot/ui-extensions';
+```
+
+##### Props
+
+```typescript
+export interface FlexProps {
+  children?: React.ReactNode;
+  direction?: 'row' | 'column';
+  justify?: 'center' | 'end' | 'start' | 'around' | 'between';
+  align?: 'start' | 'center' | 'baseline' | 'end' | 'stretch';
+  alignSelf?: 'start' | 'center' | 'baseline' | 'end' | 'stretch';
+  wrap?: boolean;
+  gap?:
+  | 'flush'
+  | 'small'
+  | 'extra-small'
+  | 'medium'
+  | 'large'
+  | 'extra-large'
+  | 'xs'
+  | 'sm'
+  | 'md'
+  | 'lg'
+  | 'xl';
+}
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `direction` | `'row' \| 'column'` | `'column'` | Sets the direction in which elements are placed. |
+| `justify` | `'start' \| 'center' \|'end' \|'around' \| 'between'` | `'start'` | Defines how to distribute space between and around children on main axis. |
+| `align` | `'start' \| 'center' \|'baseline' \| 'end' \| 'stretch' \|'between'` | `'start'` | Controls the aligment of children in the cross axis. |
+| `alignSelf` | `'start' \| 'center' \| 'baseline' \| 'end' \| 'stretch' \| 'auto'` `(optional)` | `'auto'` | Overrides flex's align item value for this element. Useful when `Flex` is the child of another `Flex` component. |
+| `wrap` | `boolean(optional)` | `false` | If set to `false`, children are forced onto one line. If set to `true`, they can wrap into multiple lines. |
+| `children` | `ReactNode` | `N/A` | Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components. |
+| `gap` | `'flush' \| 'extra-small' \| 'small' \| 'medium' \| 'large' \| 'extra-large' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | `'small'` | Amount of space between each child component passed as children. |
+
+##### Usage
+
+```javascript
+const Extension = () => {
+  return (
+    <Flex direction="column" distance="large">
+      <Tile>Tile 1</Tile>
+      <Tile>Tile 2</Tile>
+      <Tile>Tile 3</Tile>
+    </Flex>
+  );
+};
+```
+
 ### Form
 
 ##### Import

package/dist/coreComponents.d.ts

@@ -194,3 +194,8 @@ export declare const MultiSelect: "MultiSelect" & {
     readonly props?: types.MultiSelectProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"MultiSelect", types.MultiSelectProps, true>>;
+export declare const Flex: "Flex" & {
+    readonly type?: "Flex" | undefined;
+    readonly props?: types.FlexProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Flex", types.FlexProps, true>>;

package/dist/coreComponents.js

@@ -40,3 +40,4 @@ export const Box = createRemoteReactComponent('Box');
 export const StepIndicator = createRemoteReactComponent('StepIndicator');
 export const Accordion = createRemoteReactComponent('Accordion');
 export const MultiSelect = createRemoteReactComponent('MultiSelect');
+export const Flex = createRemoteReactComponent('Flex');

package/dist/types.d.ts

@@ -216,6 +216,15 @@ export interface StackProps {
     align?: 'start' | 'center' | 'baseline' | 'end' | 'stretch';
     width?: 'auto' | '100%';
 }
+export interface FlexProps {
+    gap?: AllDistances;
+    children?: ReactNode;
+    direction?: 'row' | 'column';
+    justify?: 'center' | 'end' | 'start' | 'around' | 'between';
+    align?: 'start' | 'center' | 'baseline' | 'end' | 'stretch';
+    alignSelf?: 'start' | 'center' | 'baseline' | 'end' | 'stretch';
+    wrap?: boolean;
+}
 export interface StatisticsTrendProps {
     value: string;
     direction: 'increase' | 'decrease';
@@ -475,8 +484,8 @@ export type JsonValue = string | number | boolean | null | JsonValue[] | {
 };
 export interface BoxProps {
     children: ReactNode;
-    grow?: boolean;
     alignSelf?: 'start' | 'center' | 'baseline' | 'end' | 'stretch' | 'auto';
+    flex?: 'initial' | 'auto' | 'none' | number;
 }
 interface TShirtSizes {
     xs: 'extra-small' | 'xs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubspot/ui-extensions",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -48,5 +48,5 @@
   "devDependencies": {
     "typescript": "5.0.4"
   },
-  "gitHead": "3da4a07183d48528ef431d46a8d327c053c4fe94"
+  "gitHead": "1269fb86282dd5f6b9686d064b6c652f00cb863f"
 }