From 885c987334058efa5ba30582d615c04de2e631a4 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Wed, 26 Jan 2022 12:15:22 -0600 Subject: [PATCH 1/4] revert(button): revert changes to button for v11 (#10510) * revert(button): revert changes to button for v11 * fix(ui-shell): fix alignment for header action icons Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- .../react/src/components/Button/Button.js | 33 ++++--------------- .../components/ui-shell/header/_header.scss | 2 ++ 2 files changed, 8 insertions(+), 27 deletions(-) diff --git a/packages/react/src/components/Button/Button.js b/packages/react/src/components/Button/Button.js index 7df8969c77d4..368a182bf6d4 100644 --- a/packages/react/src/components/Button/Button.js +++ b/packages/react/src/components/Button/Button.js @@ -141,17 +141,16 @@ const Button = React.forwardRef(function Button( [`${prefix}--btn--${kind}`]: kind, [`${prefix}--btn--disabled`]: disabled, [`${prefix}--btn--expressive`]: isExpressive, - [`${prefix}--tooltip--visible`]: !enabled && isHovered, - [`${prefix}--tooltip--hidden`]: - !enabled && hasIconOnly && !allowTooltipVisibility, + [`${prefix}--tooltip--visible`]: isHovered, + [`${prefix}--tooltip--hidden`]: hasIconOnly && !allowTooltipVisibility, [`${prefix}--btn--icon-only`]: hasIconOnly, [`${prefix}--btn--selected`]: hasIconOnly && isSelected && kind === 'ghost', - [`${prefix}--tooltip__trigger`]: !enabled && hasIconOnly, - [`${prefix}--tooltip--a11y`]: !enabled && hasIconOnly, + [`${prefix}--tooltip__trigger`]: hasIconOnly, + [`${prefix}--tooltip--a11y`]: hasIconOnly, [`${prefix}--btn--icon-only--${tooltipPosition}`]: - !enabled && hasIconOnly && tooltipPosition, + hasIconOnly && tooltipPosition, [`${prefix}--tooltip--align-${tooltipAlignment}`]: - !enabled && hasIconOnly && tooltipAlignment, + hasIconOnly && tooltipAlignment, }); const commonProps = { @@ -215,26 +214,6 @@ const Button = React.forwardRef(function Button( otherProps = anchorProps; } - if (enabled) { - delete otherProps['aria-describedby']; - - return React.createElement( - component, - { - onMouseEnter, - onMouseLeave, - onFocus, - onBlur, - onClick, - type, - ...other, - ...commonProps, - ...otherProps, - }, - children - ); - } - return React.createElement( component, { diff --git a/packages/styles/scss/components/ui-shell/header/_header.scss b/packages/styles/scss/components/ui-shell/header/_header.scss index b88dcda6f355..7ab0fca958ef 100644 --- a/packages/styles/scss/components/ui-shell/header/_header.scss +++ b/packages/styles/scss/components/ui-shell/header/_header.scss @@ -36,6 +36,7 @@ .#{$prefix}--header__action { @include button-reset.reset(); + display: inline-flex; width: mini-units(6); height: mini-units(6); border: rem(2px) solid transparent; @@ -80,6 +81,7 @@ } .#{$prefix}--header__action.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger { + align-items: center; justify-content: center; } From fd5db54bb0c33abbd3d1c91b13220022428c5baf Mon Sep 17 00:00:00 2001 From: Josh Black Date: Wed, 26 Jan 2022 12:39:12 -0600 Subject: [PATCH 2/4] feat(react,carbon-react): add unstable_FlexGrid (#10499) * chore: check-in work * chore: check-in work * feat(react,carbon-react): add unstable_FlexGrid * chore(react): fix eslint violations Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- packages/carbon-react/__tests__/index-test.js | 1 + .../carbon-react/src/components/Grid/index.js | 8 - packages/carbon-react/src/index.js | 8 +- .../__snapshots__/PublicAPI-test.js.snap | 32 ++ packages/react/src/__tests__/index-test.js | 441 +++++++++--------- packages/react/src/components/Grid/CSSGrid.js | 85 ++++ packages/react/src/components/Grid/Column.js | 11 +- .../react/src/components/Grid/FlexGrid.js | 73 +++ packages/react/src/components/Grid/Grid.js | 62 +-- .../react/src/components/Grid/GridContext.js | 57 +++ packages/react/src/components/Grid/index.js | 3 +- .../src/components/Grid/next}/Grid.mdx | 0 .../src/components/Grid/next}/Grid.stories.js | 14 +- .../components/Grid/next}/Grid.stories.scss | 0 packages/react/src/index.js | 7 +- 15 files changed, 499 insertions(+), 303 deletions(-) delete mode 100644 packages/carbon-react/src/components/Grid/index.js create mode 100644 packages/react/src/components/Grid/CSSGrid.js create mode 100644 packages/react/src/components/Grid/FlexGrid.js create mode 100644 packages/react/src/components/Grid/GridContext.js rename packages/{carbon-react/src/components/Grid => react/src/components/Grid/next}/Grid.mdx (100%) rename packages/{carbon-react/src/components/Grid => react/src/components/Grid/next}/Grid.stories.js (95%) rename packages/{carbon-react/src/components/Grid => react/src/components/Grid/next}/Grid.stories.scss (100%) diff --git a/packages/carbon-react/__tests__/index-test.js b/packages/carbon-react/__tests__/index-test.js index 5e708602c1f4..1553aeab0296 100644 --- a/packages/carbon-react/__tests__/index-test.js +++ b/packages/carbon-react/__tests__/index-test.js @@ -57,6 +57,7 @@ describe('Carbon Components React', () => { "FileUploaderItem", "FileUploaderSkeleton", "Filename", + "FlexGrid", "FluidForm", "Form", "FormGroup", diff --git a/packages/carbon-react/src/components/Grid/index.js b/packages/carbon-react/src/components/Grid/index.js deleted file mode 100644 index 5c444c336fab..000000000000 --- a/packages/carbon-react/src/components/Grid/index.js +++ /dev/null @@ -1,8 +0,0 @@ -/** - * Copyright IBM Corp. 2016, 2018 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -export { Grid, Column } from 'carbon-components-react'; diff --git a/packages/carbon-react/src/index.js b/packages/carbon-react/src/index.js index 8d360a39cdf9..6c5361b8a77b 100644 --- a/packages/carbon-react/src/index.js +++ b/packages/carbon-react/src/index.js @@ -184,6 +184,9 @@ export { SideNavMenu, SideNavMenuItem, SideNavSwitcher, + Grid, + Column, + unstable_FlexGrid as FlexGrid, // Experimental unstable_useContextMenu, unstable_FeatureFlags as FeatureFlags, @@ -219,8 +222,3 @@ export { unstable_useTheme as useTheme, unstable_VStack as VStack, } from 'carbon-components-react'; -export { - // Grid - Grid, - Column, -} from './components/Grid'; diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index c6ffd16a8873..cef53693d108 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -7889,6 +7889,38 @@ Map { }, }, }, + "unstable_FlexGrid" => Object { + "propTypes": Object { + "as": Object { + "args": Array [ + Array [ + Object { + "type": "string", + }, + Object { + "type": "elementType", + }, + ], + ], + "type": "oneOfType", + }, + "children": Object { + "type": "node", + }, + "className": Object { + "type": "string", + }, + "condensed": Object { + "type": "bool", + }, + "fullWidth": Object { + "type": "bool", + }, + "narrow": Object { + "type": "bool", + }, + }, + }, "unstable_HStack" => Object { "$$typeof": Symbol(react.forward_ref), "render": [Function], diff --git a/packages/react/src/__tests__/index-test.js b/packages/react/src/__tests__/index-test.js index c09fae710b74..84a964d0bcb1 100644 --- a/packages/react/src/__tests__/index-test.js +++ b/packages/react/src/__tests__/index-test.js @@ -14,225 +14,226 @@ describe('Carbon Components React', () => { it('should export components', () => { expect(Object.keys(Carbon).sort()).toMatchInlineSnapshot(` -Array [ - "Accordion", - "AccordionItem", - "AccordionSkeleton", - "ActionableNotification", - "AspectRatio", - "Breadcrumb", - "BreadcrumbItem", - "BreadcrumbSkeleton", - "Button", - "ButtonSet", - "ButtonSkeleton", - "Checkbox", - "CheckboxSkeleton", - "ClickableTile", - "CodeSnippet", - "CodeSnippetSkeleton", - "Column", - "ComboBox", - "ComposedModal", - "Content", - "ContentSwitcher", - "ControlledPasswordInput", - "Copy", - "CopyButton", - "DangerButton", - "DataTable", - "DataTableSkeleton", - "DatePicker", - "DatePickerInput", - "DatePickerSkeleton", - "Dropdown", - "DropdownSkeleton", - "ErrorBoundary", - "ErrorBoundaryContext", - "ExpandableSearch", - "ExpandableTile", - "FileUploader", - "FileUploaderButton", - "FileUploaderDropContainer", - "FileUploaderItem", - "FileUploaderSkeleton", - "Filename", - "FilterableMultiSelect", - "FluidForm", - "Form", - "FormGroup", - "FormItem", - "FormLabel", - "Grid", - "Header", - "HeaderContainer", - "HeaderGlobalAction", - "HeaderGlobalBar", - "HeaderMenu", - "HeaderMenuButton", - "HeaderMenuItem", - "HeaderName", - "HeaderNavigation", - "HeaderPanel", - "HeaderSideNavItems", - "Icon", - "IconSkeleton", - "InlineLoading", - "InlineNotification", - "Link", - "ListItem", - "Loading", - "Modal", - "ModalBody", - "ModalFooter", - "ModalHeader", - "ModalWrapper", - "MultiSelect", - "NotificationActionButton", - "NotificationButton", - "NotificationTextDetails", - "NumberInput", - "NumberInputSkeleton", - "OrderedList", - "OverflowMenu", - "OverflowMenuItem", - "Pagination", - "PaginationNav", - "PaginationSkeleton", - "PasswordInput", - "PrimaryButton", - "ProgressIndicator", - "ProgressIndicatorSkeleton", - "ProgressStep", - "RadioButton", - "RadioButtonGroup", - "RadioButtonSkeleton", - "RadioTile", - "Row", - "Search", - "SearchFilterButton", - "SearchLayoutButton", - "SearchSkeleton", - "SecondaryButton", - "Select", - "SelectItem", - "SelectItemGroup", - "SelectSkeleton", - "SelectableTile", - "SideNav", - "SideNavDetails", - "SideNavDivider", - "SideNavFooter", - "SideNavHeader", - "SideNavIcon", - "SideNavItem", - "SideNavItems", - "SideNavLink", - "SideNavLinkText", - "SideNavMenu", - "SideNavMenuItem", - "SideNavSwitcher", - "SkeletonPlaceholder", - "SkeletonText", - "SkipToContent", - "Slider", - "SliderSkeleton", - "StructuredListBody", - "StructuredListCell", - "StructuredListHead", - "StructuredListInput", - "StructuredListRow", - "StructuredListSkeleton", - "StructuredListWrapper", - "Switch", - "Switcher", - "SwitcherDivider", - "SwitcherItem", - "Tab", - "TabContent", - "Table", - "TableActionList", - "TableBatchAction", - "TableBatchActions", - "TableBody", - "TableCell", - "TableContainer", - "TableExpandHeader", - "TableExpandRow", - "TableExpandedRow", - "TableHead", - "TableHeader", - "TableRow", - "TableSelectAll", - "TableSelectRow", - "TableToolbar", - "TableToolbarAction", - "TableToolbarContent", - "TableToolbarMenu", - "TableToolbarSearch", - "Tabs", - "TabsSkeleton", - "Tag", - "TagSkeleton", - "TextArea", - "TextAreaSkeleton", - "TextInput", - "TextInputSkeleton", - "Tile", - "TileAboveTheFoldContent", - "TileBelowTheFoldContent", - "TileGroup", - "TimePicker", - "TimePickerSelect", - "ToastNotification", - "Toggle", - "ToggleSkeleton", - "ToggleSmall", - "ToggleSmallSkeleton", - "Toolbar", - "ToolbarDivider", - "ToolbarItem", - "ToolbarOption", - "ToolbarSearch", - "ToolbarTitle", - "Tooltip", - "TooltipDefinition", - "TooltipIcon", - "UnorderedList", - "unstable_FeatureFlags", - "unstable_HStack", - "unstable_Heading", - "unstable_IconButton", - "unstable_IconTab", - "unstable_Layer", - "unstable_Menu", - "unstable_MenuDivider", - "unstable_MenuGroup", - "unstable_MenuItem", - "unstable_MenuRadioGroup", - "unstable_MenuSelectableItem", - "unstable_PageSelector", - "unstable_Pagination", - "unstable_Popover", - "unstable_PopoverContent", - "unstable_ProgressBar", - "unstable_Section", - "unstable_Stack", - "unstable_TabList", - "unstable_TabPanel", - "unstable_TabPanels", - "unstable_Theme", - "unstable_ThemeContext", - "unstable_Tooltip", - "unstable_TreeNode", - "unstable_TreeView", - "unstable_VStack", - "unstable_useContextMenu", - "unstable_useFeatureFlag", - "unstable_useFeatureFlags", - "unstable_usePrefix", - "unstable_useTheme", -] -`); + Array [ + "Accordion", + "AccordionItem", + "AccordionSkeleton", + "ActionableNotification", + "AspectRatio", + "Breadcrumb", + "BreadcrumbItem", + "BreadcrumbSkeleton", + "Button", + "ButtonSet", + "ButtonSkeleton", + "Checkbox", + "CheckboxSkeleton", + "ClickableTile", + "CodeSnippet", + "CodeSnippetSkeleton", + "Column", + "ComboBox", + "ComposedModal", + "Content", + "ContentSwitcher", + "ControlledPasswordInput", + "Copy", + "CopyButton", + "DangerButton", + "DataTable", + "DataTableSkeleton", + "DatePicker", + "DatePickerInput", + "DatePickerSkeleton", + "Dropdown", + "DropdownSkeleton", + "ErrorBoundary", + "ErrorBoundaryContext", + "ExpandableSearch", + "ExpandableTile", + "FileUploader", + "FileUploaderButton", + "FileUploaderDropContainer", + "FileUploaderItem", + "FileUploaderSkeleton", + "Filename", + "FilterableMultiSelect", + "FluidForm", + "Form", + "FormGroup", + "FormItem", + "FormLabel", + "Grid", + "Header", + "HeaderContainer", + "HeaderGlobalAction", + "HeaderGlobalBar", + "HeaderMenu", + "HeaderMenuButton", + "HeaderMenuItem", + "HeaderName", + "HeaderNavigation", + "HeaderPanel", + "HeaderSideNavItems", + "Icon", + "IconSkeleton", + "InlineLoading", + "InlineNotification", + "Link", + "ListItem", + "Loading", + "Modal", + "ModalBody", + "ModalFooter", + "ModalHeader", + "ModalWrapper", + "MultiSelect", + "NotificationActionButton", + "NotificationButton", + "NotificationTextDetails", + "NumberInput", + "NumberInputSkeleton", + "OrderedList", + "OverflowMenu", + "OverflowMenuItem", + "Pagination", + "PaginationNav", + "PaginationSkeleton", + "PasswordInput", + "PrimaryButton", + "ProgressIndicator", + "ProgressIndicatorSkeleton", + "ProgressStep", + "RadioButton", + "RadioButtonGroup", + "RadioButtonSkeleton", + "RadioTile", + "Row", + "Search", + "SearchFilterButton", + "SearchLayoutButton", + "SearchSkeleton", + "SecondaryButton", + "Select", + "SelectItem", + "SelectItemGroup", + "SelectSkeleton", + "SelectableTile", + "SideNav", + "SideNavDetails", + "SideNavDivider", + "SideNavFooter", + "SideNavHeader", + "SideNavIcon", + "SideNavItem", + "SideNavItems", + "SideNavLink", + "SideNavLinkText", + "SideNavMenu", + "SideNavMenuItem", + "SideNavSwitcher", + "SkeletonPlaceholder", + "SkeletonText", + "SkipToContent", + "Slider", + "SliderSkeleton", + "StructuredListBody", + "StructuredListCell", + "StructuredListHead", + "StructuredListInput", + "StructuredListRow", + "StructuredListSkeleton", + "StructuredListWrapper", + "Switch", + "Switcher", + "SwitcherDivider", + "SwitcherItem", + "Tab", + "TabContent", + "Table", + "TableActionList", + "TableBatchAction", + "TableBatchActions", + "TableBody", + "TableCell", + "TableContainer", + "TableExpandHeader", + "TableExpandRow", + "TableExpandedRow", + "TableHead", + "TableHeader", + "TableRow", + "TableSelectAll", + "TableSelectRow", + "TableToolbar", + "TableToolbarAction", + "TableToolbarContent", + "TableToolbarMenu", + "TableToolbarSearch", + "Tabs", + "TabsSkeleton", + "Tag", + "TagSkeleton", + "TextArea", + "TextAreaSkeleton", + "TextInput", + "TextInputSkeleton", + "Tile", + "TileAboveTheFoldContent", + "TileBelowTheFoldContent", + "TileGroup", + "TimePicker", + "TimePickerSelect", + "ToastNotification", + "Toggle", + "ToggleSkeleton", + "ToggleSmall", + "ToggleSmallSkeleton", + "Toolbar", + "ToolbarDivider", + "ToolbarItem", + "ToolbarOption", + "ToolbarSearch", + "ToolbarTitle", + "Tooltip", + "TooltipDefinition", + "TooltipIcon", + "UnorderedList", + "unstable_FeatureFlags", + "unstable_FlexGrid", + "unstable_HStack", + "unstable_Heading", + "unstable_IconButton", + "unstable_IconTab", + "unstable_Layer", + "unstable_Menu", + "unstable_MenuDivider", + "unstable_MenuGroup", + "unstable_MenuItem", + "unstable_MenuRadioGroup", + "unstable_MenuSelectableItem", + "unstable_PageSelector", + "unstable_Pagination", + "unstable_Popover", + "unstable_PopoverContent", + "unstable_ProgressBar", + "unstable_Section", + "unstable_Stack", + "unstable_TabList", + "unstable_TabPanel", + "unstable_TabPanels", + "unstable_Theme", + "unstable_ThemeContext", + "unstable_Tooltip", + "unstable_TreeNode", + "unstable_TreeView", + "unstable_VStack", + "unstable_useContextMenu", + "unstable_useFeatureFlag", + "unstable_useFeatureFlags", + "unstable_usePrefix", + "unstable_useTheme", + ] + `); }); }); diff --git a/packages/react/src/components/Grid/CSSGrid.js b/packages/react/src/components/Grid/CSSGrid.js new file mode 100644 index 000000000000..918e107811ba --- /dev/null +++ b/packages/react/src/components/Grid/CSSGrid.js @@ -0,0 +1,85 @@ +/** + * Copyright IBM Corp. 2016, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +import cx from 'classnames'; +import PropTypes from 'prop-types'; +import React from 'react'; +import { usePrefix } from '../../internal/usePrefix'; +import { GridSettings, useGridSettings } from './GridContext'; + +function CSSGrid({ + as: BaseComponent = 'div', + condensed = false, + narrow = false, + fullWidth = false, + columns = 16, + className: containerClassName, + children, + ...rest +}) { + const prefix = usePrefix(); + const { subgrid } = useGridSettings(); + const className = cx(containerClassName, { + [`${prefix}--css-grid`]: !subgrid, + [`${prefix}--css-grid--${columns}`]: !subgrid && columns !== 16, + [`${prefix}--css-grid--condensed`]: condensed, + [`${prefix}--css-grid--narrow`]: narrow, + [`${prefix}--css-grid--full-width`]: fullWidth, + [`${prefix}--subgrid`]: subgrid, + [`${prefix}--col-span-${columns}`]: + (subgrid && columns !== 16) || columns !== 16, + }); + + return ( + + + {children} + + + ); +} + +CSSGrid.propTypes = { + /** + * Provide a custom element to render instead of the default
+ */ + as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]), + + /** + * Pass in content that will be rendered within the `Grid` + */ + children: PropTypes.node, + + /** + * Specify a custom className to be applied to the `Grid` + */ + className: PropTypes.string, + + /** + * Specify how many columns wide the Grid should span + */ + columns: PropTypes.number, + + /** + * Collapse the gutter to 1px. Useful for fluid layouts. + * Rows have 1px of margin between them to match gutter. + */ + condensed: PropTypes.bool, + + /** + * Remove the default max width that the grid has set + */ + fullWidth: PropTypes.bool, + + /** + * Container hangs 16px into the gutter. Useful for + * typographic alignment with and without containers. + */ + narrow: PropTypes.bool, +}; + +export { CSSGrid }; diff --git a/packages/react/src/components/Grid/Column.js b/packages/react/src/components/Grid/Column.js index bfba3b29dcb8..dc3cc8c32577 100644 --- a/packages/react/src/components/Grid/Column.js +++ b/packages/react/src/components/Grid/Column.js @@ -8,8 +8,8 @@ import cx from 'classnames'; import PropTypes from 'prop-types'; import React from 'react'; -import { useFeatureFlag } from '../FeatureFlags'; import { usePrefix } from '../../internal/usePrefix'; +import { useGridSettings } from './GridContext'; function Column({ as: BaseComponent = 'div', @@ -22,11 +22,12 @@ function Column({ max, ...rest }) { + const { mode } = useGridSettings(); const prefix = usePrefix(); - const hasCSSGrid = useFeatureFlag('enable-css-grid'); - const columnClassName = hasCSSGrid - ? getClassNameForBreakpoints([sm, md, lg, xlg, max], prefix) - : getClassNameForFlexGridBreakpoints([sm, md, lg, xlg, max], prefix); + const columnClassName = + mode === 'css-grid' + ? getClassNameForBreakpoints([sm, md, lg, xlg, max], prefix) + : getClassNameForFlexGridBreakpoints([sm, md, lg, xlg, max], prefix); const className = cx(containerClassName, columnClassName, { [`${prefix}--col`]: columnClassName.length === 0, diff --git a/packages/react/src/components/Grid/FlexGrid.js b/packages/react/src/components/Grid/FlexGrid.js new file mode 100644 index 000000000000..49c15a17f35e --- /dev/null +++ b/packages/react/src/components/Grid/FlexGrid.js @@ -0,0 +1,73 @@ +/** + * Copyright IBM Corp. 2016, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +import cx from 'classnames'; +import PropTypes from 'prop-types'; +import React from 'react'; +import { usePrefix } from '../../internal/usePrefix'; +import { GridSettings } from './GridContext'; + +function FlexGrid({ + as: BaseComponent = 'div', + condensed = false, + narrow = false, + fullWidth = false, + className: containerClassName, + children, + ...rest +}) { + const prefix = usePrefix(); + const className = cx(containerClassName, { + [`${prefix}--grid`]: true, + [`${prefix}--grid--condensed`]: condensed, + [`${prefix}--grid--narrow`]: narrow, + [`${prefix}--grid--full-width`]: fullWidth, + }); + return ( + + + {children} + + + ); +} + +FlexGrid.propTypes = { + /** + * Provide a custom element to render instead of the default
+ */ + as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]), + + /** + * Pass in content that will be rendered within the `FlexGrid` + */ + children: PropTypes.node, + + /** + * Specify a custom className to be applied to the `FlexGrid` + */ + className: PropTypes.string, + + /** + * Collapse the gutter to 1px. Useful for fluid layouts. + * Rows have 1px of margin between them to match gutter. + */ + condensed: PropTypes.bool, + + /** + * Remove the default max width that the grid has set + */ + fullWidth: PropTypes.bool, + + /** + * Container hangs 16px into the gutter. Useful for + * typographic alignment with and without containers. + */ + narrow: PropTypes.bool, +}; + +export { FlexGrid }; diff --git a/packages/react/src/components/Grid/Grid.js b/packages/react/src/components/Grid/Grid.js index e0c0cd8dfecb..4e583bdc6bcb 100644 --- a/packages/react/src/components/Grid/Grid.js +++ b/packages/react/src/components/Grid/Grid.js @@ -5,58 +5,18 @@ * LICENSE file in the root directory of this source tree. */ -import cx from 'classnames'; import PropTypes from 'prop-types'; -import React, { useContext } from 'react'; +import React from 'react'; import { useFeatureFlag } from '../FeatureFlags'; -import { usePrefix } from '../../internal/usePrefix'; - -const SubgridContext = React.createContext(false); - -function Grid({ - as: BaseComponent = 'div', - condensed = false, - narrow = false, - fullWidth = false, - columns = 16, - className: containerClassName, - children, - ...rest -}) { - const prefix = usePrefix(); - const hasCSSGrid = useFeatureFlag('enable-css-grid'); - const isSubgrid = useContext(SubgridContext); - - const cssGridClassNames = { - [`${prefix}--css-grid`]: !isSubgrid, - [`${prefix}--css-grid--${columns}`]: !isSubgrid && columns !== 16, - [`${prefix}--css-grid--condensed`]: condensed, - [`${prefix}--css-grid--narrow`]: narrow, - [`${prefix}--css-grid--full-width`]: fullWidth, - [`${prefix}--subgrid`]: isSubgrid, - [`${prefix}--col-span-${columns}`]: - (isSubgrid && columns !== 16) || columns !== 16, - }; - - const flexGridClassNames = { - [`${prefix}--grid`]: true, - [`${prefix}--grid--condensed`]: condensed, - [`${prefix}--grid--narrow`]: narrow, - [`${prefix}--grid--full-width`]: fullWidth, - }; - - const className = cx( - containerClassName, - hasCSSGrid ? cssGridClassNames : flexGridClassNames - ); - - return ( - - - {children} - - - ); +import { CSSGrid } from './CSSGrid'; +import { FlexGrid } from './FlexGrid'; + +function Grid(props) { + const enableCSSGrid = useFeatureFlag('enable-css-grid'); + if (enableCSSGrid) { + return ; + } + return ; } Grid.propTypes = { @@ -98,4 +58,4 @@ Grid.propTypes = { narrow: PropTypes.bool, }; -export default Grid; +export { Grid }; diff --git a/packages/react/src/components/Grid/GridContext.js b/packages/react/src/components/Grid/GridContext.js new file mode 100644 index 000000000000..e916dd319708 --- /dev/null +++ b/packages/react/src/components/Grid/GridContext.js @@ -0,0 +1,57 @@ +/** + * Copyright IBM Corp. 2016, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +import PropTypes from 'prop-types'; +import * as React from 'react'; + +/** + * Provides a grid context for communication the grid "mode" (flexbox or + * css-grid) along with subgrid information. + */ +const GridSettingsContext = React.createContext({ + mode: 'flexbox', + subgrid: false, +}); + +export function GridSettings({ children, mode, subgrid = false }) { + const value = React.useMemo(() => { + return { + mode, + subgrid, + }; + }, [mode, subgrid]); + return ( + + {children} + + ); +} + +GridSettings.propTypes = { + /** + * Pass in components which will be rendered within the `GridSettings` + * component + */ + children: PropTypes.node, + + /** + * Specify the grid mode for the GridContext + */ + mode: PropTypes.oneOf(['flexbox', 'css-grid']).isRequired, + + /** + * Specify whether subgrid should be enabled + */ + subgrid: PropTypes.bool, +}; + +/** + * Helper function for accessing the GridContext value + */ +export function useGridSettings() { + return React.useContext(GridSettingsContext); +} diff --git a/packages/react/src/components/Grid/index.js b/packages/react/src/components/Grid/index.js index 9eade1048838..6ba488c90806 100644 --- a/packages/react/src/components/Grid/index.js +++ b/packages/react/src/components/Grid/index.js @@ -5,6 +5,7 @@ * LICENSE file in the root directory of this source tree. */ -export { default as Grid } from './Grid'; +export { FlexGrid } from './FlexGrid'; +export { Grid } from './Grid'; export { default as Row } from './Row'; export { default as Column } from './Column'; diff --git a/packages/carbon-react/src/components/Grid/Grid.mdx b/packages/react/src/components/Grid/next/Grid.mdx similarity index 100% rename from packages/carbon-react/src/components/Grid/Grid.mdx rename to packages/react/src/components/Grid/next/Grid.mdx diff --git a/packages/carbon-react/src/components/Grid/Grid.stories.js b/packages/react/src/components/Grid/next/Grid.stories.js similarity index 95% rename from packages/carbon-react/src/components/Grid/Grid.stories.js rename to packages/react/src/components/Grid/next/Grid.stories.js index 3dd702410a69..9fa107aed12c 100644 --- a/packages/carbon-react/src/components/Grid/Grid.stories.js +++ b/packages/react/src/components/Grid/next/Grid.stories.js @@ -6,12 +6,9 @@ */ import './Grid.stories.scss'; -import { - Grid, - Column, - unstable_FeatureFlags as FeatureFlags, -} from 'carbon-components-react'; + import React from 'react'; +import { Grid, Column } from '../../Grid'; import mdx from './Grid.mdx'; export default { @@ -20,13 +17,6 @@ export default { subcomponents: { Column, }, - decorators: [ - (Story) => ( - - - - ), - ], parameters: { controls: { include: [], // ensure props are not displayed on the controls pane diff --git a/packages/carbon-react/src/components/Grid/Grid.stories.scss b/packages/react/src/components/Grid/next/Grid.stories.scss similarity index 100% rename from packages/carbon-react/src/components/Grid/Grid.stories.scss rename to packages/react/src/components/Grid/next/Grid.stories.scss diff --git a/packages/react/src/index.js b/packages/react/src/index.js index 8ad409cec51b..2932e257bbae 100644 --- a/packages/react/src/index.js +++ b/packages/react/src/index.js @@ -64,7 +64,12 @@ export FluidForm from './components/FluidForm'; export FormGroup from './components/FormGroup'; export FormItem from './components/FormItem'; export FormLabel from './components/FormLabel'; -export { Grid, Row, Column } from './components/Grid'; +export { + Grid, + Row, + Column, + FlexGrid as unstable_FlexGrid, +} from './components/Grid'; export Icon from './components/Icon'; export InlineLoading from './components/InlineLoading'; export Link from './components/Link'; From 500567a165089c6b3219bec0490a85e3d130b270 Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Wed, 26 Jan 2022 14:06:45 -0500 Subject: [PATCH 3/4] fix(data-table): remove extra padding from search (#10520) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- .../src/components/data-table/_data-table-action.scss | 6 +++++- .../components/data-table/action/_data-table-action.scss | 6 +++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/components/src/components/data-table/_data-table-action.scss b/packages/components/src/components/data-table/_data-table-action.scss index f21caf570b2a..57aa666fbc8d 100644 --- a/packages/components/src/components/data-table/_data-table-action.scss +++ b/packages/components/src/components/data-table/_data-table-action.scss @@ -74,11 +74,15 @@ .#{$prefix}--toolbar-search-container-expandable .#{$prefix}--search-input { height: 100%; - padding: 0; cursor: pointer; opacity: 0; } + .#{$prefix}--toolbar-search-container-expandable:not(.#{$prefix}--toolbar-search-container-active) + .#{$prefix}--search-input { + padding: 0; + } + .#{$prefix}--toolbar-search-container-expandable .#{$prefix}--search-magnifier-icon { left: 0; diff --git a/packages/styles/scss/components/data-table/action/_data-table-action.scss b/packages/styles/scss/components/data-table/action/_data-table-action.scss index 2b0c7e5dd84a..cde4173afb16 100644 --- a/packages/styles/scss/components/data-table/action/_data-table-action.scss +++ b/packages/styles/scss/components/data-table/action/_data-table-action.scss @@ -80,11 +80,15 @@ .#{$prefix}--toolbar-search-container-expandable .#{$prefix}--search-input { height: 100%; - padding: 0; cursor: pointer; opacity: 0; } + .#{$prefix}--toolbar-search-container-expandable:not(.#{$prefix}--toolbar-search-container-active) + .#{$prefix}--search-input { + padding: 0; + } + .#{$prefix}--toolbar-search-container-expandable .#{$prefix}--search-magnifier-icon { left: 0; From e11bf010c76840248f244eb5f9c010d5e3d6cb69 Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Wed, 26 Jan 2022 15:54:53 -0500 Subject: [PATCH 4/4] fix(UIShell): change div to ul (#10516) Co-authored-by: Alessandra Davila Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- packages/react/src/components/UIShell/HeaderSideNavItems.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/UIShell/HeaderSideNavItems.js b/packages/react/src/components/UIShell/HeaderSideNavItems.js index 12d8db2a189d..a25db2c3d815 100644 --- a/packages/react/src/components/UIShell/HeaderSideNavItems.js +++ b/packages/react/src/components/UIShell/HeaderSideNavItems.js @@ -23,7 +23,7 @@ const HeaderSideNavItems = ({ }, customClassName ); - return
{children}
; + return
    {children}
; }; HeaderSideNavItems.propTypes = {