@redocly/theme 0.0.0-beta-20240223133421 → 0.0.0-beta-20240226163902

package/lib/components/CodeBlock/CodeBlockControls.js

@@ -38,11 +38,11 @@ function CodeBlockControls({ children, className, title, controls, tabs, }) {
         title && react_1.default.createElement(Title, null, title),
         tabs && react_1.default.createElement(FileTabs, null),
         react_1.default.createElement(ControlsWrapper, null,
-            report && !((_a = report === null || report === void 0 ? void 0 : report.props) === null || _a === void 0 ? void 0 : _a.hide) ? (react_1.default.createElement(Button_1.Button, Object.assign({ "data-cy": "report-button", "data-testid": "report-button", icon: controlsType === 'icon' ? react_1.default.createElement(WarningSquareIcon_1.WarningSquareIcon, { size: "18px" }) : undefined, size: "small", variant: "ghost" }, report.props), controlsType != 'icon' && (((_b = report.props) === null || _b === void 0 ? void 0 : _b.buttonText) || 'Report'))) : null,
-            expand && !((_c = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.expand) === null || _c === void 0 ? void 0 : _c.hide) ? (react_1.default.createElement(Button_1.Button, { "data-cy": "expand-all", "data-testid": "expand-all", icon: controlsType === 'icon' ? react_1.default.createElement(MaximizeIcon_1.MaximizeIcon, null) : undefined, onClick: expand === null || expand === void 0 ? void 0 : expand.onClick, size: "small", variant: "ghost" }, controlsType !== 'icon' && (expand === null || expand === void 0 ? void 0 : expand.label) ? expand.label : 'Expand all')) : null,
-            collapse && !((_d = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.collapse) === null || _d === void 0 ? void 0 : _d.hide) ? (react_1.default.createElement(Button_1.Button, { "data-cy": "collapse-all", "data-testid": "collapse-all", icon: controlsType === 'icon' ? react_1.default.createElement(MinimizeIcon_1.MinimizeIcon, null) : undefined, onClick: collapse === null || collapse === void 0 ? void 0 : collapse.onClick, size: "small", variant: "ghost" }, controlsType !== 'icon' && (expand === null || expand === void 0 ? void 0 : expand.label) ? expand.label : 'Collapse all')) : null,
-            select ? (react_1.default.createElement(Button_1.Button, { "data-cy": "select-all", "data-testid": "select-all", icon: controlsType === 'icon' ? react_1.default.createElement(SelectIcon_1.SelectIcon, null) : undefined, onClick: select === null || select === void 0 ? void 0 : select.onClick, size: "small", variant: "ghost" }, controlsType !== 'icon' && (select === null || select === void 0 ? void 0 : select.label) ? select.label : 'Select all')) : null,
-            deselect ? (react_1.default.createElement(Button_1.Button, { "data-cy": "clear-all", "data-testid": "clear-all", icon: controlsType === 'icon' ? react_1.default.createElement(DeselectIcon_1.DeselectIcon, null) : undefined, onClick: deselect === null || deselect === void 0 ? void 0 : deselect.onClick, size: "small", variant: "ghost" }, controlsType !== 'icon' && (deselect === null || deselect === void 0 ? void 0 : deselect.label) ? deselect.label : 'Clear all')) : null,
+            report && !((_a = report === null || report === void 0 ? void 0 : report.props) === null || _a === void 0 ? void 0 : _a.hide) ? (react_1.default.createElement(ControlButton, Object.assign({ variant: "ghost", size: "small", "data-cy": "report-button", "data-testid": "report-button", icon: controlsType === 'icon' ? react_1.default.createElement(WarningSquareIcon_1.WarningSquareIcon, { size: "18px" }) : undefined }, report.props), controlsType != 'icon' && (((_b = report.props) === null || _b === void 0 ? void 0 : _b.buttonText) || 'Report'))) : null,
+            expand && !((_c = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.expand) === null || _c === void 0 ? void 0 : _c.hide) ? (react_1.default.createElement(ControlButton, { variant: "ghost", size: "small", "data-cy": "expand-all", "data-testid": "expand-all", icon: controlsType === 'icon' ? react_1.default.createElement(MaximizeIcon_1.MaximizeIcon, null) : undefined, onClick: expand === null || expand === void 0 ? void 0 : expand.onClick }, controlsType !== 'icon' && ((expand === null || expand === void 0 ? void 0 : expand.label) || 'Expand all'))) : null,
+            collapse && !((_d = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.collapse) === null || _d === void 0 ? void 0 : _d.hide) ? (react_1.default.createElement(ControlButton, { variant: "ghost", size: "small", "data-cy": "collapse-all", "data-testid": "collapse-all", icon: controlsType === 'icon' ? react_1.default.createElement(MinimizeIcon_1.MinimizeIcon, null) : undefined, onClick: collapse === null || collapse === void 0 ? void 0 : collapse.onClick }, controlsType !== 'icon' && ((expand === null || expand === void 0 ? void 0 : expand.label) || 'Collapse all'))) : null,
+            select ? (react_1.default.createElement(ControlButton, { variant: "ghost", size: "small", "data-cy": "select-all", "data-testid": "select-all", icon: controlsType === 'icon' ? react_1.default.createElement(SelectIcon_1.SelectIcon, null) : undefined, onClick: select === null || select === void 0 ? void 0 : select.onClick }, controlsType !== 'icon' && (select === null || select === void 0 ? void 0 : select.label) ? select.label : 'Select all')) : null,
+            deselect ? (react_1.default.createElement(ControlButton, { variant: "ghost", size: "small", "data-cy": "clear-all", "data-testid": "clear-all", icon: controlsType === 'icon' ? react_1.default.createElement(DeselectIcon_1.DeselectIcon, null) : undefined, onClick: deselect === null || deselect === void 0 ? void 0 : deselect.onClick }, controlsType !== 'icon' && (deselect === null || deselect === void 0 ? void 0 : deselect.label) ? deselect.label : 'Clear all')) : null,
             copy && !((_e = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.copy) === null || _e === void 0 ? void 0 : _e.hide) ? (react_1.default.createElement(CopyButton_1.CopyButton, { data: copy.data, "data-source": copy.dataSource, "data-hash": copy.dataHash, type: controlsType, toasterPlacement: copy.toasterPlacement, toasterDuration: copy.toasterDuration, buttonText: copy.label, onCopyClick: () => {
                     copy === null || copy === void 0 ? void 0 : copy.onClick;
                     telemetry.send('code_snippet_copied', {});
@@ -93,4 +93,9 @@ const CodeTabButton = (0, styled_components_1.default)(Button_1.Button) `
     border: none;
   }
 `;
+const ControlButton = (0, styled_components_1.default)(Button_1.Button) `
+  & + & {
+    margin-left: 0;
+  }
+`;
 //# sourceMappingURL=CodeBlockControls.js.map

package/lib/components/StatusCode/StatusCode.d.ts

@@ -1,3 +1,6 @@
-export declare const StatusCode: import("styled-components").StyledComponent<"button", any, {
+/// <reference types="react" />
+export declare const StatusCode: import("styled-components").StyledComponent<import("react").FC<import("../../index.js").ButtonProps>, any, import("../../index.js").ButtonProps & {
+    variant: "ghost";
+} & {
     status: string;
-}, never>;
+}, "variant">;

package/lib/components/StatusCode/StatusCode.js

@@ -5,11 +5,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StatusCode = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
-exports.StatusCode = styled_components_1.default.button `
-  background: none;
-  padding: 0;
-  display: flex;
-  align-items: center;
+const theme_1 = require("../../index.js");
+exports.StatusCode = (0, styled_components_1.default)(theme_1.Button).attrs(() => ({
+    variant: 'ghost',
+})) `
+  gap: 0;
+  border: 0;
     
   &:before {
     display: inline-block;

package/lib/core/styles/dark.js

@@ -246,6 +246,13 @@ exports.darkMode = (0, styled_components_1.css) `
   --tab-bg-color-filled: var(--color-warm-grey-4); // @presenter Color
   --tab-content-color-disabled: var(--color-warm-grey-4); // @presenter Color
 
+  /**
+  * @tokens Dropdown Colors
+  * @presenter Color
+  */
+
+  --dropdown-content-color-default: var(--color-warm-grey-8); // @presenter Color
+
   /**
   * @tokens API Reference Schema Required styles
   */

package/lib/icons/ChevronDownIcon/ChevronDownIcon.js

@@ -16,6 +16,7 @@ exports.ChevronDownIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
     fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
   }
 
+  flex-shrink: 0;
   height: ${({ size }) => size || '16px'};
   width: ${({ size }) => size || '16px'};
 `;

package/lib/icons/ChevronUpIcon/ChevronUpIcon.js

@@ -16,6 +16,7 @@ exports.ChevronUpIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
     fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
   }
 
+  flex-shrink: 0;
   height: ${({ size }) => size || '16px'};
   width: ${({ size }) => size || '16px'};
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.0.0-beta-20240223133421",
+  "version": "0.0.0-beta-20240226163902",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",

package/src/components/CodeBlock/CodeBlockControls.tsx

@@ -92,68 +92,68 @@ export function CodeBlockControls({
       {tabs && <FileTabs />}
       <ControlsWrapper>
         {report && !report?.props?.hide ? (
-          <Button
+          <ControlButton
+            variant="ghost"
+            size="small"
             data-cy="report-button"
             data-testid="report-button"
             icon={controlsType === 'icon' ? <WarningSquareIcon size="18px" /> : undefined}
-            size="small"
-            variant="ghost"
             {...report.props}
           >
             {controlsType != 'icon' && (report.props?.buttonText || 'Report')}
-          </Button>
+          </ControlButton>
         ) : null}
 
         {expand && !codeSnippet?.expand?.hide ? (
-          <Button
+          <ControlButton
+            variant="ghost"
+            size="small"
             data-cy="expand-all"
             data-testid="expand-all"
             icon={controlsType === 'icon' ? <MaximizeIcon /> : undefined}
             onClick={expand?.onClick}
-            size="small"
-            variant="ghost"
           >
-            {controlsType !== 'icon' && expand?.label ? expand.label : 'Expand all'}
-          </Button>
+            {controlsType !== 'icon' && (expand?.label || 'Expand all')}
+          </ControlButton>
         ) : null}
 
         {collapse && !codeSnippet?.collapse?.hide ? (
-          <Button
+          <ControlButton
+            variant="ghost"
+            size="small"
             data-cy="collapse-all"
             data-testid="collapse-all"
             icon={controlsType === 'icon' ? <MinimizeIcon /> : undefined}
             onClick={collapse?.onClick}
-            size="small"
-            variant="ghost"
           >
-            {controlsType !== 'icon' && expand?.label ? expand.label : 'Collapse all'}
-          </Button>
+            {controlsType !== 'icon' && (expand?.label || 'Collapse all')}
+          </ControlButton>
         ) : null}
 
         {select ? (
-          <Button
+          <ControlButton
+            variant="ghost"
+            size="small"
             data-cy="select-all"
             data-testid="select-all"
             icon={controlsType === 'icon' ? <SelectIcon /> : undefined}
             onClick={select?.onClick}
-            size="small"
-            variant="ghost"
           >
             {controlsType !== 'icon' && select?.label ? select.label : 'Select all'}
-          </Button>
+          </ControlButton>
         ) : null}
 
         {deselect ? (
-          <Button
+          <ControlButton
+            variant="ghost"
+            size="small"
             data-cy="clear-all"
             data-testid="clear-all"
             icon={controlsType === 'icon' ? <DeselectIcon /> : undefined}
             onClick={deselect?.onClick}
-            size="small"
-            variant="ghost"
           >
             {controlsType !== 'icon' && deselect?.label ? deselect.label : 'Clear all'}
-          </Button>
+          </ControlButton>
         ) : null}
 
         {copy && !codeSnippet?.copy?.hide ? (
@@ -229,3 +229,9 @@ const CodeTabButton = styled(Button)<{ active: boolean }>`
     border: none;
   }
 `;
+
+const ControlButton = styled(Button)`
+  & + & {
+    margin-left: 0;
+  }
+`;

package/src/components/StatusCode/StatusCode.ts

@@ -1,10 +1,12 @@
 import styled from 'styled-components';
 
-export const StatusCode = styled.button<{ status: string }>`
-  background: none;
-  padding: 0;
-  display: flex;
-  align-items: center;
+import { Button } from '@redocly/theme';
+
+export const StatusCode = styled(Button).attrs(() => ({
+  variant: 'ghost',
+}))<{ status: string }>`
+  gap: 0;
+  border: 0;
     
   &:before {
     display: inline-block;

package/src/core/styles/dark.ts

@@ -245,6 +245,13 @@ export const darkMode = css`
   --tab-bg-color-filled: var(--color-warm-grey-4); // @presenter Color
   --tab-content-color-disabled: var(--color-warm-grey-4); // @presenter Color
 
+  /**
+  * @tokens Dropdown Colors
+  * @presenter Color
+  */
+
+  --dropdown-content-color-default: var(--color-warm-grey-8); // @presenter Color
+
   /**
   * @tokens API Reference Schema Required styles
   */

package/src/icons/ChevronDownIcon/ChevronDownIcon.tsx

@@ -18,6 +18,7 @@ export const ChevronDownIcon = styled(Icon).attrs(() => ({
     fill: ${({ color }) => getCssColorVariable(color)};
   }
 
+  flex-shrink: 0;
   height: ${({ size }) => size || '16px'};
   width: ${({ size }) => size || '16px'};
 `;

package/src/icons/ChevronUpIcon/ChevronUpIcon.tsx

@@ -18,6 +18,7 @@ export const ChevronUpIcon = styled(Icon).attrs(() => ({
     fill: ${({ color }) => getCssColorVariable(color)};
   }
 
+  flex-shrink: 0;
   height: ${({ size }) => size || '16px'};
   width: ${({ size }) => size || '16px'};
 `;