feat: Feature Flag component in web-components

[preetibansalui]

Closes #19455

Created new component for feature-flags which can be used to enable/disable feature flag to its child components.

Changelog

New

new component for feature-flags

Testing / Reviewing

1. Go to web-components storybook > Breadcrumb > Default
2. It should display text 'Feature flag is enabled for this component.' for first component.
3. It should display text 'Feature flag is not enabled for this component.' for second and third component.

Note: Breadcrumb changes are for testing only and will be reverted before merge.

PR Checklist

As the author of this PR, before marking ready for review, confirm you:

• [x] Reviewed every line of the diff
• [ ] Updated documentation and storybook examples
• [x] Wrote passing tests that cover this change
• [x] Addressed any impact on accessibility (a11y)
• [x] Tested for cross-browser consistency
• [x] Validated that this code is ready for review and status checks should pass

More details can be found in the pull request guide

[netlify[bot]]

✅ Deploy Preview for v11-carbon-react ready!

Name	Link
🔨 Latest commit	95096294ad0e9750489290c83ad180ecd07eed97
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-react/deploys/6853b41dd9f4aa000827bdb6
😎 Deploy Preview	https://deploy-preview-19555--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify[bot]]

✅ Deploy Preview for v11-carbon-web-components ready!

Name	Link
🔨 Latest commit	95096294ad0e9750489290c83ad180ecd07eed97
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-web-components/deploys/6853b41d6a04280009e0cdc8
😎 Deploy Preview	https://deploy-preview-19555--v11-carbon-web-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[codecov[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 84.83%. Comparing base (faed0de) to head (9509629). Report is 1 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #19555   +/-   ##
=======================================
  Coverage   84.83%   84.83%           
=======================================
  Files         371      371           
  Lines       14773    14773           
  Branches     4843     4821   -22     
=======================================
  Hits        12532    12532           
- Misses       2091     2092    +1     
+ Partials      150      149    -1     

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

:rocket: New features to boost your workflow:

• :snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• :package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[annawen1]

Maybe we can create a separate ticket for this, but it'll be nice if we could also bring over the feature flag styles displayed in the React stories

[preetibansalui]

Maybe we can create a separate ticket for this, but it'll be nice if we could also bring over the feature flag styles displayed in the React stories

Yes, added that in the checklist as Add Annotation wrapper to Feature Flag Stories Will convert them to sub-issues one by one.

[preetibansalui]

Echoing Anna's comments a bit, does this support nested usage like React? A contrived example:

<feature-flags enable-flag="true">
  <breadcrumb ... />
  <feature-flags enable-flag="false">
    <breadcrumb ... />
    <feature-flags enable-flag="true">
      <breadcrumb ... />
    </feature-flags>
  </feature-flags>
</feature-flags>

• Needs unit tests

• Needs Feature Flags storybook docs page under the "getting started" section.

  • I had an idea about this Epic: Add Feature Flag Support to Web Components #19454 (comment)

  • Would be nice to avoid documentation duplication by extracting framework-agnostic portions of the existing feature-flags.mdx documentation to be used in both the react and web components storybook. So we only have one place to update when a flag is added/changed/etc.

Yes, It does support the nested usage like react. Updated the Breadcrumb example as nested ones.

[preetibansalui]

Echoing Anna's comments a bit, does this support nested usage like React? A contrived example:

<feature-flags enable-flag="true">
  <breadcrumb ... />
  <feature-flags enable-flag="false">
    <breadcrumb ... />
    <feature-flags enable-flag="true">
      <breadcrumb ... />
    </feature-flags>
  </feature-flags>
</feature-flags>

• Needs unit tests

• Needs Feature Flags storybook docs page under the "getting started" section.

  • I had an idea about this Epic: Add Feature Flag Support to Web Components #19454 (comment)

  • Would be nice to avoid documentation duplication by extracting framework-agnostic portions of the existing feature-flags.mdx documentation to be used in both the react and web components storybook. So we only have one place to update when a flag is added/changed/etc.

• Added Unit tests.
• Created a separate issue for documentation.

[netlify[bot]]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	82a4094ea03366d9a7e64a90ffc95f22360cc87e
🔍 Latest deploy log	https://app.netlify.com/projects/carbon-elements/deploys/685266fcd618d900087bd8df
😎 Deploy Preview	https://deploy-preview-19555--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify[bot]]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	95096294ad0e9750489290c83ad180ecd07eed97
🔍 Latest deploy log	https://app.netlify.com/projects/carbon-elements/deploys/6853b41d22c8c50008811536
😎 Deploy Preview	https://deploy-preview-19555--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.