Merge pull request #284 from bcgov/feature/select

React components library v0.0.3, Select component

packages/react-components/.storybook/global.css

@@ -0,0 +1,3 @@
+#storybook-root {
+  overflow-x: hidden;
+}

packages/react-components/.storybook/preview.ts

@@ -3,6 +3,8 @@ import type { Preview } from "@storybook/react";
 import "@bcgov/bc-sans/css/BC_Sans.css";
 import "@bcgov/design-tokens/css/variables.css";
 
+import "./global.css";
+
 const preview: Preview = {
   parameters: {
     actions: { argTypesRegex: "^on[A-Z].*" },

packages/react-components/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.0.3
+
+### Changed
+
+- Use `react-aria-components` v1.0.1, `@bcgov/bc-sans` v2.0.1.
+- In TagList, use render prop pattern [rather than array.map()](https://react-spectrum.adobe.com/react-aria/collections.html#why-not-array-map) for performance.
+- TagGroup sub-components get explicit class names to prevent styling collisions with sub-component instances in other components.
+
+### Added
+
+- Added Select component.
+
 ## 0.0.2
 
 ### Changed

packages/react-components/README.md

@@ -52,6 +52,7 @@ export default function App() {
 | Component              | React Aria Components docs link                           |
 | ---------------------- | --------------------------------------------------------- |
 | Button                 | https://react-spectrum.adobe.com/react-aria/Button.html   |
+| Select                 | https://react-spectrum.adobe.com/react-aria/Select.html   |
 | TagGroup, TagList, Tag | https://react-spectrum.adobe.com/react-aria/TagGroup.html |
 
 ## Supported React versions

packages/react-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bcgov/design-system-react-components",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "type": "module",
   "scripts": {
     "rollup": "rollup -c --bundleConfigAsCjs",
@@ -18,8 +18,8 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@bcgov/design-tokens": "^2.0.0",
-    "react-aria-components": "^1.0.0-rc.0"
+    "@bcgov/design-tokens": "^2.0.1",
+    "react-aria-components": "1.0.1"
   },
   "peerDependencies": {
     "@bcgov/bc-sans": "^2.1.0",
@@ -29,33 +29,33 @@
   "devDependencies": {
     "@react-stately/data": "^3.10.3",
     "@rollup/plugin-commonjs": "^25.0.7",
-    "@rollup/plugin-json": "^6.0.1",
+    "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-typescript": "^11.1.5",
-    "@storybook/addon-essentials": "^7.6.1",
-    "@storybook/addon-interactions": "^7.6.1",
-    "@storybook/addon-links": "^7.6.1",
-    "@storybook/blocks": "^7.6.1",
-    "@storybook/react": "^7.6.1",
-    "@storybook/react-vite": "^7.6.1",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@storybook/addon-essentials": "^8.0.0-alpha.17",
+    "@storybook/addon-interactions": "^8.0.0-alpha.17",
+    "@storybook/addon-links": "^8.0.0-alpha.17",
+    "@storybook/blocks": "^8.0.0-alpha.17",
+    "@storybook/react": "^8.0.0-alpha.17",
+    "@storybook/react-vite": "^8.0.0-alpha.17",
     "@storybook/testing-library": "^0.2.2",
-    "@types/react": "^18.2.39",
-    "@types/react-dom": "^18.2.17",
-    "@typescript-eslint/eslint-plugin": "^6.13.1",
-    "@typescript-eslint/parser": "^6.13.1",
-    "@vitejs/plugin-react": "^4.2.0",
-    "eslint": "^8.54.0",
+    "@types/react": "^18.2.51",
+    "@types/react-dom": "^18.2.18",
+    "@typescript-eslint/eslint-plugin": "^6.20.0",
+    "@typescript-eslint/parser": "^6.20.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.56.0",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.3",
+    "eslint-plugin-react-refresh": "^0.4.5",
     "eslint-plugin-storybook": "^0.6.15",
-    "rollup": "^4.6.0",
+    "rollup": "^4.9.6",
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
-    "storybook": "^7.6.1",
+    "storybook": "^8.0.0-alpha.17",
     "tslib": "^2.6.2",
-    "typescript": "^5.3.2",
-    "vite": "^5.0.4"
+    "typescript": "^5.3.3",
+    "vite": "^5.0.12"
   },
   "author": "Tyler Krys <[email protected]>",
   "license": "Apache-2.0",

packages/react-components/src/App.tsx

@@ -2,13 +2,14 @@ import "./App.css";
 import "@bcgov/design-tokens/css/variables.css";
 import "@bcgov/bc-sans/css/BC_Sans.css";
 
-import { ButtonPage, TagGroupPage } from "@/pages";
+import { ButtonPage, SelectPage, TagGroupPage } from "@/pages";
 
 function App() {
   return (
     <main>
       <h1>Components</h1>
       <ButtonPage />
+      <SelectPage />
       <TagGroupPage />
     </main>
   );

packages/react-components/src/components/Select/Select.css

@@ -0,0 +1,141 @@
+.react-aria-Select {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--layout-margin-xsmall);
+  /* Hacks for `stretch`: https://caniuse.com/mdn-css_properties_max-width_stretch */
+  max-width: -moz-available;
+  max-width: -webkit-fill-available;
+}
+
+/* Label above select input */
+.react-aria-Select--Label {
+  font: var(--typography-regular-label);
+}
+.react-aria-Select[data-disabled] > .react-aria-Select--Label {
+  color: var(--typography-color-disabled);
+}
+
+/* "(optional)" text after Label*/
+.react-aria-Select--Label > .optional {
+  color: var(--typography-color-disabled);
+}
+
+/* Select input equivalent */
+.react-aria-Select--Button {
+  background-color: var(--surface-secondary-default);
+  border: 1px solid var(--surface-border-light);
+  border-radius: var(--surface-border-radius-medium);
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  gap: var(--layout-margin-small);
+  align-items: center;
+  padding: 0 12px;
+}
+.react-aria-Select--Button.invalid {
+  border-color: var(--surface-support-border-color-danger);
+}
+.react-aria-Select[data-invalid] > .react-aria-Select--Button {
+  border-color: var(--surface-support-border-color-danger);
+}
+.react-aria-Select--Button[data-disabled] {
+  background-color: var(--surface-secondary-disabled);
+  cursor: not-allowed;
+}
+.react-aria-Select--Button[data-hovered] {
+  border-color: var(--surface-border-dark);
+}
+.react-aria-Select--Button[data-focused] {
+  border-color: var(--surface-primary-active);
+  outline: none;
+}
+.react-aria-Select--Button[data-pressed] {
+  border-color: var(--surface-primary-active);
+}
+.react-aria-Select--Button.medium {
+  height: 40px;
+}
+.react-aria-Select--Button.small {
+  height: 32px;
+}
+.react-aria-Select--Button > .react-aria-SelectValue {
+  font: var(--typography-regular-body);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+.react-aria-Select--Button > svg {
+  flex-shrink: 0;
+}
+
+/* Dropdown menu panel */
+.react-aria-Select--Popover {
+  background-color: var(--surface-secondary-default);
+  border: 1px solid var(--surface-border-light);
+  border-radius: var(--surface-border-radius-medium);
+  box-shadow: var(--surface-shadow-medium);
+  box-sizing: border-box;
+  overflow-y: auto;
+  padding: var(--layout-margin-hair) var(--layout-margin-xsmall);
+  width: var(--trigger-width);
+}
+.react-aria-Select--ListBox[data-focused] {
+  outline: none;
+}
+.react-aria-Select--ListBox > .react-aria-Section:not(:first-child) {
+  border-top: 1px solid var(--surface-border-light);
+  margin-top: 1px;
+  padding-top: 2px;
+}
+
+/* Header label within Section of multi-section Select */
+.react-aria-Select--Header {
+  color: var(--typography-color-secondary);
+  font: var(--typography-regular-label);
+  padding: var(--layout-margin-hair) var(--layout-margin-small);
+}
+
+/* ListBox option item */
+.react-aria-Select--ListBoxItem {
+  border-radius: var(--layout-margin-xsmall);
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--layout-margin-small);
+  padding: 6.5px var(--layout-padding-small);
+}
+.react-aria-Select--ListBoxItem[data-focused],
+.react-aria-Select--ListBoxItem[data-hovered] {
+  background-color: var(--surface-secondary-hover);
+  outline: none;
+}
+.react-aria-Select--ListBoxItem-icon {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  /* This `min-width` rule can cause horizontal overflow on very narrow Select
+  instances, but if we leave it out, the icons will shrink instead. */
+  min-width: 20px;
+}
+.react-aria-Select--ListBoxItem-Text-container {
+  color: var(--typography-color-primary);
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+.react-aria-Select--ListBoxItem-Text-label {
+  font: var(--typography-regular-body);
+}
+.react-aria-Select--ListBoxItem.destructive {
+  color: var(--surface-danger-default);
+}
+.react-aria-Select--ListBoxItem.destructive
+  .react-aria-Select--ListBoxItem-Text-label {
+  color: var(--surface-danger-default);
+}
+.react-aria-Select--ListBoxItem-Text-description {
+  font: var(--typography-regular-label);
+  color: var(--typography-color-secondary);
+}