diff --git a/tgui/docs/component-reference.md b/tgui/docs/component-reference.md index 375322d8acf..29be4ef527c 100644 --- a/tgui/docs/component-reference.md +++ b/tgui/docs/component-reference.md @@ -838,10 +838,12 @@ If you want to have a button on the right side of an section title ``` +**New:** Sections can now be nested, and will automatically font size of the +header according to their nesting level. Previously this was done via `level` +prop, but now it is automatically calculated. + - See inherited props: [Box](#box) - `title: string` - Title of the section. -- `level: number` - Section level in hierarchy. Default is 1, higher number -means deeper level of nesting. Must be an integer number. - `buttons: any` - Buttons to render aside the section title. - `fill: boolean` - If true, fills all available vertical space. - `fitted: boolean` - If true, removes all section padding. @@ -1025,25 +1027,41 @@ Notice that tabs do not contain state. It is your job to track the selected tab, handle clicks and place tab content where you need it. In return, you get a lot of flexibility in regards to how you can layout your tabs. -Tabs also support a vertical configuration. This is usually paired with a -[Flex](#flex) component to render tab content to the right. +Tabs also support a vertical configuration. This is usually paired with +[Stack](#stack) to render tab content to the right. ```jsx - - + + ... - - + + Tab content. - - + + +``` + +If you need to combine a tab section with other elements, or if you want to +add scrollable functionality to tabs, pair them with the [Section](#section) +component: + +```jsx +
+ + ... + + ... other things ... +
``` **Props:** - See inherited props: [Box](#box) +- `fluid: boolean` - If true, tabs will take all available horizontal space. +- `fill: boolean` - Similarly to `fill` on [Section](#section), tabs will fill +all available vertical space. Only makes sense in a vertical configuration. - `vertical: boolean` - Use a vertical configuration, where tabs will be stacked vertically. - `children: Tab[]` - This component only accepts tabs as its children. diff --git a/tgui/package.json b/tgui/package.json index a7e81ae305b..db6fbd44123 100644 --- a/tgui/package.json +++ b/tgui/package.json @@ -6,28 +6,28 @@ "packages/*" ], "dependencies": { - "@babel/core": "^7.12.10", - "@babel/eslint-parser": "^7.12.1", - "@babel/plugin-transform-jscript": "^7.12.1", - "@babel/preset-env": "^7.12.11", + "@babel/core": "^7.12.13", + "@babel/eslint-parser": "^7.12.13", + "@babel/plugin-transform-jscript": "^7.12.13", + "@babel/preset-env": "^7.12.13", "babel-loader": "^8.2.2", "babel-plugin-inferno": "^6.1.1", "babel-plugin-transform-remove-console": "^6.9.4", "common": "workspace:*", "css-loader": "^5.0.1", "cssnano": "^4.1.10", - "eslint": "^7.18.0", + "eslint": "^7.19.0", "eslint-plugin-react": "^7.22.0", "file-loader": "^6.2.0", "inferno": "^7.4.7", - "mini-css-extract-plugin": "^1.3.4", - "sass": "^1.32.4", - "sass-loader": "^10.1.1", + "mini-css-extract-plugin": "^1.3.5", + "sass": "^1.32.6", + "sass-loader": "^11.0.0", "style-loader": "^2.0.0", "terser-webpack-plugin": "^5.1.1", "url-loader": "^4.1.1", - "webpack": "^5.15.0", - "webpack-bundle-analyzer": "^4.3.0", - "webpack-cli": "^4.3.1" + "webpack": "^5.21.1", + "webpack-bundle-analyzer": "^4.4.0", + "webpack-cli": "^4.5.0" } } diff --git a/tgui/packages/tgui-dev-server/package.json b/tgui/packages/tgui-dev-server/package.json index f69af69dcba..5a04f61d75e 100644 --- a/tgui/packages/tgui-dev-server/package.json +++ b/tgui/packages/tgui-dev-server/package.json @@ -9,6 +9,6 @@ "glob": "^7.1.6", "source-map": "^0.7.3", "stacktrace-parser": "^0.1.10", - "ws": "^7.4.2" + "ws": "^7.4.3" } } diff --git a/tgui/packages/tgui-panel/Panel.js b/tgui/packages/tgui-panel/Panel.js index 9b05abdf03e..4930eb33a04 100644 --- a/tgui/packages/tgui-panel/Panel.js +++ b/tgui/packages/tgui-panel/Panel.js @@ -37,7 +37,7 @@ export const Panel = (props, context) => {
- + diff --git a/tgui/packages/tgui-panel/styles/themes/light.scss b/tgui/packages/tgui-panel/styles/themes/light.scss index 9c867b14d44..41cd8c888b5 100644 --- a/tgui/packages/tgui-panel/styles/themes/light.scss +++ b/tgui/packages/tgui-panel/styles/themes/light.scss @@ -36,13 +36,7 @@ 'text-color': rgba(0, 0, 0, 0.5), 'color-default': rgba(0, 0, 0, 1), )); - @include meta.load-css('~tgui/styles/components/Section.scss', $with: ( - // 'background-color': rgba(0, 0, 0, 0.1), - 'shadow-color': rgba(0, 0, 0, 0.1), - 'shadow-size': 1em, - 'shadow-type': outset, - 'shadow-offset': 0 0.2em, - )); + @include meta.load-css('~tgui/styles/components/Section.scss'); @include meta.load-css('~tgui/styles/components/Button.scss', $with: ( 'color-default': #bbbbbb, 'color-disabled': #363636, diff --git a/tgui/packages/tgui-polyfill/package.json b/tgui/packages/tgui-polyfill/package.json index 4f43bd05ccd..e640d95e14e 100644 --- a/tgui/packages/tgui-polyfill/package.json +++ b/tgui/packages/tgui-polyfill/package.json @@ -3,7 +3,7 @@ "name": "tgui-polyfill", "version": "4.3.0", "dependencies": { - "core-js": "^3.8.2", + "core-js": "^3.8.3", "regenerator-runtime": "^0.13.7", "whatwg-fetch": "^3.5.0" } diff --git a/tgui/packages/tgui/components/Section.js b/tgui/packages/tgui/components/Section.js index 90f5463e0e1..3b6901ea889 100644 --- a/tgui/packages/tgui/components/Section.js +++ b/tgui/packages/tgui/components/Section.js @@ -12,19 +12,19 @@ import { computeBoxClassName, computeBoxProps } from './Box'; export class Section extends Component { constructor(props) { super(props); - this.ref = createRef(); + this.scrollableRef = createRef(); this.scrollable = props.scrollable; } componentDidMount() { if (this.scrollable) { - addScrollableNode(this.ref.current); + addScrollableNode(this.scrollableRef.current); } } componentWillUnmount() { if (this.scrollable) { - removeScrollableNode(this.ref.current); + removeScrollableNode(this.scrollableRef.current); } } @@ -32,7 +32,6 @@ export class Section extends Component { const { className, title, - level = 1, buttons, fill, fitted, @@ -41,21 +40,10 @@ export class Section extends Component { ...rest } = this.props; const hasTitle = canRender(title) || canRender(buttons); - const content = fitted - ? children - : ( -
- {children} -
- ); return (
)}
- {content} +
+ {children} +
); diff --git a/tgui/packages/tgui/components/Tabs.js b/tgui/packages/tgui/components/Tabs.js index 359b00d359d..ca0453f8da3 100644 --- a/tgui/packages/tgui/components/Tabs.js +++ b/tgui/packages/tgui/components/Tabs.js @@ -12,6 +12,7 @@ export const Tabs = props => { const { className, vertical, + fill, fluid, children, ...rest @@ -23,6 +24,7 @@ export const Tabs = props => { vertical ? 'Tabs--vertical' : 'Tabs--horizontal', + fill && 'Tabs--fill', fluid && 'Tabs--fluid', className, computeBoxClassName(rest), diff --git a/tgui/packages/tgui/interfaces/ExosuitFabricator.js b/tgui/packages/tgui/interfaces/ExosuitFabricator.js index f23b1d6fad5..1d3e901607e 100644 --- a/tgui/packages/tgui/interfaces/ExosuitFabricator.js +++ b/tgui/packages/tgui/interfaces/ExosuitFabricator.js @@ -386,20 +386,22 @@ const PartLists = (props, context) => {
- {!!searchText && ( - - ) || ( - Object.keys(partsList).map(category => ( +
+ {!!searchText && ( - )) - )} + name={"Search Results"} + parts={partsList} + forceShow + placeholder="No matching results..." /> + ) || ( + Object.keys(partsList).map(category => ( + + )) + )} +
); @@ -419,77 +421,77 @@ const PartCategory = (props, context) => { const [ displayMatCost, ] = useSharedState(context, 'display_mats', false); + if (!forceShow && parts.length === 0) { + return null; + } return ( - ((!!parts.length || forceShow) && ( -
act("add_queue_set", { - part_list: parts.map(part => part.id), - })} /> - }> - {!parts.length && placeholder} - {parts.map(part => ( - - - -
- )) + )} + + ))} + ); }; diff --git a/tgui/packages/tgui/package.json b/tgui/packages/tgui/package.json index ae10d0785c5..826091661a8 100644 --- a/tgui/packages/tgui/package.json +++ b/tgui/packages/tgui/package.json @@ -7,7 +7,7 @@ "dompurify": "^2.2.6", "inferno": "^7.4.7", "inferno-vnode-flags": "^7.4.7", - "marked": "^1.2.7", + "marked": "^1.2.9", "tgui-dev-server": "workspace:*", "tgui-polyfill": "workspace:*" } diff --git a/tgui/packages/tgui/stories/Tabs.stories.js b/tgui/packages/tgui/stories/Tabs.stories.js index dfedb7f24c7..44ee1218bcb 100644 --- a/tgui/packages/tgui/stories/Tabs.stories.js +++ b/tgui/packages/tgui/stories/Tabs.stories.js @@ -5,7 +5,7 @@ */ import { useLocalState } from '../backend'; -import { Button, Section, Tabs } from '../components'; +import { Box, Button, Divider, Section, Tabs } from '../components'; export const meta = { title: 'Tabs', @@ -20,7 +20,6 @@ const TAB_RANGE = [ ]; const Story = (props, context) => { - const [tabIndex, setTabIndex] = useLocalState(context, 'tabIndex', 0); const [tabProps, setTabProps] = useLocalState(context, 'tabProps', {}); return ( <> @@ -67,43 +66,59 @@ const Story = (props, context) => { })} /> setTabProps({ ...tabProps, - leftAligned: !tabProps.leftAligned, + centered: !tabProps.centered, })} />
- - {TAB_RANGE.map((text, i) => ( - - )} - rightSlot={tabProps.rightSlot && ( -
+
+ + Some text +
+
+ Section-less tabs appear the same as tabs in a fitted section: +
+ ); }; + +const TabsPrefab = (props, context) => { + const [tabIndex, setTabIndex] = useLocalState(context, 'tabIndex', 0); + const [tabProps] = useLocalState(context, 'tabProps', {}); + return ( + + {TAB_RANGE.map((text, i) => ( + + )} + rightSlot={tabProps.rightSlot && ( +