@khanacademy/wonder-blocks-dropdown 10.0.0 → 10.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/CHANGELOG.md +33 -0
  2. package/dist/es/index.js +16 -17
  3. package/dist/index.js +15 -16
  4. package/package.json +10 -10
package/CHANGELOG.md CHANGED
@@ -1,5 +1,38 @@
1
1
  # @khanacademy/wonder-blocks-dropdown
2
2
 
3
+ ## 10.0.2
4
+
5
+ ### Patch Changes
6
+
7
+ - e63adea: Update `border.width` tokens to use new naming conventions.
8
+ - Updated dependencies [e63adea]
9
+ - Updated dependencies [e63adea]
10
+ - @khanacademy/wonder-blocks-tokens@8.0.0
11
+ - @khanacademy/wonder-blocks-clickable@7.0.2
12
+ - @khanacademy/wonder-blocks-cell@4.1.9
13
+ - @khanacademy/wonder-blocks-layout@3.1.8
14
+ - @khanacademy/wonder-blocks-modal@7.1.10
15
+ - @khanacademy/wonder-blocks-pill@3.1.9
16
+ - @khanacademy/wonder-blocks-search-field@5.1.10
17
+
18
+ ## 10.0.1
19
+
20
+ ### Patch Changes
21
+
22
+ - e8ccf60: Update `borderRadius` styles to use new `border.radius` tokens
23
+ - Updated dependencies [e8ccf60]
24
+ - Updated dependencies [e8ccf60]
25
+ - Updated dependencies [e8ccf60]
26
+ - Updated dependencies [e8ccf60]
27
+ - @khanacademy/wonder-blocks-search-field@5.1.9
28
+ - @khanacademy/wonder-blocks-modal@7.1.9
29
+ - @khanacademy/wonder-blocks-cell@4.1.8
30
+ - @khanacademy/wonder-blocks-pill@3.1.8
31
+ - @khanacademy/wonder-blocks-tokens@7.0.0
32
+ - @khanacademy/wonder-blocks-announcer@1.0.1
33
+ - @khanacademy/wonder-blocks-clickable@7.0.1
34
+ - @khanacademy/wonder-blocks-layout@3.1.7
35
+
3
36
  ## 10.0.0
4
37
 
5
38
  ### Major Changes
package/dist/es/index.js CHANGED
@@ -3,7 +3,7 @@ import * as React from 'react';
3
3
  import { useId } from 'react';
4
4
  import { StyleSheet } from 'aphrodite';
5
5
  import { CompactCell, DetailCell } from '@khanacademy/wonder-blocks-cell';
6
- import { spacing, semanticColor, sizing, border, color, font } from '@khanacademy/wonder-blocks-tokens';
6
+ import { spacing, semanticColor, border, sizing, color, font } from '@khanacademy/wonder-blocks-tokens';
7
7
  import { LabelMedium, LabelSmall, LabelLarge } from '@khanacademy/wonder-blocks-typography';
8
8
  import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
9
9
  import { View, addStyle, keys, Id, useOnMountEffect } from '@khanacademy/wonder-blocks-core';
@@ -139,7 +139,7 @@ const styles$b = StyleSheet.create({
139
139
  minHeight: DROPDOWN_ITEM_HEIGHT,
140
140
  touchAction: "manipulation",
141
141
  ":focus": {
142
- borderRadius: spacing.xxxSmall_4,
142
+ borderRadius: border.radius.radius_040,
143
143
  outline: `${spacing.xxxxSmall_2}px solid ${semanticColor.focus.outer}`,
144
144
  outlineOffset: -spacing.xxxxSmall_2
145
145
  },
@@ -225,8 +225,8 @@ const styles$9 = StyleSheet.create({
225
225
  minHeight: spacing.medium_16,
226
226
  minWidth: spacing.medium_16,
227
227
  height: spacing.medium_16,
228
- borderRadius: border.radius.small_3,
229
- borderWidth: border.width.hairline,
228
+ borderRadius: 3,
229
+ borderWidth: border.width.thin,
230
230
  borderStyle: "solid",
231
231
  borderColor: theme$6.checkbox.color.default.border
232
232
  },
@@ -360,7 +360,7 @@ OptionItem.defaultProps = {
360
360
  };
361
361
  OptionItem.__IS_OPTION_ITEM__ = true;
362
362
  const focusedStyle = {
363
- borderRadius: spacing.xxxSmall_4,
363
+ borderRadius: border.radius.radius_040,
364
364
  outline: `${spacing.xxxxSmall_2}px solid ${semanticColor.focus.outer}`,
365
365
  outlineOffset: -spacing.xxxxSmall_2
366
366
  };
@@ -1406,7 +1406,7 @@ const styles$6 = StyleSheet.create({
1406
1406
  },
1407
1407
  dropdown: {
1408
1408
  backgroundColor: theme$3.dropdown.color.default.background,
1409
- borderRadius: border.radius.medium_4,
1409
+ borderRadius: border.radius.radius_040,
1410
1410
  paddingTop: spacing.xxxSmall_4,
1411
1411
  paddingBottom: spacing.xxxSmall_4,
1412
1412
  border: `solid 1px ${theme$3.dropdown.color.default.border}`,
@@ -1510,7 +1510,7 @@ const sharedStyles = StyleSheet.create({
1510
1510
  justifyContent: "center",
1511
1511
  height: DROPDOWN_ITEM_HEIGHT,
1512
1512
  border: "none",
1513
- borderRadius: spacing.xxxSmall_4,
1513
+ borderRadius: border.radius.radius_040,
1514
1514
  cursor: "pointer",
1515
1515
  outline: "none",
1516
1516
  textDecoration: "none",
@@ -1550,8 +1550,7 @@ const sharedStyles = StyleSheet.create({
1550
1550
  left: 0,
1551
1551
  right: 0,
1552
1552
  bottom: -1,
1553
- background: "currentColor",
1554
- borderRadius: border.radius.xSmall_2
1553
+ background: "currentColor"
1555
1554
  }
1556
1555
  },
1557
1556
  press: {
@@ -1827,7 +1826,7 @@ const styles$4 = StyleSheet.create({
1827
1826
  paddingLeft: spacing.medium_16,
1828
1827
  paddingRight: spacing.small_12,
1829
1828
  borderWidth: 0,
1830
- borderRadius: border.radius.medium_4,
1829
+ borderRadius: border.radius.radius_040,
1831
1830
  borderStyle: "solid",
1832
1831
  outline: "none",
1833
1832
  textDecoration: "none",
@@ -1872,9 +1871,9 @@ const _generateStyles = (placeholder, error) => {
1872
1871
  const actionType = error ? "destructive" : "progressive";
1873
1872
  const action = semanticColor.action.secondary[actionType];
1874
1873
  const sharedOutlineStyling = {
1875
- outlineOffset: -border.width.thin,
1874
+ outlineOffset: `-${border.width.medium}`,
1876
1875
  outlineStyle: "solid",
1877
- outlineWidth: border.width.thin
1876
+ outlineWidth: border.width.medium
1878
1877
  };
1879
1878
  const focusStyling = _extends({}, sharedOutlineStyling, {
1880
1879
  outlineColor: semanticColor.focus.outer
@@ -1892,13 +1891,13 @@ const _generateStyles = (placeholder, error) => {
1892
1891
  default: {
1893
1892
  background: currentState.background,
1894
1893
  borderColor: currentState.border,
1895
- borderWidth: border.width.hairline,
1894
+ borderWidth: border.width.thin,
1896
1895
  color: placeholder ? semanticColor.text.secondary : currentState.foreground,
1897
1896
  ":hover:not([aria-disabled=true])": hoverStyling,
1898
1897
  ["@media not (hover: hover)"]: {
1899
1898
  ":hover:not([aria-disabled=true])": {
1900
1899
  borderColor: currentState.border,
1901
- borderWidth: border.width.hairline,
1900
+ borderWidth: border.width.thin,
1902
1901
  paddingLeft: spacing.medium_16,
1903
1902
  paddingRight: spacing.small_12
1904
1903
  }
@@ -3307,7 +3306,7 @@ const styles = StyleSheet.create({
3307
3306
  maxWidth: "100%",
3308
3307
  flexWrap: "wrap",
3309
3308
  background: theme.combobox.color.default.background,
3310
- borderRadius: border.radius.medium_4,
3309
+ borderRadius: border.radius.radius_040,
3311
3310
  border: `solid 1px ${theme.combobox.color.default.border}`,
3312
3311
  paddingInline: spacing.xSmall_8
3313
3312
  },
@@ -3342,8 +3341,8 @@ const styles = StyleSheet.create({
3342
3341
  },
3343
3342
  listbox: {
3344
3343
  backgroundColor: theme.listbox.color.default.background,
3345
- borderRadius: border.radius.medium_4,
3346
- border: `solid ${border.width.hairline}px ${theme.listbox.color.default.border}`,
3344
+ borderRadius: border.radius.radius_040,
3345
+ border: `solid ${border.width.thin} ${theme.listbox.color.default.border}`,
3347
3346
  boxShadow: `0px ${spacing.xSmall_8}px ${spacing.xSmall_8}px 0px ${color.offBlack8}`,
3348
3347
  maxHeight: "var(--popper-max-height)",
3349
3348
  overflowY: "auto"
package/dist/index.js CHANGED
@@ -174,7 +174,7 @@ const styles$b = aphrodite.StyleSheet.create({
174
174
  minHeight: DROPDOWN_ITEM_HEIGHT,
175
175
  touchAction: "manipulation",
176
176
  ":focus": {
177
- borderRadius: wonderBlocksTokens.spacing.xxxSmall_4,
177
+ borderRadius: wonderBlocksTokens.border.radius.radius_040,
178
178
  outline: `${wonderBlocksTokens.spacing.xxxxSmall_2}px solid ${wonderBlocksTokens.semanticColor.focus.outer}`,
179
179
  outlineOffset: -wonderBlocksTokens.spacing.xxxxSmall_2
180
180
  },
@@ -260,8 +260,8 @@ const styles$9 = aphrodite.StyleSheet.create({
260
260
  minHeight: wonderBlocksTokens.spacing.medium_16,
261
261
  minWidth: wonderBlocksTokens.spacing.medium_16,
262
262
  height: wonderBlocksTokens.spacing.medium_16,
263
- borderRadius: wonderBlocksTokens.border.radius.small_3,
264
- borderWidth: wonderBlocksTokens.border.width.hairline,
263
+ borderRadius: 3,
264
+ borderWidth: wonderBlocksTokens.border.width.thin,
265
265
  borderStyle: "solid",
266
266
  borderColor: theme$6.checkbox.color.default.border
267
267
  },
@@ -395,7 +395,7 @@ OptionItem.defaultProps = {
395
395
  };
396
396
  OptionItem.__IS_OPTION_ITEM__ = true;
397
397
  const focusedStyle = {
398
- borderRadius: wonderBlocksTokens.spacing.xxxSmall_4,
398
+ borderRadius: wonderBlocksTokens.border.radius.radius_040,
399
399
  outline: `${wonderBlocksTokens.spacing.xxxxSmall_2}px solid ${wonderBlocksTokens.semanticColor.focus.outer}`,
400
400
  outlineOffset: -wonderBlocksTokens.spacing.xxxxSmall_2
401
401
  };
@@ -1441,7 +1441,7 @@ const styles$6 = aphrodite.StyleSheet.create({
1441
1441
  },
1442
1442
  dropdown: {
1443
1443
  backgroundColor: theme$3.dropdown.color.default.background,
1444
- borderRadius: wonderBlocksTokens.border.radius.medium_4,
1444
+ borderRadius: wonderBlocksTokens.border.radius.radius_040,
1445
1445
  paddingTop: wonderBlocksTokens.spacing.xxxSmall_4,
1446
1446
  paddingBottom: wonderBlocksTokens.spacing.xxxSmall_4,
1447
1447
  border: `solid 1px ${theme$3.dropdown.color.default.border}`,
@@ -1545,7 +1545,7 @@ const sharedStyles = aphrodite.StyleSheet.create({
1545
1545
  justifyContent: "center",
1546
1546
  height: DROPDOWN_ITEM_HEIGHT,
1547
1547
  border: "none",
1548
- borderRadius: wonderBlocksTokens.spacing.xxxSmall_4,
1548
+ borderRadius: wonderBlocksTokens.border.radius.radius_040,
1549
1549
  cursor: "pointer",
1550
1550
  outline: "none",
1551
1551
  textDecoration: "none",
@@ -1585,8 +1585,7 @@ const sharedStyles = aphrodite.StyleSheet.create({
1585
1585
  left: 0,
1586
1586
  right: 0,
1587
1587
  bottom: -1,
1588
- background: "currentColor",
1589
- borderRadius: wonderBlocksTokens.border.radius.xSmall_2
1588
+ background: "currentColor"
1590
1589
  }
1591
1590
  },
1592
1591
  press: {
@@ -1862,7 +1861,7 @@ const styles$4 = aphrodite.StyleSheet.create({
1862
1861
  paddingLeft: wonderBlocksTokens.spacing.medium_16,
1863
1862
  paddingRight: wonderBlocksTokens.spacing.small_12,
1864
1863
  borderWidth: 0,
1865
- borderRadius: wonderBlocksTokens.border.radius.medium_4,
1864
+ borderRadius: wonderBlocksTokens.border.radius.radius_040,
1866
1865
  borderStyle: "solid",
1867
1866
  outline: "none",
1868
1867
  textDecoration: "none",
@@ -1907,9 +1906,9 @@ const _generateStyles = (placeholder, error) => {
1907
1906
  const actionType = error ? "destructive" : "progressive";
1908
1907
  const action = wonderBlocksTokens.semanticColor.action.secondary[actionType];
1909
1908
  const sharedOutlineStyling = {
1910
- outlineOffset: -wonderBlocksTokens.border.width.thin,
1909
+ outlineOffset: `-${wonderBlocksTokens.border.width.medium}`,
1911
1910
  outlineStyle: "solid",
1912
- outlineWidth: wonderBlocksTokens.border.width.thin
1911
+ outlineWidth: wonderBlocksTokens.border.width.medium
1913
1912
  };
1914
1913
  const focusStyling = _extends__default["default"]({}, sharedOutlineStyling, {
1915
1914
  outlineColor: wonderBlocksTokens.semanticColor.focus.outer
@@ -1927,13 +1926,13 @@ const _generateStyles = (placeholder, error) => {
1927
1926
  default: {
1928
1927
  background: currentState.background,
1929
1928
  borderColor: currentState.border,
1930
- borderWidth: wonderBlocksTokens.border.width.hairline,
1929
+ borderWidth: wonderBlocksTokens.border.width.thin,
1931
1930
  color: placeholder ? wonderBlocksTokens.semanticColor.text.secondary : currentState.foreground,
1932
1931
  ":hover:not([aria-disabled=true])": hoverStyling,
1933
1932
  ["@media not (hover: hover)"]: {
1934
1933
  ":hover:not([aria-disabled=true])": {
1935
1934
  borderColor: currentState.border,
1936
- borderWidth: wonderBlocksTokens.border.width.hairline,
1935
+ borderWidth: wonderBlocksTokens.border.width.thin,
1937
1936
  paddingLeft: wonderBlocksTokens.spacing.medium_16,
1938
1937
  paddingRight: wonderBlocksTokens.spacing.small_12
1939
1938
  }
@@ -3342,7 +3341,7 @@ const styles = aphrodite.StyleSheet.create({
3342
3341
  maxWidth: "100%",
3343
3342
  flexWrap: "wrap",
3344
3343
  background: theme.combobox.color.default.background,
3345
- borderRadius: wonderBlocksTokens.border.radius.medium_4,
3344
+ borderRadius: wonderBlocksTokens.border.radius.radius_040,
3346
3345
  border: `solid 1px ${theme.combobox.color.default.border}`,
3347
3346
  paddingInline: wonderBlocksTokens.spacing.xSmall_8
3348
3347
  },
@@ -3377,8 +3376,8 @@ const styles = aphrodite.StyleSheet.create({
3377
3376
  },
3378
3377
  listbox: {
3379
3378
  backgroundColor: theme.listbox.color.default.background,
3380
- borderRadius: wonderBlocksTokens.border.radius.medium_4,
3381
- border: `solid ${wonderBlocksTokens.border.width.hairline}px ${theme.listbox.color.default.border}`,
3379
+ borderRadius: wonderBlocksTokens.border.radius.radius_040,
3380
+ border: `solid ${wonderBlocksTokens.border.width.thin} ${theme.listbox.color.default.border}`,
3382
3381
  boxShadow: `0px ${wonderBlocksTokens.spacing.xSmall_8}px ${wonderBlocksTokens.spacing.xSmall_8}px 0px ${wonderBlocksTokens.color.offBlack8}`,
3383
3382
  maxHeight: "var(--popper-max-height)",
3384
3383
  overflowY: "auto"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@khanacademy/wonder-blocks-dropdown",
3
- "version": "10.0.0",
3
+ "version": "10.0.2",
4
4
  "design": "v1",
5
5
  "description": "Dropdown variants for Wonder Blocks.",
6
6
  "main": "dist/index.js",
@@ -13,18 +13,18 @@
13
13
  },
14
14
  "dependencies": {
15
15
  "@babel/runtime": "^7.24.5",
16
- "@khanacademy/wonder-blocks-announcer": "1.0.0",
17
- "@khanacademy/wonder-blocks-cell": "4.1.7",
18
- "@khanacademy/wonder-blocks-clickable": "7.0.0",
16
+ "@khanacademy/wonder-blocks-announcer": "1.0.1",
17
+ "@khanacademy/wonder-blocks-cell": "4.1.9",
18
+ "@khanacademy/wonder-blocks-clickable": "7.0.2",
19
19
  "@khanacademy/wonder-blocks-core": "12.2.1",
20
20
  "@khanacademy/wonder-blocks-icon": "5.1.3",
21
- "@khanacademy/wonder-blocks-layout": "3.1.6",
22
- "@khanacademy/wonder-blocks-modal": "7.1.8",
23
- "@khanacademy/wonder-blocks-pill": "3.1.7",
24
- "@khanacademy/wonder-blocks-search-field": "5.1.8",
21
+ "@khanacademy/wonder-blocks-layout": "3.1.8",
22
+ "@khanacademy/wonder-blocks-modal": "7.1.10",
23
+ "@khanacademy/wonder-blocks-pill": "3.1.9",
24
+ "@khanacademy/wonder-blocks-search-field": "5.1.10",
25
25
  "@khanacademy/wonder-blocks-timing": "7.0.2",
26
- "@khanacademy/wonder-blocks-typography": "3.1.3",
27
- "@khanacademy/wonder-blocks-tokens": "6.0.0"
26
+ "@khanacademy/wonder-blocks-tokens": "8.0.0",
27
+ "@khanacademy/wonder-blocks-typography": "3.1.3"
28
28
  },
29
29
  "peerDependencies": {
30
30
  "@phosphor-icons/core": "^2.0.2",