foundation更新

uzabase · Oct 22, 2024 · b058c38 · b058c38
1 parent 2a8e51d
commit b058c38
Show file tree

Hide file tree

Showing 8 changed files with 14 additions and 25 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@sp-design/components-web-components",
   "private": true,
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

diff --git a/src/components/button/button.css b/src/components/button/button.css
@@ -3,7 +3,6 @@
   --padding-inline: 16px;
 
   display: inline-block;
-  min-width: 0;
   max-width: 100%;
 }
 
@@ -17,19 +16,17 @@
   border: 1px solid transparent;
   background-color: transparent;
   min-height: 28px;
-  max-width: calc(100% - var(--padding-inline)*2);
+  max-width: 100%;
   padding-inline: var(--padding-inline);
   position: relative;
   overflow: hidden;
   cursor: pointer;
 }
 
 .base__text {
-  min-width: 0;
   font-size: 10px;
   font-weight: bold;
   line-height: 1;
-  overflow-wrap : break-word;
 }
 
 .type__default.appearance__outline {

diff --git a/src/components/checkbox/checkbox-list.css b/src/components/checkbox/checkbox-list.css
@@ -1,6 +1,5 @@
 :host {
   display: block;
-  min-width: 0;
 }
 
 .base {
@@ -33,12 +32,10 @@
 }
 
 .text {
-  min-width: 0;
   padding-block-start: 2.5px;
   color: var(--color-semantic-text-body-regular);
   font-size: 12px;
   line-height: 1.6;
-  overflow-wrap : break-word;
 }
 
 .base:has(input:disabled) .text {

diff --git a/src/components/checkbox/checkbox-text.css b/src/components/checkbox/checkbox-text.css
@@ -1,6 +1,5 @@
 :host {
   display: inline-block;
-  min-width: 0;
   max-width: 100%;
 }
 
@@ -22,12 +21,10 @@
 }
 
 .text {
-  min-width: 0;
   padding-block-start: 2.5px;
   color: var(--color-semantic-text-body-regular);
   font-size: 12px;
   line-height: 1.6;
-  overflow-wrap: break-word;
 }
 
 .base:has(.input:disabled) .text {

diff --git a/src/components/foundation.css b/src/components/foundation.css
@@ -1,7 +1,16 @@
+:host, * {
+  overflow-wrap: break-word;
+  min-width: 0;
+}
+
 :host {
   font-family: var(--font-ja);
 }
 
 :host:lang(zh) {
   font-family: var(--font-zh);
 }
+
+button {
+  box-sizing: border-box;
+}
diff --git a/src/components/radio/radio-button-text-group.css b/src/components/radio/radio-button-text-group.css
@@ -1,6 +1,5 @@
 :host {
   display: inline-block;
-  min-width: 0;
   max-width: 100%;
 }
 
@@ -26,15 +25,12 @@
   display: inline-flex;
   justify-content: flex-start;
   align-items: flex-start;
-  min-width: 0;
 }
 
 .text {
-  min-width: 0;
   color: var(--color-semantic-text-body-regular);
   font-size: 12px;
   line-height: 1.6;
-  overflow-wrap : break-word;
   padding-block: 2.5px;
   cursor: pointer;
 }

diff --git a/src/components/segmentedControl/segmented-control.css b/src/components/segmentedControl/segmented-control.css
@@ -1,6 +1,5 @@
 :host {
   display: inline-block;
-  min-width: 0;
   max-width: 100%;
   line-height: 0;
   vertical-align: middle;
@@ -37,7 +36,6 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  min-width: 0;
   padding-block: 8px;
   padding-inline: 8px;
   background-color: var(--color-semantic-surface-regular-2);
@@ -47,7 +45,6 @@
   font-size: 10px;
   line-height: 1.6;
   text-align: center;
-  overflow-wrap : break-word;
 }
 
 .text:hover {
@@ -82,8 +79,3 @@
   color: var(--color-semantic-text-disabled);
   cursor: not-allowed;
 }
-
-.text-inner {
-  min-width: 0;
-  overflow-wrap: break-word;
-}
diff --git a/stories/button/sp-button.story.ts b/stories/button/sp-button.story.ts
@@ -92,6 +92,7 @@ export const AttributeHTML: Story = {
 
 export const OverflowWrap: Story = {
   render: (args) => html`
+    <p style="overflow-wrap: break-word;">texttexttexttexttexttexttextttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttextexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</p>
     <sp-button text="text"></sp-button>
     <sp-button text="text"></sp-button>
     <sp-button
@@ -107,13 +108,13 @@ export const OverflowWrap: Story = {
     <sp-button
       text="にほんごにほんごにほんごにほんごにほんごにほんごにほんごにほんごにほんごにほんごにほんごにほんごにほんごにほんごにほんごにほんごにほんごにほんごにほんごにほんごにほんごにほんごにほんごにほんごにほんごにほんごにほんごにほんごにほんごにほんごにほんごにほんごにほんごにほんごにほんごにほんごにほんごにほんごにほんごにほんごにほんごにほんごにほんごにほんごにほんごにほんごにほんごにほんごにほんごにほんごにほんごにほんごにほんごにほんごにほんごにほんごにほんごにほんごにほんごにほんご"
     ></sp-button>
-    <div style="display: flex;">
+    <div style="display: flex; min-width: 0;">
       <div>サンプルdiv</div>
       <sp-button
         text="texttexttexttexttexttexttextttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttextexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext"
       ></sp-button>
     </div>
-    <div style="display: flex;">
+    <div style="display: flex; min-width: 0;">
       <div>サンプルdiv</div>
       <sp-button
         icon="edit"