+ */
+ 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/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
;
};
HeaderSideNavItems.propTypes = {
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';
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;
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;
}