Skip to content

Commit c165ea5

Browse files
ty2kty2k
authored
Merge pull request #284 from bcgov/feature/select
React components library v0.0.3, Select component
2 parents 71ff8b4 + 84ab4c8 commit c165ea5

File tree

22 files changed

+2660
-3505
lines changed

22 files changed

+2660
-3505
lines changed

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
#storybook-root {
2+
overflow-x: hidden;
3+
}

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import type { Preview } from "@storybook/react";
33
import "@bcgov/bc-sans/css/BC_Sans.css";
44
import "@bcgov/design-tokens/css/variables.css";
55

6+
import "./global.css";
7+
68
const preview: Preview = {
79
parameters: {
810
actions: { argTypesRegex: "^on[A-Z].*" },

‎packages/react-components/CHANGELOG.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,17 @@
11
# Changelog
22

3+
## 0.0.3
4+
5+
### Changed
6+
7+
- Use `react-aria-components` v1.0.1, `@bcgov/bc-sans` v2.0.1.
8+
- 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.
9+
- TagGroup sub-components get explicit class names to prevent styling collisions with sub-component instances in other components.
10+
11+
### Added
12+
13+
- Added Select component.
14+
315
## 0.0.2
416

517
### Changed

‎packages/react-components/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ export default function App() {
5252
| Component | React Aria Components docs link |
5353
| ---------------------- | --------------------------------------------------------- |
5454
| Button | https://react-spectrum.adobe.com/react-aria/Button.html |
55+
| Select | https://react-spectrum.adobe.com/react-aria/Select.html |
5556
| TagGroup, TagList, Tag | https://react-spectrum.adobe.com/react-aria/TagGroup.html |
5657

5758
## Supported React versions

‎packages/react-components/package-lock.json

Lines changed: 1719 additions & 3466 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/react-components/package.json

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@bcgov/design-system-react-components",
3-
"version": "0.0.2",
3+
"version": "0.0.3",
44
"type": "module",
55
"scripts": {
66
"rollup": "rollup -c --bundleConfigAsCjs",
@@ -18,8 +18,8 @@
1818
],
1919
"types": "dist/index.d.ts",
2020
"dependencies": {
21-
"@bcgov/design-tokens": "^2.0.0",
22-
"react-aria-components": "^1.0.0-rc.0"
21+
"@bcgov/design-tokens": "^2.0.1",
22+
"react-aria-components": "1.0.1"
2323
},
2424
"peerDependencies": {
2525
"@bcgov/bc-sans": "^2.1.0",
@@ -29,33 +29,33 @@
2929
"devDependencies": {
3030
"@react-stately/data": "^3.10.3",
3131
"@rollup/plugin-commonjs": "^25.0.7",
32-
"@rollup/plugin-json": "^6.0.1",
32+
"@rollup/plugin-json": "^6.1.0",
3333
"@rollup/plugin-node-resolve": "^15.2.3",
34-
"@rollup/plugin-typescript": "^11.1.5",
35-
"@storybook/addon-essentials": "^7.6.1",
36-
"@storybook/addon-interactions": "^7.6.1",
37-
"@storybook/addon-links": "^7.6.1",
38-
"@storybook/blocks": "^7.6.1",
39-
"@storybook/react": "^7.6.1",
40-
"@storybook/react-vite": "^7.6.1",
34+
"@rollup/plugin-typescript": "^11.1.6",
35+
"@storybook/addon-essentials": "^8.0.0-alpha.17",
36+
"@storybook/addon-interactions": "^8.0.0-alpha.17",
37+
"@storybook/addon-links": "^8.0.0-alpha.17",
38+
"@storybook/blocks": "^8.0.0-alpha.17",
39+
"@storybook/react": "^8.0.0-alpha.17",
40+
"@storybook/react-vite": "^8.0.0-alpha.17",
4141
"@storybook/testing-library": "^0.2.2",
42-
"@types/react": "^18.2.39",
43-
"@types/react-dom": "^18.2.17",
44-
"@typescript-eslint/eslint-plugin": "^6.13.1",
45-
"@typescript-eslint/parser": "^6.13.1",
46-
"@vitejs/plugin-react": "^4.2.0",
47-
"eslint": "^8.54.0",
42+
"@types/react": "^18.2.51",
43+
"@types/react-dom": "^18.2.18",
44+
"@typescript-eslint/eslint-plugin": "^6.20.0",
45+
"@typescript-eslint/parser": "^6.20.0",
46+
"@vitejs/plugin-react": "^4.2.1",
47+
"eslint": "^8.56.0",
4848
"eslint-plugin-react-hooks": "^4.6.0",
49-
"eslint-plugin-react-refresh": "^0.4.3",
49+
"eslint-plugin-react-refresh": "^0.4.5",
5050
"eslint-plugin-storybook": "^0.6.15",
51-
"rollup": "^4.6.0",
51+
"rollup": "^4.9.6",
5252
"rollup-plugin-dts": "^6.1.0",
5353
"rollup-plugin-peer-deps-external": "^2.2.4",
5454
"rollup-plugin-postcss": "^4.0.2",
55-
"storybook": "^7.6.1",
55+
"storybook": "^8.0.0-alpha.17",
5656
"tslib": "^2.6.2",
57-
"typescript": "^5.3.2",
58-
"vite": "^5.0.4"
57+
"typescript": "^5.3.3",
58+
"vite": "^5.0.12"
5959
},
6060
"author": "Tyler Krys <Tyler.Krys@gov.bc.ca>",
6161
"license": "Apache-2.0",

‎packages/react-components/src/App.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,14 @@ import "./App.css";
22
import "@bcgov/design-tokens/css/variables.css";
33
import "@bcgov/bc-sans/css/BC_Sans.css";
44

5-
import { ButtonPage, TagGroupPage } from "@/pages";
5+
import { ButtonPage, SelectPage, TagGroupPage } from "@/pages";
66

77
function App() {
88
return (
99
<main>
1010
<h1>Components</h1>
1111
<ButtonPage />
12+
<SelectPage />
1213
<TagGroupPage />
1314
</main>
1415
);

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

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
.react-aria-Select {
2+
display: inline-flex;
3+
flex-direction: column;
4+
gap: var(--layout-margin-xsmall);
5+
/* Hacks for `stretch`: https://caniuse.com/mdn-css_properties_max-width_stretch */
6+
max-width: -moz-available;
7+
max-width: -webkit-fill-available;
8+
}
9+
10+
/* Label above select input */
11+
.react-aria-Select--Label {
12+
font: var(--typography-regular-label);
13+
}
14+
.react-aria-Select[data-disabled] > .react-aria-Select--Label {
15+
color: var(--typography-color-disabled);
16+
}
17+
18+
/* "(optional)" text after Label*/
19+
.react-aria-Select--Label > .optional {
20+
color: var(--typography-color-disabled);
21+
}
22+
23+
/* Select input equivalent */
24+
.react-aria-Select--Button {
25+
background-color: var(--surface-secondary-default);
26+
border: 1px solid var(--surface-border-light);
27+
border-radius: var(--surface-border-radius-medium);
28+
cursor: pointer;
29+
display: flex;
30+
justify-content: space-between;
31+
gap: var(--layout-margin-small);
32+
align-items: center;
33+
padding: 0 12px;
34+
}
35+
.react-aria-Select--Button.invalid {
36+
border-color: var(--surface-support-border-color-danger);
37+
}
38+
.react-aria-Select[data-invalid] > .react-aria-Select--Button {
39+
border-color: var(--surface-support-border-color-danger);
40+
}
41+
.react-aria-Select--Button[data-disabled] {
42+
background-color: var(--surface-secondary-disabled);
43+
cursor: not-allowed;
44+
}
45+
.react-aria-Select--Button[data-hovered] {
46+
border-color: var(--surface-border-dark);
47+
}
48+
.react-aria-Select--Button[data-focused] {
49+
border-color: var(--surface-primary-active);
50+
outline: none;
51+
}
52+
.react-aria-Select--Button[data-pressed] {
53+
border-color: var(--surface-primary-active);
54+
}
55+
.react-aria-Select--Button.medium {
56+
height: 40px;
57+
}
58+
.react-aria-Select--Button.small {
59+
height: 32px;
60+
}
61+
.react-aria-Select--Button > .react-aria-SelectValue {
62+
font: var(--typography-regular-body);
63+
overflow: hidden;
64+
white-space: nowrap;
65+
text-overflow: ellipsis;
66+
min-width: 0;
67+
}
68+
.react-aria-Select--Button > svg {
69+
flex-shrink: 0;
70+
}
71+
72+
/* Dropdown menu panel */
73+
.react-aria-Select--Popover {
74+
background-color: var(--surface-secondary-default);
75+
border: 1px solid var(--surface-border-light);
76+
border-radius: var(--surface-border-radius-medium);
77+
box-shadow: var(--surface-shadow-medium);
78+
box-sizing: border-box;
79+
overflow-y: auto;
80+
padding: var(--layout-margin-hair) var(--layout-margin-xsmall);
81+
width: var(--trigger-width);
82+
}
83+
.react-aria-Select--ListBox[data-focused] {
84+
outline: none;
85+
}
86+
.react-aria-Select--ListBox > .react-aria-Section:not(:first-child) {
87+
border-top: 1px solid var(--surface-border-light);
88+
margin-top: 1px;
89+
padding-top: 2px;
90+
}
91+
92+
/* Header label within Section of multi-section Select */
93+
.react-aria-Select--Header {
94+
color: var(--typography-color-secondary);
95+
font: var(--typography-regular-label);
96+
padding: var(--layout-margin-hair) var(--layout-margin-small);
97+
}
98+
99+
/* ListBox option item */
100+
.react-aria-Select--ListBoxItem {
101+
border-radius: var(--layout-margin-xsmall);
102+
cursor: pointer;
103+
display: flex;
104+
flex-direction: row;
105+
align-items: center;
106+
gap: var(--layout-margin-small);
107+
padding: 6.5px var(--layout-padding-small);
108+
}
109+
.react-aria-Select--ListBoxItem[data-focused],
110+
.react-aria-Select--ListBoxItem[data-hovered] {
111+
background-color: var(--surface-secondary-hover);
112+
outline: none;
113+
}
114+
.react-aria-Select--ListBoxItem-icon {
115+
display: flex;
116+
align-items: center;
117+
justify-content: space-around;
118+
/* This `min-width` rule can cause horizontal overflow on very narrow Select
119+
instances, but if we leave it out, the icons will shrink instead. */
120+
min-width: 20px;
121+
}
122+
.react-aria-Select--ListBoxItem-Text-container {
123+
color: var(--typography-color-primary);
124+
display: flex;
125+
flex-direction: column;
126+
flex-grow: 1;
127+
}
128+
.react-aria-Select--ListBoxItem-Text-label {
129+
font: var(--typography-regular-body);
130+
}
131+
.react-aria-Select--ListBoxItem.destructive {
132+
color: var(--surface-danger-default);
133+
}
134+
.react-aria-Select--ListBoxItem.destructive
135+
.react-aria-Select--ListBoxItem-Text-label {
136+
color: var(--surface-danger-default);
137+
}
138+
.react-aria-Select--ListBoxItem-Text-description {
139+
font: var(--typography-regular-label);
140+
color: var(--typography-color-secondary);
141+
}

0 commit comments

Comments
 (0)