@dscout/particle 0.46.2 → 1.0.0-alpha.2

package/CHANGELOG.md

@@ -5,18 +5,130 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
-## [Unreleased]
+## [Unreleased alpha]
+
+## [1.0.0-alpha.2]
+
+### Fixed
+- Bandit theme `--shadow--s` is now a valid `box-shadow` value
+- Spacing and dimension enums in `<Flex />` component proptypes
+- Calc statement causing parsing errors in some `postcss-values-parser` versions
 
-## [0.46.2]
+## [1.0.0-alpha.1]
 
 ### Added
-- Added `<IconSpeakerOn />`
+- Added `<AttributeInput />`
+- `<InputGroup />`, `<InputGroupItem />`, and `<InputAddon />`
+
+### Changed
+- `<AttributeSelector />` is now themeable.
+- `<AttributeSelector />` is now renders radio inputs with the `<AttributeInput />` component instead of buttons.
+- `<Avatar />` is now themeable.
+- `<Blitz />` is now themeable.
+- `<Blitz />` now accepts `coaching` as a `type` prop.
+- `<Cards />`, `<Card />`, `<Thumbnail />`, `<CardBody />`, and `<CardFooter />` are now themeable.
+- `<CollapsingMenu />` is now themeable.
+- `<DragAndDrop />` is now themeable.
+- `<Dropdown />` and `<DropdownInputToggle />` are now themeable.
+- `<FileInput />` is now themeable.
+- `<Footnote> />` is now themeable.
+  - Additionally, the `aside` element is no longer styled to look like a `<Footnote />` by default.
+- `<List />` and `<ListInline />` are now themeable.
+- `<Pill />` is now themeable.
+- `<Row />` and `<Column />` are now themeable.
+- `<Separator >` is now themeable.
+- `<SpeechBubble />` is now themable.
+- `<SpeechBubble/>` now supports a tail prop of `none`.
+- `<SpeechBubble/>` also now supports most color classes for background and text color options.
+- `<SwappableContent />` is now themeable.
+- `<SegmentedControls />` and `<ButtonControl />` are now themeable.
+- `<TagsInput />` are now themeable.
+- `<TooltipContainer />` and `<Tooltip />` are now themable.
+- Breaking: Width, height, margin, padding, and position utility classes have been renamed to follow a consistent naming convention, with enums representing em values in a revised spacing scale.
+  - Width and height utility classes are available for the following enums: `0.25`, `0.5`, `0.75`, `1`, `1.5`, `2`, `3`, `4`, `5`, `6`, `8`, `10`, `12`, `14`, `16`, `18`, `20`, `22`, `24`, `26`, `28`, `30`, `32`, `36`, `40`, `48`, `60`.
+  - Margin, padding, and position utility classes are available from `0.25` through `4`.
+  - The old t-shirt sized enums map to the em-based enums in the following way: `xs`->`0.25`, `s`->`0.75`, `m`->`1`, `base`->`2`, `l`->`3`, `xl`->`4`. For example, `margin--s` is now `margin--0.75`.
+  - The old numeric enums map to double the original number (they previously represented multiples of 2em but now represent multiples of 1em). For example, `width--10` is now `width--20`.
+- Breaking: `<Bug />` component
+  - renamed to `<Chip />`
+  - accepts any color enum
+  - sets colors based on inherited text color when no color is specified
+  - accepts a new `textColor` prop to set the text color independently of the background or outline color.
+- Breaking: Input components no longer accept `onPrefixClick` and `onSuffixClick` props. An `<InputGroup />` should be used to compose an input and a button component instead.
 
-## [0.46.1]
+### Fixed
+- Fixed a bug where `<SegmentedControls />` did not apply the corner radii to the first and last `<ButtonControl />` under certain conditions.
+- `<SelectInput />` and `<DropdownToggleInput />` now correctly handle text truncation, apply the correct icon spacing in the `mini` state, and apply the correct disabled stying to the icon.
+- `<AttributeInput />` now has a focus outline for keyboard accessibility.
+- `<AttributeSelector />` now sets the same name on each `<AttributeInput />` for keyboard accessibility.
+- `<Toggle />` renders with correct opacity when disabled.
 
-### Changed
-- `<IconCheckpoint />` now accepts the `filled` prop.
-- Updated the `<IconClip />`
+### Removed
+- `<Scene />` component. "Scene" styles were an early attempt at theming for different color schemes, which we plan to reimplement via CSS variables at a later date.
+- Removed `gutter--none`, `gutter--xs`, `gutter--s` and `gutter--custom` classes. 
+  - Gutter spacing for grids is now defined with the `columnGap` prop on `<Row />`.
+
+## [1.0.0-alpha.0]
+
+### Added
+
+- Spacing utility classes to define margins between direct descendants (e.g. `spacing-h--m`).
+
+### Changed
+
+- Flex align, direction, justify, and wrap utility classes are no longer scoped to the `.flex` class, so they now have less specificity.
+- `<Flex />` now accepts a `spacing` prop
+- `<Button />` component is now themeable.
+- `<Textarea />`, `<TextInput />`, `<NumberInput />`, `<PasswordInput />`, `<EmailInput />`, `<SearchInput />`, and `<SelectInput />` are now themeable.
+- `<Toggle />` is now themeable
+- `<CheckboxInput />` and `<RadioInput />` are now themeable
+- `<RangeInput />` is now themeable
+- `<Menu />`, `<MenuItem />`, `<MenuList />`, `<MenuItemLI />` and `MenuLink` are now themeable.
+- `<Modal />` is now themeable.
+- `<TextInput />`, `<NumberInput />`, `<PasswordInput />`, `<EmailInput />`, `<Textarea />`, `<SelectInput />`, and `<TagsInput />` now accept `invalid` prop to render invalid styles.
+- Breaking: Grayscale colors have been renamed to `gray-1` (formerly `main-light`), `gray-2` (formerly `dem`), `gray-3` (formerly `disabled`), `gray-4` (formerly `line`), `gray-5` (formerly `faint`), and `gray-6` (formerly `min`).
+- Grayscale colors no longer apply transparency
+- Breaking: Border utility class `.border--n` has been renamed to `.border--none` for naming consistency.
+- Breaking: `<Flex />` `height`, `spacing`, and `width` props updated to use sizing class names.
+- Breaking: `.no-underline` utility renamed to `.text-decoration--none`.
+- Breaking: `.font-weight--b` renamed to `.font-weight--bold`.
+- Breaking: `<Separator />` no longer accepts `solid` prop. Instead, it accepts `color` prop to provide more flexibility (replace `solid` with `color="line-s"`).
+- Breaking: `<main />` element no longer has default styles that set max width, horizontal margins, and padding.
+- Breaking: `<ContainerHeader />` no longer inherits edit/view styles from the `.container` class. Use the `isEditing` prop in sync with the `<EditingContainer />` instead.
+- Breaking: Container component classes have been renamed to follow a new naming convention.
+- Breaking: Button component classes have been renamed to follow a new naming convention.
+- Breaking: Input component classes have been renamed to follow a new naming convention.
+- Breaking: Toggle component classes have been renamed to follow a new naming convention.
+- Breaking: Radio and checkbox component classes have been renamed to follow a new naming convention.
+- Breaking: Range input component classes have been renamed to follow a new naming convention.
+- Breaking: `<Modal />` component's `padding` prop is no longer a boolean.  It now accepts an enum value to give it a custom padding amount in the 0-4ems range.
+- Breaking: `<Button />` component no longer accepts `tiny` size because it was never used.
+- Breaking: `<ButtonLink />` renamed to `<ButtonPlain />`
+- Breaking: Sequential button components no longer have spacing automatically applied between them. Wrap with `<Flex spacing="s"> />` or an element with `.spacing-h--s` instead.
+- Breaking: `menu--divider`, `menu--sortable`, `menu--dragging` and `menu--ghost` classes renamed to `Menu__Divider`, `Menu__Item--sortable`, `Menu__Item--dragging`, and `Menu__Item--ghost`.
+- Breaking: The `white` enum for button colors has been renamed to the color-scheme-agnostic `invert`.
+
+### Removed
+
+- Float and clearfix utilities. We don’t use floats anymore now that flex layouts exist.
+- `.text-space--n` utility class, which is now `.white-space--nowrap`.
+- `.col--` utility classes (for CSS Grid columns). We would need more Grid-specific utility classes to make these useful, so I’m planning on removing these for now until we can think about grid layouts more holistically.
+- `.em`, `.i`, `.b`, `.strong`, `.strike`, `.u`, `.underline`, `.small`, `.mark` classes. Semantically, the corresponding HTML elements should typically be used. If not, a more descriptive utility class (e.g. `font-weight--bold` or `.font-size--s`) should be used.
+- `.big`, `.dem` classes. We should use color and font-size utility classes instead.
+- Aliases supporting incorrectly named spacing utility classes. E.g.: `margin--b-s`, `padding--h-base`.
+- `$color--code-highlight` SCSS variable because it's never been used.
+- `left`, `right`, `top` and `bottom`  enums for flex utility classes. These have been deprecated since v0.33.0.
+- `<ButtonPrimary />` (use `<Button />` and configure the `color` and `variant` props to match original designs)
+- `<ButtonSecondary />` (use `<Button size="small" />` and configure the `color` and `variant` props to match original designs)
+- `<ButtonGroup />` (use `<Flex spacing="s" />` and configure the `justify` prop to match original alignment)
+- "scene"- and "hue"- specific classes for button styles.
+- `.btn--accent-` and `.btn--roll-` classes because they have never been used. These can be replaced by `hover:` utility classes.
+- `<Fieldset />` component. The only concern this component handled that couldn't be handled with a plain `<fieldset />` was setting invalid styles on nested form elements. Invalid styling concerns have been moved to the input components themselves, leaving the `<Fieldset />` useless.
+- `<ValidationMessage />` component. It didn't provide anything useful other than red text, and we don't have clearly-enough defined form validation patterns to justify encapsulating them in a Particle component.
+- `edit-state` color and utility classes
+- Solid-variant utility classes for grayscale colors. For example, `color--main-light-s`. Grayscale colors no longer apply transparency.
+
+## [Unreleased]
 
 ## [0.46.0]
 
@@ -39,7 +151,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 ### Changed
 
 - `<IconPayment />` now accepts the `filled` prop.
-- Updated the `<IconThumbsUp />` and `<IconThumbsDown />` to a newer design.
+- Updated the `<IconThumbsUp />` and `<IconThumbsDown />` to a newer design. 
 - Updated the `<IconFilter />`.
 
 ### Fixed
@@ -1342,9 +1454,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 - First usable version of particle
 
-[Unreleased]: https://github.com/dscout/particle/compare/v0.46.2...HEAD
-[0.46.2]: https://github.com/dscout/particle/compare/v0.46.1...v0.46.2
-[0.46.1]: https://github.com/dscout/particle/compare/v0.46.0...v0.46.1
+[Unreleased alpha]: https://github.com/dscout/particle/compare/v1.0.0-alpha.2...v1
+[1.0.0-alpha.2]: https://github.com/dscout/particle/compare/v1.0.0-alpha.1...v1.0.0-alpha.2
+[1.0.0-alpha.1]: https://github.com/dscout/particle/compare/v1.0.0-alpha.0...v1.0.0-alpha.1
+[1.0.0-alpha.0]: https://github.com/dscout/particle/compare/main...v1.0.0-alpha.0
+[Unreleased]: https://github.com/dscout/particle/compare/v0.46.0...HEAD
 [0.46.0]: https://github.com/dscout/particle/compare/v0.45.3...v0.46.0
 [0.45.3]: https://github.com/dscout/particle/compare/v0.45.2...v0.45.3
 [0.45.2]: https://github.com/dscout/particle/compare/v0.45.1...v0.45.2

package/lib/components/advanced_options.js

@@ -13,7 +13,7 @@ var _class_names = _interopRequireDefault(require("../utils/class_names"));
 
 var _refs = require("../utils/refs");
 
-var _button_link = _interopRequireDefault(require("./button_link"));
+var _button_plain = _interopRequireDefault(require("./button_plain"));
 
 var _collapsible_content = _interopRequireDefault(require("./collapsible_content"));
 
@@ -65,9 +65,9 @@ function AdvancedOptions(_ref) {
       ref: getRef
     }, _react.default.createElement(_modifier.default, {
       margin: {
-        bottom: 's'
+        bottom: '0.75'
       }
-    }, _react.default.createElement(_button_link.default, {
+    }, _react.default.createElement(_button_plain.default, {
       "aria-controls": ariaControlsId,
       "aria-expanded": !isCollapsed,
       "aria-label": ariaLabel,
@@ -87,5 +87,94 @@ function AdvancedOptions(_ref) {
 }
 
 AdvancedOptions.propTypes = propTypes;
+AdvancedOptions.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "AdvancedOptions",
+  "props": {
+    "initialCollapsed": {
+      "defaultValue": {
+        "value": "true",
+        "computed": false
+      },
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": ""
+    },
+    "_modifierClass": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "aria-label": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "aria-labelledby": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "aria-describedby": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "children": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": ""
+    },
+    "disabled": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": ""
+    },
+    "getRef": {
+      "type": {
+        "name": "custom",
+        "raw": "getRefPropType"
+      },
+      "required": false,
+      "description": ""
+    },
+    "id": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "name": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "title": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": ""
+    }
+  }
+};
 var _default = AdvancedOptions;
 exports.default = _default;

package/lib/components/attribute_input.js

@@ -0,0 +1,215 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _class_names = _interopRequireDefault(require("../utils/class_names"));
+
+var _refs = require("../utils/refs");
+
+var _forms = require("../utils/forms");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var propTypes = {
+  _modifierClass: _propTypes.default.string,
+  'aria-describedby': _propTypes.default.string,
+  'aria-invalid': _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string]),
+  'aria-label': _propTypes.default.string,
+  'aria-labelledby': _propTypes.default.string,
+  checked: _propTypes.default.bool,
+  disabled: _propTypes.default.bool,
+  getRef: _refs.getRefPropType,
+  id: _propTypes.default.string,
+  label: _propTypes.default.node,
+  name: _propTypes.default.string,
+  onChange: _propTypes.default.func,
+  readOnly: _propTypes.default.bool,
+  tabIndex: _propTypes.default.number,
+  value: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
+};
+
+function determineIdValue(id, label) {
+  if (id) return id;
+  return (0, _forms.looksUnique)(label) ? label : (0, _forms.unique)(label);
+}
+
+function AttributeInput(_ref) {
+  var _modifierClass = _ref._modifierClass,
+      ariaDescribedby = _ref['aria-describedby'],
+      ariaInvalid = _ref['aria-invalid'],
+      ariaLabel = _ref['aria-label'],
+      ariaLabelledby = _ref['aria-labelledby'],
+      checked = _ref.checked,
+      disabled = _ref.disabled,
+      getRef = _ref.getRef,
+      id = _ref.id,
+      label = _ref.label,
+      name = _ref.name,
+      value = _ref.value,
+      onChange = _ref.onChange,
+      readOnly = _ref.readOnly,
+      tabIndex = _ref.tabIndex;
+  var attributeId = determineIdValue(id, label);
+  var selectorClassName = (0, _class_names.default)('Attribute', _modifierClass, {
+    'Attribute--with-label': label
+  });
+  var labelClassName = (0, _class_names.default)('Attribute__Label', {
+    'Attribute__Label--selected': checked
+  });
+  return _react.default.createElement("div", {
+    className: selectorClassName
+  }, _react.default.createElement("input", {
+    id: attributeId,
+    name: name,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    "aria-invalid": ariaInvalid,
+    "aria-describedby": ariaDescribedby,
+    ref: getRef,
+    checked: checked,
+    className: "Attribute__Input",
+    onChange: onChange,
+    type: "radio",
+    value: value,
+    tabIndex: tabIndex,
+    readOnly: readOnly,
+    disabled: disabled
+  }), _react.default.createElement("label", {
+    className: labelClassName,
+    htmlFor: attributeId
+  }, label));
+}
+
+AttributeInput.propTypes = propTypes;
+AttributeInput.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "AttributeInput",
+  "props": {
+    "_modifierClass": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "aria-describedby": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "aria-invalid": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "bool"
+        }, {
+          "name": "string"
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "aria-label": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "aria-labelledby": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "checked": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": ""
+    },
+    "disabled": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": ""
+    },
+    "getRef": {
+      "type": {
+        "name": "custom",
+        "raw": "getRefPropType"
+      },
+      "required": false,
+      "description": ""
+    },
+    "id": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "label": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": ""
+    },
+    "name": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "onChange": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": ""
+    },
+    "readOnly": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": ""
+    },
+    "tabIndex": {
+      "type": {
+        "name": "number"
+      },
+      "required": false,
+      "description": ""
+    },
+    "value": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "number"
+        }, {
+          "name": "string"
+        }]
+      },
+      "required": false,
+      "description": ""
+    }
+  }
+};
+var _default = AttributeInput;
+exports.default = _default;

package/lib/components/attribute_selector.js

@@ -13,6 +13,8 @@ var _class_names = _interopRequireDefault(require("../utils/class_names"));
 
 var _refs = require("../utils/refs");
 
+var _attribute_input = _interopRequireDefault(require("./attribute_input"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var propTypes = {
@@ -28,11 +30,6 @@ var propTypes = {
   selected: _propTypes.default.string
 };
 
-function getName(name, attribute) {
-  if (name) return "".concat(name, "[").concat(attribute, "]");
-  return attribute;
-}
-
 function AttributeSelector(_ref) {
   var _modifierClass = _ref._modifierClass,
       ariaLabel = _ref['aria-label'],
@@ -41,32 +38,119 @@ function AttributeSelector(_ref) {
       attributes = _ref.attributes,
       getRef = _ref.getRef,
       id = _ref.id,
-      name = _ref.name,
-      _onClick = _ref.onClick,
+      _ref$name = _ref.name,
+      name = _ref$name === void 0 ? 'attributes' : _ref$name,
+      onClick = _ref.onClick,
       selected = _ref.selected;
+
+  function handleAttributeSelected(_ref2) {
+    var target = _ref2.target;
+    if (onClick) onClick(target.value);
+  }
+
+  function renderAttribute(attribute) {
+    return _react.default.createElement(_attribute_input.default, {
+      key: attribute,
+      onChange: handleAttributeSelected,
+      checked: attribute === selected,
+      label: attributes[attribute],
+      name: name,
+      value: attribute
+    });
+  }
+
   return _react.default.createElement("div", {
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledby,
     "aria-describedby": ariaDescribedby,
-    className: (0, _class_names.default)('attribute-selector', _modifierClass),
+    className: (0, _class_names.default)('Attribute__Selector spacing-h--0.25', _modifierClass),
     id: id,
     ref: getRef
-  }, Object.keys(attributes).map(function (attribute) {
-    var className = (0, _class_names.default)('attribute', {
-      selected: attribute === selected
-    });
-    return _react.default.createElement("button", {
-      key: attribute,
-      className: className,
-      name: getName(name, attribute),
-      onClick: function onClick() {
-        return _onClick(attribute);
-      },
-      type: "button"
-    }, attributes[attribute]);
-  }));
+  }, Object.keys(attributes).map(renderAttribute));
 }
 
 AttributeSelector.propTypes = propTypes;
+AttributeSelector.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "AttributeSelector",
+  "props": {
+    "name": {
+      "defaultValue": {
+        "value": "'attributes'",
+        "computed": false
+      },
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "_modifierClass": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "aria-label": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "aria-labelledby": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "aria-describedby": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "attributes": {
+      "type": {
+        "name": "object"
+      },
+      "required": true,
+      "description": ""
+    },
+    "getRef": {
+      "type": {
+        "name": "custom",
+        "raw": "getRefPropType"
+      },
+      "required": false,
+      "description": ""
+    },
+    "id": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "onClick": {
+      "type": {
+        "name": "func"
+      },
+      "required": true,
+      "description": ""
+    },
+    "selected": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    }
+  }
+};
 var _default = AttributeSelector;
 exports.default = _default;