search

carbon-design-system / carbon-for-ibm-dotcom

Carbon for IBM.com is based on the Carbon Design System for IBM
https://www.ibm.com/standards/carbon/
Apache License 2.0
245 stars 151 forks source link

[carbon-web-component]: cds-text-input styling/slots #11757

Open davidnixon opened 2 months ago

davidnixon commented 2 months ago

Description

  <cds-text-input value='testing'>
    <div slot='helper-text'>Some help</div>
    <div slot="label-text">Some Label</div>
  </cds-text-input>
  1. Should show properly styled text input box but it does not. Styling references missing variable --cds-field and --cds-border-strong. Probably should be --cds-field-01 and --cds-border-strong-01
  2. Slots do not work. Nothing is shown for the slot data but the attributes helperText, invalidText, and label do work.

Component(s) impacted

cds-text-input image

with workaround for styling

          /*uncomment these to fix styling*/
          --cds-field: #f4f4f4;
          --cds-border-strong: #8d8d8d;

image

Browser

Chrome

Carbon for IBM.com version

v.2.8.0

Severity

Severity 3 = The problem is visible or noticeable to users but does not impede the usability or functionality. Affects minor functionality, has a workaround.

Application/website

Carbon component for Vue - wrapping carbon web components

Package

@carbon/web-components

CodeSandbox example

carbon web components sand box is broken for me https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/input

Steps to reproduce the issue (if applicable)

<!DOCTYPE html>
<html>
<head>
  <title>Testing cds-text-input</title>
  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/version/v2.8.0/text-input.min.js"></script>
  <style>
      #app {
          font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
          width: 300px;
          margin: 2rem;
          /*uncomment these to fix styling*/
          /*--cds-field: #f4f4f4;*/
          /*--cds-border-strong: #8d8d8d;*/
      }
  </style>
</head>
<body>
<div id="app">
  <cds-text-input value='testing'>
    <div slot='helper-text'>Some help</div>
    <div slot="label-text">Some Label</div>
  </cds-text-input>
</div>
</body>
</html>

Release date (if applicable)

No response

Code of Conduct

davidnixon commented 2 months ago

maybe one more since its also related to text-input styling. This does not look correct:

<html lang='en'>
<head>
  <title>Testing cds-text-input</title>
  <script src='https://1.www.s81c.com/common/carbon/web-components/version/v2.8.0/text-input.min.js' type='module'></script>
</head>
<body>
  <cds-text-input-skeleton/>
</body>
</html>

image

Compared to react image

It's rendering the label but not the input. The input has a 0 height.