@guardian/stand 0.0.28 → 0.0.29

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 (9) hide show
  1. package/dist/components/topbar/TopBar.cjs +3 -1
  2. package/dist/components/topbar/TopBar.js +1 -1
  3. package/dist/components/topbar/styles.cjs +0 -2
  4. package/dist/components/topbar/styles.js +0 -2
  5. package/dist/styleD/build/css/component/TopBar.css +2 -2
  6. package/dist/styleD/build/typescript/component/TopBar.cjs +3 -3
  7. package/dist/styleD/build/typescript/component/TopBar.js +3 -3
  8. package/dist/types/styleD/build/typescript/component/TopBar.d.ts +2 -2
  9. package/package.json +1 -1
package/dist/components/topbar/TopBar.cjs CHANGED
@@ -181,7 +181,9 @@ function TopBar({
181
181
  reactAriaComponents.Popover,
182
182
  {
183
183
  css: styles.topBarCollapsedNavMenuPopoverStyles(mergedTheme),
184
- offset: 12,
184
+ offset: mergedTheme.collapsedNavMenu.popover.offset,
185
+ containerPadding: mergedTheme.collapsedNavMenu.popover.containerPadding,
186
+ shouldFlip: false,
185
187
  children: leftSideMenuItems
186
188
  }
187
189
  )
package/dist/components/topbar/TopBar.js CHANGED
@@ -100,7 +100,7 @@ function TopBar({ children, collapseBelow = {
100
100
  showUntil: collapseBelow.containerLeft
101
101
  }), children: jsxs(DialogTrigger, { isOpen: menuOpen, onOpenChange: (isOpen) => {
102
102
  setMenuOpen(isOpen);
103
- }, children: [jsx(Button, { "aria-label": "Navigation Menu", ref: buttonRef, css: topBarCollapsedNavMenuButtonStyles(mergedTheme, menuOpen), children: jsx(TopBarItem, { alignment: "left", size: "sm", theme: mergedTheme.Item, "aria-label": "Navigation Menu", children: jsx(Icon, { size: "lg", children: menuOpen ? "close" : "menu" }) }) }), jsx(Popover, { css: topBarCollapsedNavMenuPopoverStyles(mergedTheme), offset: 12, children: leftSideMenuItems })] }) }), jsx("div", { css: topBarContainerStyles(mergedTheme), children: toolName }), jsx("div", { css: topBarContainerStyles(mergedTheme, {
103
+ }, children: [jsx(Button, { "aria-label": "Navigation Menu", ref: buttonRef, css: topBarCollapsedNavMenuButtonStyles(mergedTheme, menuOpen), children: jsx(TopBarItem, { alignment: "left", size: "sm", theme: mergedTheme.Item, "aria-label": "Navigation Menu", children: jsx(Icon, { size: "lg", children: menuOpen ? "close" : "menu" }) }) }), jsx(Popover, { css: topBarCollapsedNavMenuPopoverStyles(mergedTheme), offset: mergedTheme.collapsedNavMenu.popover.offset, containerPadding: mergedTheme.collapsedNavMenu.popover.containerPadding, shouldFlip: false, children: leftSideMenuItems })] }) }), jsx("div", { css: topBarContainerStyles(mergedTheme), children: toolName }), jsx("div", { css: topBarContainerStyles(mergedTheme, {
104
104
  collapseBelow: collapseBelow.containerLeft
105
105
  }), children: leftSide }), jsx("div", { css: [
106
106
  topBarSpacerStyles(mergedTheme),
package/dist/components/topbar/styles.cjs CHANGED
@@ -58,8 +58,6 @@ const topBarCollapsedNavMenuButtonStyles = (theme, menuOpen) => {
58
58
  };
59
59
  const topBarCollapsedNavMenuPopoverStyles = (theme) => {
60
60
  return react.css`
61
- left: ${theme.collapsedNavMenu.popover.left};
62
- top: ${theme.collapsedNavMenu.popover.top};
63
61
  background-color: ${theme.collapsedNavMenu.popover["background-color"]};
64
62
  border-left: ${theme.collapsedNavMenu.popover.border};
65
63
  border-right: ${theme.collapsedNavMenu.popover.border};
package/dist/components/topbar/styles.js CHANGED
@@ -53,8 +53,6 @@ const topBarCollapsedNavMenuButtonStyles = (theme, menuOpen) => {
53
53
  };
54
54
  const topBarCollapsedNavMenuPopoverStyles = (theme) => {
55
55
  return css`
56
- left: ${theme.collapsedNavMenu.popover.left};
57
- top: ${theme.collapsedNavMenu.popover.top};
58
56
  background-color: ${theme.collapsedNavMenu.popover["background-color"]};
59
57
  border-left: ${theme.collapsedNavMenu.popover.border};
60
58
  border-right: ${theme.collapsedNavMenu.popover.border};
package/dist/styleD/build/css/component/TopBar.css CHANGED
@@ -16,10 +16,10 @@
16
16
  --component-top-bar-collapsed-nav-menu-button-cursor: pointer;
17
17
  --component-top-bar-collapsed-nav-menu-button-hovered-background-color: #ededed;
18
18
  --component-top-bar-collapsed-nav-menu-button-active-background-color: #ededed;
19
- --component-top-bar-collapsed-nav-menu-popover-left: auto !important;
20
- --component-top-bar-collapsed-nav-menu-popover-top: auto !important;
21
19
  --component-top-bar-collapsed-nav-menu-popover-background-color: #f6f6f6;
22
20
  --component-top-bar-collapsed-nav-menu-popover-border: 0.0625rem solid #cccccc;
21
+ --component-top-bar-collapsed-nav-menu-popover-offset: 1; /** The additional offset applied along the main axis between the element and its anchor element. https://react-aria.adobe.com/Popover#popover */
22
+ --component-top-bar-collapsed-nav-menu-popover-container-padding: 0; /** The placement padding that should be applied between the element and its surrounding container. https://react-aria.adobe.com/Popover#popover */
23
23
  --component-top-bar-item-display: flex;
24
24
  --component-top-bar-item-align-items: center;
25
25
  --component-top-bar-item-height: 100%;
package/dist/styleD/build/typescript/component/TopBar.cjs CHANGED
@@ -24,10 +24,10 @@ const componentTopBar = {
24
24
  }
25
25
  },
26
26
  popover: {
27
- left: "auto !important",
28
- top: "auto !important",
29
27
  "background-color": "#f6f6f6",
30
- border: "0.0625rem solid #cccccc"
28
+ border: "0.0625rem solid #cccccc",
29
+ offset: 1,
30
+ containerPadding: 0
31
31
  }
32
32
  },
33
33
  Item: {
package/dist/styleD/build/typescript/component/TopBar.js CHANGED
@@ -22,10 +22,10 @@ const componentTopBar = {
22
22
  }
23
23
  },
24
24
  popover: {
25
- left: "auto !important",
26
- top: "auto !important",
27
25
  "background-color": "#f6f6f6",
28
- border: "0.0625rem solid #cccccc"
26
+ border: "0.0625rem solid #cccccc",
27
+ offset: 1,
28
+ containerPadding: 0
29
29
  }
30
30
  },
31
31
  Item: {
package/dist/types/styleD/build/typescript/component/TopBar.d.ts CHANGED
@@ -25,10 +25,10 @@ export declare const componentTopBar: {
25
25
  };
26
26
  };
27
27
  popover: {
28
- left: string;
29
- top: string;
30
28
  'background-color': string;
31
29
  border: string;
30
+ offset: number;
31
+ containerPadding: number;
32
32
  };
33
33
  };
34
34
  Item: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@guardian/stand",
3
- "version": "0.0.28",
3
+ "version": "0.0.29",
4
4
  "type": "module",
5
5
  "//exports": "Each component has its own entry point for optimal tree-shaking. Main entry point only includes design tokens and utilities. New components/foundations should follow the same pattern.",
6
6
  "exports": {