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.

Sign up for GitHub

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

Jump to bottom

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

Open
2 tasks done
davidnixon opened this issue Apr 30, 2024 · 1 comment
Open
2 tasks done

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

davidnixon opened this issue Apr 30, 2024 · 1 comment
Labels
bug Something isn't working dev Needs some dev work

Comments

@davidnixon
Copy link

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 davidnixon added bug Something isn't working dev Needs some dev work labels Apr 30, 2024
@davidnixon davidnixon changed the title [Carbon webcomponents]: cds-text-input styling/slots [carbon-web-component]: cds-text-input styling/slots Apr 30, 2024
@davidnixon
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working dev Needs some dev work
Projects
Carbon for IBM.com
Status: No status
Milestone
No milestone
Development

No branches or pull requests
1 participant
@davidnixon