Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(structuredList): update to use radio button icon, radios are left aligned under featureflag #15910

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
1026137
feat(structuredList): use of radio button icon,radios are left aligned
2nikhiltom Mar 7, 2024
e981ded
chore: revert few typos
2nikhiltom Mar 7, 2024
8d422ac
Merge branch 'main' into structuredList_selectables
2nikhiltom Mar 7, 2024
d7ad153
feat(structuredList): adds feature flag story for structuredList
2nikhiltom Mar 7, 2024
c8e3ccf
Merge branch 'structuredList_selectables' of https://github.com/2nikh…
2nikhiltom Mar 7, 2024
9233494
feat(structuredlist): add radio button selection, styling behind a flag
tay1orjones Mar 12, 2024
cf941c4
fix(structuredlist): add focus ring on click
tay1orjones Mar 12, 2024
eaa98e5
chore(StructuredList): remote JS feature flag, delete unnecessary styles
2nikhiltom Mar 12, 2024
cb90acc
chore(StructuredList): revert story to use checkmark icons
2nikhiltom Mar 13, 2024
0b37c8d
fix(StructuredList): adds onclick focus ring with selection prop
2nikhiltom Mar 13, 2024
6a9f89d
fix(StructuredList): adds 'selection' props
2nikhiltom Mar 14, 2024
2e7c907
Merge branch 'main' into structuredList_selectables
2nikhiltom Mar 18, 2024
d93f298
fix(structuredlist): focus on click & Tab,handles clickaway events
2nikhiltom Mar 20, 2024
24975e7
Merge branch 'structuredList_selectables' of https://github.com/2nikh…
2nikhiltom Mar 20, 2024
beeb991
chore(StructuredList): add typescript types on refs
2nikhiltom Mar 20, 2024
298378f
Merge branch 'main' into structuredList_selectables
2nikhiltom Mar 20, 2024
3834e1a
chore(StructuredList): updates PublicAPI snapshot
2nikhiltom Mar 20, 2024
ddb3a7e
Merge branch 'main' into structuredList_selectables
2nikhiltom Mar 20, 2024
7d51dc8
chore: update snapshots
andreancardona Mar 20, 2024
3712884
fix(StructuredList): focus rings only on selection prop
2nikhiltom Mar 21, 2024
30e2ab9
Merge branch 'structuredList_selectables' of https://github.com/2nikh…
2nikhiltom Mar 21, 2024
3ab5348
Merge branch 'main' into structuredList_selectables
tay1orjones Mar 26, 2024
4fa3572
chore: update snaps
tay1orjones Mar 26, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/feature-flags/feature-flags.yml
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,10 @@ feature-flags:
description: >
Enable the new TreeView controllable API
enabled: false
- name: enable-v12-structured-list-visible-icons
description: >
Enable rendering of radio icons in the StructuredList component
enabled: false
- name: enable-experimental-focus-wrap-without-sentinels
description: >
Enable the new focus wrap behavior that doesn't use sentinel nodes
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7361,6 +7361,9 @@ Map {
"onKeyDown": Object {
"type": "func",
},
"selection": Object {
"type": "bool",
},
},
},
"StructuredListSkeleton" => Object {
Expand Down
19 changes: 11 additions & 8 deletions packages/react/src/components/FeatureFlags/overview.stories.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -30,16 +30,19 @@ components with all feature flags turned on.

## Current feature flags

| Flag | Description | Default | Javascript flag | Sass flag |
| -------------------------------------------------- | ------------------------------------------------------------------------ | ------- | --------------- | --------- |
| `enable-v11-release` | Flag enabling the v11 features | `true` | ✅ | ✅ |
| `enable-experimental-tile-contrast` | Enable the improved styling for tiles that provides better contrast | `false` | | ✅ |
| `enable-v12-tile-default-icons` | Enable default icons for Tile components | `false` | ✅ | |
| `enable-v12-overflowmenu` | Enable the use of the v12 OverflowMenu leveraging the Menu subcomponents | `false` | ✅ | |
| `enable-v12-tile-radio-icons` | Enable rendering of default icons in the tile components | `false` | ✅ | ✅ |
| `enable-treeview-controllable` | Enable the new TreeView controllable API | `false` | ✅ | |

| Flag | Description | Default | Javascript flag | Sass flag |
| ------------------------------------------ | ------------------------------------------------------------------------ | ------- | --------------- | --------- |
| `enable-v11-release` | Flag enabling the v11 features | `true` | ✅ | ✅ |
| `enable-experimental-tile-contrast` | Enable the improved styling for tiles that provides better contrast | `false` | | ✅ |
| `enable-v12-tile-default-icons` | Enable default icons for Tile components | `false` | ✅ | |
| `enable-v12-overflowmenu` | Enable the use of the v12 OverflowMenu leveraging the Menu subcomponents | `false` | ✅ | |
| `enable-v12-tile-radio-icons` | Enable rendering of default icons in the tile components | `false` | ✅ | ✅ |
| `enable-treeview-controllable` | Enable the new TreeView controllable API | `false` | ✅ | |
| `enable-v12-structured-list-visible-icons` | Enable icon components within StructuredList to always be visible | `false` | | ✅ |
| `enable-experimental-focus-wrap-without-sentinels` | Enable the new focus wrap behavior that doesn't use sentinel nodes | `false` | ✅ | |


## Turning on feature flags in Javascript/react

Use the FeatureFlag component to turn on a feature flag for a portion of your
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,239 @@
/**
* Copyright IBM Corp. 2016, 2023
*
* 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 React from 'react';
import mdx from './StructuredList.mdx';
import { WithLayer } from '../../../.storybook/templates/WithLayer';
import { useFeatureFlag } from '../FeatureFlags';

import {
StructuredListWrapper,
StructuredListHead,
StructuredListBody,
StructuredListRow,
StructuredListInput,
StructuredListCell,
} from './';
import StructuredListSkeleton from './StructuredList.Skeleton';
import { WithFeatureFlags } from '../../../.storybook/templates/WithFeatureFlags';
const experimentalClassname = 'experimental-tile';
export default {
title: 'Experimental/Feature Flags/StructuredList',
component: StructuredListWrapper,
subcomponents: {
StructuredListHead,
StructuredListBody,
StructuredListRow,
StructuredListInput,
StructuredListCell,
},
parameters: {
docs: {
page: mdx,
},
},
argTypes: {
children: {
table: {
disable: true,
},
},
},
decorators: [
(Story) => (
<WithFeatureFlags>
<Story />
</WithFeatureFlags>
),
],
};

export const Default = (args) => {
return (
<div className={experimentalClassname}>
<StructuredListWrapper {...args}>
<StructuredListHead>
<StructuredListRow head>
<StructuredListCell head>ColumnA</StructuredListCell>
<StructuredListCell head>ColumnB</StructuredListCell>
<StructuredListCell head>ColumnC</StructuredListCell>
</StructuredListRow>
</StructuredListHead>
<StructuredListBody>
<StructuredListRow>
<StructuredListCell noWrap>Row 1</StructuredListCell>
<StructuredListCell>Row 1</StructuredListCell>
<StructuredListCell>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
magna, finibus id tortor sed, aliquet bibendum augue. Aenean
posuere sem vel euismod dignissim. Nulla ut cursus dolor.
Pellentesque vulputate nisl a porttitor interdum.
</StructuredListCell>
</StructuredListRow>
<StructuredListRow>
<StructuredListCell noWrap>Row 2</StructuredListCell>
<StructuredListCell>Row 2</StructuredListCell>
<StructuredListCell>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
magna, finibus id tortor sed, aliquet bibendum augue. Aenean
posuere sem vel euismod dignissim. Nulla ut cursus dolor.
Pellentesque vulputate nisl a porttitor interdum.
</StructuredListCell>
</StructuredListRow>
</StructuredListBody>
</StructuredListWrapper>
</div>
);
};

Default.args = {
isCondensed: false,
isFlush: false,
};

Default.argTypes = {
selection: {
control: {
disable: true,
},
},
isCondensed: {
control: {
type: 'boolean',
},
},
isFlush: {
control: {
type: 'boolean',
},
},
};

const structuredListBodyRowGenerator = (numRows) => {
return Array.apply(null, Array(numRows)).map((n, i) => (
<StructuredListRow key={`row-${i}`} selection>
<StructuredListCell>Row {i}</StructuredListCell>
<StructuredListCell>Row {i}</StructuredListCell>
<StructuredListCell>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna,
finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel
euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a
porttitor interdum.
</StructuredListCell>
<StructuredListInput
id={`row-${i}`}
value={`row-${i}`}
title={`row-${i}`}
name="row-0"
aria-label={`row-${i}`}
/>
</StructuredListRow>
));
};

export const Selection = (args) => {
return (
<StructuredListWrapper selection {...args}>
<StructuredListHead>
<StructuredListRow head selection>
<StructuredListCell head>ColumnA</StructuredListCell>
<StructuredListCell head>ColumnB</StructuredListCell>
<StructuredListCell head>ColumnC</StructuredListCell>
</StructuredListRow>
</StructuredListHead>
<StructuredListBody>
{structuredListBodyRowGenerator(4)}
</StructuredListBody>
</StructuredListWrapper>
);
};

Selection.argTypes = {
isFlush: {
table: {
disable: true,
},
},
selection: {
control: {
disable: true,
},
},
};

export const WithBackgroundLayer = () => {
const v12StructuredRadioIcons = useFeatureFlag(
'enable-v12-structured-list-visible-icons'
);
return (
<WithLayer>
<StructuredListWrapper selection>
<StructuredListHead>
<StructuredListRow head>
{v12StructuredRadioIcons && (
<StructuredListCell head></StructuredListCell>
)}
<StructuredListCell head>ColumnA</StructuredListCell>
<StructuredListCell head>ColumnB</StructuredListCell>
<StructuredListCell head>ColumnC</StructuredListCell>
</StructuredListRow>
</StructuredListHead>
<StructuredListBody>
{structuredListBodyRowGenerator(4, v12StructuredRadioIcons)}
</StructuredListBody>
</StructuredListWrapper>
</WithLayer>
);
};

export const Skeleton = (args) => (
<div style={{ width: '800px' }}>
<StructuredListSkeleton {...args} />
</div>
);

Skeleton.args = {
rowCount: 5,
};

Skeleton.argTypes = {
isFlush: {
table: {
disable: true,
},
},
isCondensed: {
table: {
disable: true,
},
},
ariaLabel: {
table: {
disable: true,
},
},
['aria-label']: {
table: {
disable: true,
},
},
className: {
table: {
disable: true,
},
},
selection: {
table: {
disable: true,
},
},
rowCount: {
control: {
type: 'number',
},
},
};
Loading
Loading